Kako napraviti tooltip u HTML-u? Kako napraviti jednostavne opise alata u CSS3.

Od autora: Zdravo. Objašnjenje je mali tekst objašnjenja koji se pojavljuje kada pređete mišem preko elementa, obično slike. Danas ćemo pogledati kako možete napraviti tooltip u HTML-u na različite načine.

Podrazumevano, atribut title je odgovoran za prikazivanje teksta objašnjenja. Može se koristiti za različite elemente, ali se obično koristi samo za slike kako bi se objasnilo ono što prikazuju.

U jednom od prethodnih članaka koristio sam sliku tigra da pokažem rad sa veličinama slika. Ako nemate ništa protiv, ponovo ću koristiti ovu sliku. Dakle, da biste prikazali nagovještaj, potrebno je samo dodati atribut title i u njega napisati željeni tekst.

Može biti jedna riječ ili nekoliko rečenica. A ovako to izgleda:

Nagoveštaj se pojavljuje glatko, ne odmah nakon lebdenja, već nakon nekog vremena. Ovo je zadano ponašanje.

Glavni problem s takvim opisom alata je taj što se ne može stilizirati. Kako riješiti ovaj problem? Morat ćemo dati nagovještaj na druge načine. Sada ću ti pokazati par.

Vrlo zanimljiv način koji vam omogućava da lijepo prikažete nagovještaj za sliku. HTML označavanje je jednostavno, samo sliku treba staviti u blok kontejner, kojem ćemo dodijeliti identifikator kako bismo je kasnije mogli referirati u stilovima:

Jedina stvar koja vam ovdje može biti nejasna je atribut naziv-podataka. Stvar je u tome što je ovo takozvani data atribut koji ne radi ništa sam po sebi, ali se njegova vrijednost može koristiti u css-u i javascript-u, što ga čini korisnim u nekim slučajevima. Vidjet ćete ovo sljedeće.

Dakle, prvo, hajde da opišemo stilove za kontejner. Relativno pozicioniranje nam je potrebno jer ćemo apsolutno pozicionirati blok s tekstom objašnjenja tako da se pozicioniranje odvija u odnosu na roditeljski blok, a ne na cijelu stranicu.

#tiger( pozicija: relativna; prikaz: inline-block; )

Prikaz blok-linije će spriječiti da se blok (a sa njim i blok sa opisom alata koji ćemo kreirati) proteže po cijeloj širini prozora. Ostaje samo da kreirate sam nagoveštaj. U CSS-u je vrlo zgodno to učiniti koristeći pseudoelemente. Volim ovo:

#tiger:hover:after ( sadržaj: attr(ime-podataka); pozicija: apsolutna; lijevo: 0; dolje: 0; pozadina: rgba(5,13,156,.55); boja: #fff; poravnanje teksta: centar ; font-family: cursive; font-size: 14px; padding: 3px 0; širina: 100%; )

Koda ima puno, ali ovdje nema ništa komplikovano. Selektor #tiger:hover:after znači sljedeće: kada pređemo mišem preko bloka sa slikom, trebamo kreirati pseudoelement poslije (i tada su pravila navedena u vitičastim zagradama). Svojstvo content: attr(ime-podataka) postavlja tekstualnu vrijednost bloka. Biće jednako onome što je zapisano u atributu imena-podataka bloka omotača slike.

Ovaj tooltip se pojavljuje kada pređete mišem preko slike, ali za razliku od standardnog, to radi naglo, a sam izgled se javlja odmah u trenutku lebdenja. U ovom slučaju, neće biti moguće implementirati glatki prijelaz, jer glatki prijelazi nisu podržani za pseudoelemente.

Međutim, poprilično prepisivanjem koda, možete postići gladak izgled tooltip, i opet, bez upotrebe javascripta.

Da biste se sami uvjerili u 2 efekta koja ću vam sljedeće pokazati, preporučujem da otvorite Notepad ili bilo koji zgodan uređivač koda i sve ponovite za mnom. Istina, za ovo i dalje morate uključiti datoteku stila, iako se stilovi također mogu pisati u html-u u oznakama

Dakle, kod za ovaj primjer će biti malo drugačiji, a to je zato što nećemo koristiti pseudo element. Zbog toga je bilo nemoguće primijeniti glatke promjene. Ovaj put će kod izgledati ovako:

