Opis s CSS-om: detaljne upute i metode uklanjanja

Često dodatne informacije na web mjestimasmještene u obliku opisa lebdenja, na primjer, za dešifriranje složenih kratica ili pojašnjenje korisničkih radnji. Ovo rješenje sučelja naziva se opisom. Štedi prostor na stranici prikazivanjem samo osnovnih podataka, ali čitatelju ostavlja mogućnost pregledavanja dodataka po potrebi. Uz čisto informativnu funkciju, opisi alata mogu biti važni elementi dizajna koji ističu cjelokupni stil web stranice i privlače pažnju.

Ponašanje bloka opisa

Element, čija interakcija uzrokuje pojavu opisa, naziva se cilj.

Skočni blokovi obično sadrže važnoali ne i osnovne informacije. Pretpostavlja se da bi ga korisnik trebao pročitati samo ako to želi. Da ne bi smetali, ometali ili odvlačili pažnju od glavnog sadržaja, savjet mora udovoljavati brojnim zahtjevima:

• Glatki izgled. Nehotično lebdenje iznad ciljnog elementa ne bi trebalo rezultirati naglim iskakanjem opisa. To je još uvijek prihvatljivo za male okvire s tekstom, ali je kategorički neprikladno ako je opis alata velik ili sadrži slike.
• Odgovarajući smještaj. Prozor za prompt ne bi trebao obuhvaćati sadržaj koji objašnjava kako bi se korisnik mogao podudarati s podacima. U slučajevima kada je opis alata prvenstveno dekorativan, to je prihvatljivo.
• Nema utjecaja na drugi sadržaj. Opisi alata trebali bi biti mali, jedva vidljivi pomagači za korisnika, pa ne bi trebali biti nezgodni. Ispravan opis ne pomiče susjedne blokove niti se pomiče sa stranice stvarajući trake za pomicanje.
• Vidljivost. Opis opisa mora biti vidljiv u cijelosti, ne smije se preklapati s drugim elementima niti skrivati ​​iza ruba prozora preglednika.
• Jednostavnost upravljanja. Važno je da korisnik intuitivno razumije kako pozivati ​​i uklanjati opise alata i da neće imati poteškoća s tim radnjama.

Opis u čistom HTML-u

Sposobnost stvaranja savjeta svojstvena je jeziku za označavanje hiperteksta na web stranicama. Prvotno je bio namijenjen dešifriranju kratica i složenih znanstvenih pojmova.

Da biste stvorili takav skočni blok, potreban vam je atribut naslova dostupan za bilo koju HTML oznaku.

<p> Proxima Centauri se nalazi oko4.22 <i title = "9 460 730 472 580 800 metara"> svjetlosna godina </i> sa Zemlje, što je 270 tisuća puta više od udaljenosti od Zemlje do Sunca. </p>  <img title = "Dvorac Neuschwanstein" src = "/ images / disney.jpg">

Glavne prednosti HTML opisa su: jednostavnost upotrebe i mogućnost upotrebe s bilo kojim elementima izgleda - od teksta do slika. Ali ona ima i velikih nedostataka:

• ne možete formatirati tekst;
• prejednostavan izgled koji se ne može promijeniti;
• nemogućnost umetanja slika.

Atribut HTML naslova pogodan je samo za male savjete koji ne zahtijevaju poseban stil. U drugim je slučajevima korisno znati kako napraviti opise alata pomoću CSS-a.

CSS-opis

Možete stvoriti prekrasan prilagođeni blok savjeta pomoću kaskadnih listova stilova. Koristi osnovne CSS koncepte:

• apsolutno pozicioniranje - za izvlačenje savjeta iz općeg tijeka dokumenta;
• skrivanje bloka u potpunosti u neaktivnom stanju pomoću svojstva prikaz;
• pseudo klasa : hover, koji je dodijeljen bilo kojem elementu ispod pokazivača miša;
• pseudo-elementi : prije i : poslijekoji se može koristiti za jednostavne upute, kako ne bi stvorio zasebni HTML element;
• animacija i blijeđenje za lijepe efekte fade in fade out.

Sva ova svojstva dobro podržavaju moderni preglednici, što mehanizam alata čini pouzdanim.

Pseudo klasa : hover, osim što lebdi kursorom, reagira i na dodir prsta na dodirnom zaslonu, što omogućuje podršku mobilnim uređajima.

Blok ili pseudo-element

Opis CSS-alata može biti ili zasebni HTML blok sa vlastitom strukturom, ili pseudo-element drugog bloka. Svaka od ovih opcija treba razmotriti prednosti i nedostatke.

Puno je lakše manipulirati sadržajem u zasebnom spremniku. U njega možete smjestiti slike, zaglavlja i druge elemente.

Pseudo-element omogućuje vam da se riješite nepotrebnogblokova i malo olakšajte izgled. Tekstualni sadržaj može se smjestiti u atribut ciljnog elementa i ne brinite se oko stvaranja samog opisa, sve će učiniti CSS. Međutim, pseudo-element je slabo prikladan za blok složene strukture. Također, može se stvoriti samo za zatvaranje oznaka. Takav nagovještaj ne možete priložiti izravno na sliku.

Stvaranje CSS skočnog bloka