Sumatranski tigar

CSS kod nije pretrpio velike promjene:

#tiger2( pozicija: relativna; prikaz: inline-block; ) #tiger2 .tekst (prijelaz: sve 0,6s; neprozirnost: 0; pozicija: apsolutna; lijevo: 0; dolje: 0; pozadina: rgba(5,13,156,. 55); boja: #fff; text-align: centar; font-family: cursive; font-size: 14px; padding: 3px 0; širina: 100%; transform: scale(0); ) #tiger2:hover .text (prozirnost: 1; )

Uklanjamo samo svojstvo sadržaja jer ga podržavaju samo pseudoelementi. Dodamo svojstvo tranzicije, koje stvara glatke prelaze stanja. Pa, neprozirnost: 0 će našem bloku opisa alata dati punu transparentnost, tako da neće biti vidljiv na stranici.

Kada se lebdi iznad bloka, sada je dovoljno da vratite normalnu prozirnost bloku pomoću tooltip-a. Spreman. Možete provjeriti da li se element glatko pojavljuje.

Koristeći css3 možete sakriti element na drugi način. Korištenje transformacija, na primjer. Zamijenite punu transparentnost ovim svojstvom: transform: scale(0) i veličina bloka će se smanjiti na nulu, tako da jednostavno neće biti na ekranu. Kada zadržite pokazivač iznad bloka sa slikom, trebali biste vratiti normalnu veličinu ovako: transform: scale(1). U ovom slučaju efekt izgleda izgledat će još ljepše. Ovo možete i sami vidjeti.

Kao što vidite, u css-u se tooltip takođe može pojaviti polako sa prekrasnim efektima.

jQuery vam može pružiti još više mogućnosti. Koristeći ovu biblioteku, možete sami napisati kod za prikaz nagoveštaja ili pronaći neki dodatak koji to već implementira.

Na primjer, Bootstrap framework također ima mnogo gotovih komponenti, a jedna od njih su opisi alata. Možete potražiti u dokumentaciji okvir za primjere koda koji vam omogućavaju da kreirate te iste savjete i koristite ih. Nije potrebno povezati cijeli Bootstrap; općenito možete ostaviti samo takvu komponentu kao što su opisi alata, preuzeti i povezati samo to.

Uopšteno govoreći, danas sam vam pokazao načine u CSS-u da napravite prekrasan opis alata sa oštrim i glatkim izgledom; osim toga, u svom arsenalu imate Bootstrap i jQuery. Odaberite bilo šta i implementirajte zanimljive i lijepe savjete na svoje stranice!

HTML opis alata je blok s dodatnim informacijama koje se pojavljuju kada postavite pokazivač miša preko određenog elementa web stranice. Danas ćemo kreirati naš vlastiti tooltip koristeći HTML i CSS:

Pogledaj demo | Preuzmite izvorni kod

Moći ćemo koristiti CSS savjete za većinu elemenata kao što su veze, oznake, stilizovani tekst, itd. Morat ćemo primijeniti nekoliko klasa na element i dodati data-atribut s tekstom opisa alata.

Moramo kreirati HTML dokument i postaviti izvornu oznaku:

Tooltips Demo // content

Dodao sam vezu na Normalize.css koja pomaže da se svi stilovi pretraživača resetuju na podrazumevane i osigurava da svaki element izgleda isto u svim pretraživačima. Za razliku od standardnog CSS resetovanja, Normalize.css ne uklanja sve podrazumevane stilove, tako da nećete morati da prepisujete stil svakog elementa ispočetka.

Napravio sam div sa klasom kontejnera u koju ćemo smjestiti osnovne primjere HTML opisa alata. Evo stilova za tijelo i klasu .container:

tijelo (familija fontova: "Work Sans", sans-serif; veličina fonta: 1,5em; visina linije: 1,4em; težina fonta: 700; boja pozadine: #28ABE3; boja: #fff; ) .kontejner ( širina: 800px; margina: 100px auto; pozadina: radijalni gradijent (krug najudaljeniji ugao na 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Centrirao sam div kontejner tako što sam postavio margin-left i margin-right na auto . Također je dodano malo stila dijelu tijela kako bi izgledao bolje.

Odlučio sam dodati mali svijetli CSS gradijent za pozadinu. Ako pretraživač ne podržava CSS gradijente (ovo se uglavnom odnosi na IE 8 i 9), boja pozadine će se vratiti na podrazumevanu plavu (boja pozadine dela tela).

Koristiću HTML nagovještaje lebdenja sa oznakama sidra, ali možete dodijeliti klase drugim inline elementima, kao što su jaka oznaka ili span. Ispod je sadržaj div kontejnera:

• Dno opisa alata
• Tooltip lijevo

  Dodijelio sam dvije klase linkovima. Klasa opisa alata će biti odgovorna za tijelo opisa alata, a druga klasa će odrediti njegovo postavljanje.

  Također možete vidjeti prilagođeni data- atribut, koji sadrži tekst našeg HTML opisa alata.

  Kreiranje klase alata

  Ispod je kod za klasu opisa alata:

  Tooltip ( pozicija: relativna; ) .tooltip:after ( pozicija: apsolutna; padding: 8px; granica: 3px čvrsta #fff; radijus granice: 8px; boja pozadine: #1FDA9A; veličina fonta: .9em; težina fonta : bold; boja: #fff; sadržaj: attr(data-tooltip); min-width: 80px; /* širina: -moz-max-content; */ /* širina: -webkit-max-content; */ neprozirnost : 0; prijelaz: sve .2s jednostavnog ulaska .25s; vidljivost: skrivena; z-indeks: 2; ) .tooltip:hover:after (prozirnost: 1; vidljivost: vidljiva; )

  HTML opis alata za lebdenje sam po sebi je pseudo-element :after i pozicioniran je apsolutno. Zbog toga je potrebno dodijeliti relativnu poziciju sidrenom elementu. Dodao sam nekoliko osnovnih stilova kao što su padding, ivica, veličina fonta i širina. Pogledajmo bliže svojstvo sadržaja.

  Sadrži attr() - vrijednost koja pohranjuje naše prilagođene podatke-tooltip i koristi ga za prikaz teksta samog tooltip-a. Možete koristiti bilo koje drugo ime umjesto data-tooltip, samo vodite računa da počinje sa data- . Više o ovim atributima možete saznati ovdje.

  Tijelo opisa alata ima minimalnu širinu od 80 piksela. Ako želite da se sadržaj opisa alata proteže u jednu liniju, dodajte vrijednost max-content za svojstvo širine, koje je trenutno komentirano. Treba napomenuti da je ovo eksperimentalna funkcija, tako da biste trebali koristiti prefikse dobavljača -webkit- i -moz- .

  Da bismo opisu alata koji lebde HTML dali efekat animacije slajda, koristimo svojstvo tranzicije. Obratite pažnju na vrijednost .25s, koja specificira kašnjenje prije nego što se tooltip prikaže ili sakrije. Dakle, neće se prikazati ako greškom zadržite pokazivač miša iznad teksta, već samo ako zadržite pokazivač miša preko teksta duže vreme. Također sam postavio neprozirnost na 0 i vidljivost na skrivenu. Ne možemo koristiti display: none; , jer će element potpuno nestati i nećemo vidjeti nikakve efekte tranzicije. Prozirnost i vidljivost se mijenjaju kada pređete pokazivačem miša iznad elementa.

  rezultat:

  Pogledaj

  Napomena: Promijenio/uklonio sam neke oznake i stilove u demou na CodePen-u. Da biste vidjeli konačni rezultat, pogledajte demo na kraju ovog članka.

  Dodavanje pokreta

  Sada kada smo implementirali HTML opis koji se pojavljuje/nestaje pri lebdenju, hajde da ga pomerimo. Već smo dodijelili svojstvo animacije, sve što trebamo učiniti je postaviti početnu poziciju odakle bi se trebala pojaviti i krajnju poziciju:

  /*Inicijalna pozicija opisa alata*/ .tooltip-top:after (dole: 150%; lijevo: 0; ) .tooltip-bottom:after (gore: 155%; lijevo: 0; ) .tooltip-left:after (desno: 130%; min-width: 100px; ) .tooltip-right:after (lijevo: 130%; min-width: 100px; ) /*Krajnja pozicija vrha*/ .tooltip-top:hover:after (dole: 120%; ) .tooltip-bottom:hover:after (vrh: 125%; ) .tooltip-left:hover:after (desno: 110%; ) .tooltip-right:hover:after (lijevo: 110%; )

  Odlučio sam dodati ovu funkcionalnost dodatnim časovima. Dakle, ako dodijelite, na primjer, klasu .tooltip-left , tooltip će se pojaviti lijevo od teksta, ako dodate .tooltip-top , tooltip će se pojaviti na vrhu, itd.

  Pogledaj demo

  U ovoj demonstraciji koristim klasu .tooltip-right. Možete eksperimentirati i koristiti različite klase za definiranje različitih pozicija HTML opisa.

  Kreiranje trougla

  Posljednji element opisa alata je mali trokut na jednoj strani bloka. Kreiraćemo ga koristeći pseudoklasu :before (pseudoklasa :after se već koristi za sam opis alata). Dodjeljujemo ga našim četirima klasama položaja tako da se za svaku od njih ispisuje trokut u skladu s tim:

  /** * Trokuti */ .tooltip-top:pre, .tooltip-bottom:pre, .tooltip-left:pre, .tooltip-right:before (sadržaj: ""; prikaz: blok; pozicija: apsolutna; granica- širina: 7px; stil obruba: čvrst; boja granice: rgba(0, 0, 0, 0); neprozirnost: 0; prijelaz: sve .2s lako ulazak .25s; vidljivost: skriveno; ) .tooltip- top:hover:prije, .tooltip-bottom:hover:prije, .tooltip-left:hover:prije, .tooltip-right:hover:prije (prozirnost: 1; vidljivost: vidljiva; )

  Kreiramo trokut dajući širinu ivici kada sam element nema širinu ili visinu. U ovom slučaju, širina okvira je postavljena na 7 piksela. Boja okvira je potpuno transparentna, što je veoma važno. U sljedećem isječku koda dodeljujem boju odgovarajućoj strani okvira, što mi omogućava da definišem oblik trougla.

  Ostatak stila izgleda slično onome što smo uradili za tijelo opisa HTML-a. Imamo iste prelaze, pozicija je apsolutna, neprozirnost je postavljena na 0 i vidljivost je skrivena:

  /*Početni položaj trougla*/ .tooltip-top:before (vrh: -51%; lijevo: 50%; transform: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :before (dolje: -56%; lijevo: 50%; transform: translateX(-50%); border-bottom-color: #fff; ) .tooltip-left:before (lijevo: -31%; gore: 15% ; border -left-color: #fff; ). -top:hover :before (gore: -21%; ) .tooltip-bottom:hover:before (dole: -26%; ) .tooltip-left:hover:before (lijevo: -11%; ) .tooltip-desno :hover:prije (desno: -11%; )

  Da bi se trokut kretao na isti način kao i opis alata, trebate dodijeliti početnu i krajnju poziciju.

  Malo je vjerovatno da će gurui izgleda pronaći nešto novo za sebe u ovom postu. Ovaj post je više za početnike layout dizajnere koji su, poput mene, imali problema s kreiranjem i stiliziranjem univerzalnih savjeta.

  Nedavno, kada sam pravio mali blog, suočio sam se sa zadatkom da napravim elegantne, ali u isto vreme jednostavne opise alata. Nakon što sam isprobao različite načine kreiranja zasebnih div kontejnera za opise alata, ili kreiranja opisa alata s čistim CSS-om, pronašao sam univerzalno rješenje koje neće zatrpati kod, biti kompatibilno sa više pretraživača, a istovremeno će biti vrlo jednostavno za implementaciju.
  Sve koje zanima moj način rješavanja ovog jednostavnog problema, pitam pod kat.

  Rešenje Metoda koju ću vam ponuditi je prilično jednostavna i efikasna. Radi u svim pretraživačima, čak i u IE 6 (testirao sam mnogo puta). Lako se mijenja i praktično. Ne zatrpava kod i čini ga jasnim. Može se lako promijeniti kako bi odgovarao vašim potrebama. Na primjer, odgodite prikaz opisa alata koristeći setTimeout ili nešto drugo. HTML Pretpostavimo da imamo HTML stranicu sa vezom, kada pređemo mišem preko nje trebamo prikazati opis alata:
  Tooltips Link
  Kao što ste možda već primijetili iz liste, koristim MANJE css pretprocesora.
  Uključili smo CSS stilove i skripte u zasebne datoteke. Također imamo jednu vezu i div blok, koji će biti kontejner za tooltip.
  HTML5 specifikacija dozvoljava upotrebu prilagođenih atributa tipa data-atributa, koji mogu pohraniti neke informacije o elementu ili bloku. U atributima podataka ćemo spremiti tekst opisa alata.
  Veza
  Za skladištenje koristim atribut data-tooltip.
  Završili smo sa HTML-om - možemo da pređemo na stilove CSS Koristim LESS Elements biblioteku i preporučujem je svima, pa ću napisati neka svojstva koristeći ovaj okvir.
  @import "css/elements.less"; #tooltip ( z-indeks: 9999; pozicija: apsolutna; prikaz: nema; vrh:0px; lijevo:0px; boja pozadine: #000; padding: 5px 10px 5px 10px; boja: bijela; .opacity(0.5); . zaobljeno (5px); )
  Iz listinga je jasno da u prvom redu povezujemo LE, postavljamo div#tooltip blok na apsolutno pozicioniranje i sakrivamo ga. Zatim bloku dajemo boju pozadine i boju teksta, zaokružujemo uglove (5px) i postavljamo vrijednost transparentnosti na 50%.jQuery Sada dolazi zabavni dio - jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "vrh" : 0, "lijevo" : 0 )); )); ));// Spreman kraj.
  Sada dodajemo sve elemente sa atributom data-tooltip u selekciju i, kada pređemo mišem preko željenog elementa, dobijamo vrednost tooltip i pohranjujemo je u varijablu. Zatim dodajemo tekst nagoveštaja u #tooltip blok, dajemo mu koordinate kursora od ivice stranice + 5 px i konačno prikazujemo blok sa opisom alata na pravom mestu. Nakon što miš napusti element, sakrivamo #tooltip blok, brišemo njegov sadržaj i vraćamo ga na 0;0;.

  To je sve!
  Kao rezultat, dobićemo nešto ovako: Demo

  Zahvaljujući ovoj jednostavnoj skripti, svi elementi na stranici koji imaju atribut data-tooltip će dobiti tooltip.

  Hvala vam na pažnji!

  Alati su odličan način za prikaz dodatnih informacija jednostavnim prelaskom miša preko teksta ili slike. Mogu se koristiti, na primjer, za prikaz naziva slika, opisa veza ili bilo koje druge informacije koje mogu biti korisne korisniku vašeg izvora. I nema potrebe da razbijate šablon dizajna.

  U ovom vodiču ćemo pogledati kako kreirati jednostavne opise alata koristeći HTML i CSS koji će prikazati sadržaj atributa title veze.

  Link do korisnog resursa

  Postavimo osnovni stil za klasu tooltip:

  Tooltip (prikaz: umetnuti; položaj: relativan; )

  Sada će se opis alata prikazati u jednoj liniji sa vezom koristeći relativno pozicioniranje. Sada definirajmo zaobljene uglove za blok opisa alata i pozicioniramo ga na vrh veze:

  Tooltip:hover:after( background: #333; background: rgba(0,0,0,.8); border-radius: 5px; dno: 26px; boja: #fff; sadržaj: attr(title); lijevo: 20 %; padding: 5px 15px; pozicija: apsolutna; z-indeks: 98; širina: 220px; )

  Koristimo pseudo-klasu :hover, koja odabire element kada miš pređe preko njega, i :after pseudo-klasu, koja dodaje sadržaj nakon odabranog elementa. Pozadina je postavljena na djelomično prozirna, a za pretraživače koji ne podržavaju RGBA format boja, boju pozadine postavljamo na sivu.

  Zaobljeni uglovi se kreiraju pomoću atributa border-radius. Postavite boju teksta na bijelu. Konačno, pozicioniramo blok opisa alata i dodamo padding.

  Osim definiranja stilova i pozicioniranja, postavljamo svojstvo sadržaja:

  Sadržaj: attr(naslov);

  Ovo svojstvo vam omogućava da umetnete sadržaj, koji može biti string ili atribut elementa. U ovom slučaju koristimo atribut title veze.

  Link do korisnog resursa

  Da biste dovršili, morate dodati strelicu na dnu opisa alata. Koristimo pseudo-klasu:before i stilove za okvir:

  Tooltip:hover:before( border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; lijevo: 50%; položaj: apsolutna; z-index: 99 ; )

  Da bismo kreirali strelicu, koristili smo trik obruba: postavite boju lijevog i desnog ruba na prozirnu i kontrolirajte širinu ivice. Strelica je takođe pozicionirana ispod tooltip-a.

  Zdravo dragi prijatelji. Neki dan mi se obratio jedan od mojih kupaca sa zahtjevom da poboljšam njegovu web stranicu. Ili bolje rečeno, napravite novi obrazac za prijavu na web stranici, jer se stari obrazac promijenio.

  Takođe je zatražio da se priloži opis alata za svako polje obrasca. Vjerovatno ste vidjeli takve savjete: kada pomjerite kursor miša preko slike ili riječi, pojavljuje se tooltip.

  Naravno, postoji mnogo opcija za implementaciju takvih savjeta. Naravno, fokusirajući se na minimiziranje opterećenja na serveru, odlučio sam da napravim opise koristeći HTML i CSS. Ovo je prilično jednostavno i uopće ne učitava server.

  A vrsta takvog nagovještaja ovisi samo o vašoj vještini i mašti. U obrascu za kupca, implementirao sam ovo kao sliku sa upitnikom pored polja za unos, lebdeći kursorom iznad kojeg se pojavljuje tooltip.

  Primjer implementacije opisa alata

  Kako kreirati tooltip

  Dakle, cijeli proces će vam trajati ne više od 5 minuta. Prvo morate odlučiti kako će izgledati predmet koji privlači pažnju. Odnosno, to može biti slika.Ovako izgleda jednostavan tooltip, kreiran korištenjem CSS stilova. I vezan za sliku. ili .

  Da biste priložili opis alata na sliku, slika prvo mora biti, a zatim učitana na vašu web stranicu. Mislim da nema smisla zadržavati se na ovome. Zatim, na mjesto gdje želite da prikažete ovu sliku i opis alata, unesite ovaj kod:

  LINK ZA SLIKU " alt="hint" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ !}

  Ako je ovo riječ ili fraza, onda morate umetnuti ovaj kod na mjesto gdje želite da se nagoveštaj prikaže.

  TEKST OBJAŠNJENJA RIJEČI

  Sada morate umetnuti stilove u svoj CSS stylesheet, u većini slučajeva to je style.css datoteka.

  Otvorite WP administrativni panel - "Izgled" - "Editor" - "Style Sheet" i umetnite ove stilove na samom kraju.

  Pomoć ( boja: #2C8505; obris: nema; /*boja pomoći*/ kursor: pomoć; dekoracija teksta: nema; /*izgled kursora kada lebdi, može se zamijeniti pokazivačem*/ položaj: relativan; /*pozicija*/ ) /*tooltip position*/ .help span ( margin-left: -999em; position: absolute; ) /*hover tooltip*/ .help:hover span (familija fontova: Verdana, Tahoma, Geneva, sans-serif ; / *font*/ pozicija: apsolutna; /*pozicija*/ lijevo: 10px; vrh: 25px; z-indeks: 99; margina-lijevo: 0; širina: 200px; /*širina bloka opisa alata*/ ) /*parametri slike*/ .help:hover img (granica: 0; ) /*blok sa opisom alata*/ .airhelp (pozadina: nema ponavljanja pomicanja 0 0 rgba(97, 177, 255, 0.9); /*boja pozadine i prozirnost*/ granica : 1px solid #2b82b8; /*parametri granice*/ radijus granice: 5px; /*zaokruživanje uglova*/ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*box shadow*/ boja: #fff; /*boja fonta za opis alata*/ padding: 5px; /*padding*/ )

  Kao što vidite, napravio sam savjete za vas. Sve što treba da uradite je da izvršite izmene kako bi odgovarale vašem dizajnu i možete uživati ​​u opisima alatki. A ako vaši posjetitelji moraju nešto ispuniti, registrirati se na web-mjestu ili izvršiti neku radnju, onda su vam jednostavno potrebni savjeti. I vaši posjetioci će vam biti veoma zahvalni.