Stvorimo lijepo dizajniran alat s složenom strukturom za najbližu zvijezdu iz zviježđa Centaurus.

Prije svega, definirajmo HTML oznaku:

<h2> Zvijezde zviježđa Centaurus </h2> <ulclass = "stars"> <li class = "star"> Alpha Centauri </li> <li class = "star"> Beta Centauri </li> <li class = "star"> Theta Centauri </li> <li class = "star"> Gamma Centauri </li> <li class = "star"> Epsilon Centauri </li> <li class = "star"> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (od latinskog proxima - najbliži) crveni je patuljak koji pripada zvjezdanom sustavu Alpha Centauri, najbližoj zvijezdi Zemlji nakon Sunca. </div> </li> </ul>

Oblikujmo i sakrijemo blok savjeta pomoću CSS-a:

.zvijezda { položaj:srodnik; }  / * stilovi za opis * / .star .tooltip { zaslon: nema; položaj: apsolutni; vrh: 50%; transformacija: translateY (-50%); lijevo: 100%; }  / * stilovi za ukrasni trokut * / .star .tooltip: prije {...}  / * skočni opis pri prelasku mišem * / .star: hover .tooltip {prikaz: blok; }

Stilovi popisa i samog opisa mogu biti bilo što, izostavljeni su zbog kratkoće.

Postavljanje opisa u zasebni blok omogućuje vam upotrebu slika unutar njega, oblikovanje teksta, pa čak i stvaranje pseudo-elemenata za lijep dizajn.

Opis u pseudo-elementu

Pokažite stvaranje opisapseudo-element pomoći će grafičkoj ploči uređivača. Svaki je alat predstavljen u obliku ikone čija svrha neiskusnom korisniku može biti nerazumljiva. Da nitko ne bi ostao nesretan, na ikone treba dodati savjete s imenima.

HTML kôd ploče izgledat će ovako:

<div class = "tools"> <div class = "instrument"data-tooltip = "Kist"> <img src = "/ images / brush-icon.svg"> </div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </div> <div class = "instrument" data-tooltip = "Povećaj"> <img src = "/ images / zoom-in-icon.svg"> </div> <div class = "instrument" data-tooltip = "Umanji"> <img src = "/ images / zoom-out-icon.svg"> </div> </div>

Jedinstveni naziv instrumenta nalazi se u atributu opis podataka... Unutar bloka nalazi se ikona, ali u HTML kodu nedostaje sam opis.

Budući da će opis sadrži samo kratki tekst s objašnjenjima, možete koristiti pseudo-elemente kako biste izbjegli nered na svjetlosnoj ploči.

/ * opći stilovi za ikonu * / ...instrument { položaj: relativan;  boja: # 666; pozadina: bijela;  kursor: pokazivač; }  / * stilovi za ikonu pri zadržavanju pokazivača * / .instrument: hover { pozadina: # 666; boja: bijela; }  / * stilovi za opis * / .instrument: hover: after { sadržaj: attr (opis-podataka); položaj: apsolutni; lijevo: 100%;  boja: # 666; }

Pseudo-element se pojavljuje samo pri zadržavanju pokazivača, pa ga nema potrebe skrivati ​​s display: block. Njegovim mjestom upravljaju svojstva položaj i lijevo / desno / gore / dolje... Da biste dobili od atributa opis podataka ciljni element sadržaja CSS-a s opisom pruža funkciju attr ()... Dekorativni stilovi izostavljeni su zbog kratkoće.

Savjet koji se pojavljuje na kliku bez skripti

Prethodno raspravljeni mehanizmi opisa, reagirali su na zadržavanje miša iznad ciljnog elementa i temeljili su se na CSS pseudo-klasi : hover... U nekim je situacijama poželjno otvoriti opis na klik. Ovaj je učinak jednostavno implementirati u JavaScript, ali CSS može obaviti posao.

Među popisima CSS pseudo-klasa nalazi se i prekrasna klasa : usredotočenostdostupno za poveznice i ulazne elemente. Za razliku od : hoverkoji nestaje čim pokazivač odemiš, ova pseudo-klasa omogućuje vam spremanje aktivnog stanja ciljnog elementa. A ako su polja za unos semantički ne baš pogodna za stvaranje opisa, veze su u redu.

Zamijenimo stavku popisa iz prvog primjera vezom:

<a class = "star" href = "javascript:void (0) "> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (od latinskog proxima - najbliži) crveni je patuljak koji pripada zvjezdanom sustavu Alpha Centauri, najbližoj zvijezdi Zemlji nakon Sunca. </div> </a>

Atribut href sa značenjem javascript: void (0) je potrebno kako bi se spriječila bilo kakva reakcija preglednika na klikanje na vezu.

Sljedeći stilovi omogućit će vam pozivanje opisa s opisom zvjezdice na klik:

.star .tooltip { zaslon: nema; }  .star: focus .tooltip { prikaz: blok; }

Veza će zadržati fokus dok korisnik ne klikne bilo gdje na stranici.

Dakle, opis na web mjestu može se stvoriti na mnogo različitih načina, čak i bez upotrebe JavaScript-a. Svaki od njih je dobar, samo trebate odabrati najprikladnije za određenu situaciju.