Habr, salut!

Există o mulțime de soluții bune de la diferiți specialiști care apar pe Codepen și cred că cele mai bune dintre ele ar trebui adunate într-un singur loc. Prin urmare, acum 2 ani am început să salvez scripturi interesante pe diverse subiecte pe computer.

Obișnuiam să le postez în grupul de produse mr cloud IDE. Gefest, acestea au fost ansambluri de 5-8 soluții. Dar acum am început să acumulez 15-30 de scripturi pe diferite subiecte (butoane, meniuri, sfaturi cu instrumente și așa mai departe).

Astfel de seturi mari ar trebui prezentate mai multor specialiști. De aceea le postez pe Habr. Sper că îți vor fi de folos.

În această recenzie ne vom uita la meniurile cu mai multe niveluri.

Navigare orizontală plată

Bară de navigare frumoasă, cu submeniuri care apar fără probleme. Codul este bine structurat, se folosește js. Judecând după caracteristicile utilizate, funcționează în ie8+.
http://codepen.io/andytran/pen/kmAEy

Antet Nav material cu meniuri derulante aliniate

Bară de legătură adaptivă cu submeniu cu două coloane. Totul se face în css și html. S-au folosit selectoare css3 care nu sunt acceptate în ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Meniu derulant Smooth Accordion

Meniu vertical elegant, cu elemente care se deschid fără probleme. Se folosește codul js de tranziție, transformare.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Bară de navigare verticală întunecată cu pictograme din ionicoane. Este folosit JavaScript. În ie8, cel mai probabil va funcționa fără animație.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Meniu dropdown cu animație

Meniu elegant cu două formate de ieșire: orizontal și vertical. Sunt folosite pictogramele și animația CSS3. Cu siguranță va arăta groaznic în ie8, dar în alte browsere totul este cool.
Link vertical: http://codepen.io/rizky_k_r/full/sqcAn/
Link către orizontală: http://codepen.io/rizky_k_r/pen/xFjqs

Meniu derulant CSS3

Meniu orizontal cu elemente mari și o listă derulantă de link-uri. Cod curat și minimalist fără js.
http://codepen.io/ojbravo/pen/tIacg

Meniu derulant CSS pur simplu

Meniu orizontal simplu, dar elegant. Folosește font-awesome. Totul funcționează pe css și html, fără js. Va funcționa în ie8.
http://codepen.io/Responsive/pen/raNrEW

Meniu derulant mega Bootstrap 3

O soluție excelentă pentru magazinele online. Afișează mai multe niveluri de categorii și imagini mari (de exemplu, un produs în vânzare). Se bazează pe boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Navigare plată

Bară de navigare elegantă cu submeniu neted. În browserele mai vechi, va afișa probleme.
http://codepen.io/andytran/pen/YPvQQN

Navigare imbricată 3D

Meniu orizontal cu animație foarte cool fără js!
http://codepen.io/devilishalchemist/pen/wBGVor

Mega meniu receptiv - Navigare

Meniu receptiv orizontal. Arată bine, dar versiunea mobilă este puțin șchiopătată. Se folosesc CSS, html și js.
http://codepen.io/samiralley/pen/xvFdc

Meniu Css3 pur

Meniu original. Cu cod simplu și curat, fără js. Utilizați pentru efecte „wow”.
http://codepen.io/Sonick/pen/xJagi

Meniu derulant complet CSS3

Meniu derulant colorat cu un singur nivel de imbricare. Sunt folosite icoane de la font-awesome, html și css.
http://codepen.io/daniesy/pen/pfxFi

Meniu derulant numai Css3

Un meniu orizontal destul de bun cu trei niveluri de imbricare. Funcționează fără js.
http://codepen.io/riogrande/pen/ahBrb

Meniuri derulante

Un meniu minimalist cu un efect original al aspectului unei liste imbricate de elemente. Mă bucur că această soluție este și fără javascript.
http://codepen.io/kkrueger/pen/qfoLa

Meniu drop-down CSS pur

O soluție primitivă, dar eficientă. Doar css și html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Concept de interacțiune cu meniu

Concept de meniu interesant pentru un telefon mobil. Nu am mai văzut așa ceva până acum. Utilizează html, css și javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Creați un meniu derulant simplu

Cod curat și simplu, fără js. Cu siguranță va funcționa în ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Meniu derulant CSS pur

Soluția nu este rea, dar folosește prea multe clase. Mă bucur că nu există js.
http://codepen.io/jonathlee/pen/mJMzgR

Meniu derulant

Meniu vertical frumos cu cod javascript minim. JQuery nu este folosit!
http://codepen.io/MeredithU/pen/GAinq

Meniu derulant CSS 3

Un meniu orizontal cu legende suplimentare vă poate decora bine site-ul. Codul este simplu și clar. Javascript nu este folosit.
http://codepen.io/ibeeback/pen/qdEZjR

Soluție frumoasă cu mult cod (html, css și js). Au fost create 3 formate de submeniu. Soluția este potrivită pentru magazinele online.
http://codepen.io/martinridgway/pen/KVdKQJ

Meniuri derulante CSS3 (soluție specială)!

Meniu orizontal întunecat cu treisprezece (13) opțiuni de animație! Cu siguranta te sfatuiesc sa-l citesti, iti va fi de folos in viata de zi cu zi.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Sper că v-a plăcut colecția de 23 de soluții. Dacă doriți să continuați să le citiți, atunci răspundeți la sondajul de mai jos.
Bucurați-vă de munca voastră tuturor.

Salutare dragi vizitatori ai blogului meu! Astăzi vom vorbi despre meniul principal orizontal al site-ului, și anume cum să aliniați meniul orizontal în centru. Da, la prima vedere, ce este atât de complicat - am setat indentările necesare, le-am ajustat și gata. Dar există câteva nuanțe aici. Un site, în primul rând, este dinamic, adică. Conținut nou apare constant pe site, apar noi blocuri de informații etc. Așa pot apărea/dispără unele elemente în meniul principal. Ținând cont de toate acestea, trebuie să ne asigurăm că atunci când adăugăm sau eliminăm un element de meniu, meniul rămâne în centru. Desigur, nu este întotdeauna necesar să-l centrați, totul depinde de design. Dar dacă totuși intenționați să plasați meniul orizontal în centru, atunci folosind câteva trucuri simple în CSS putem obține rezultatul dorit.

Structura articolului

Meniu orizontal în centru fără elemente derulante

Mai întâi, să ne uităm la exemplul unui meniu orizontal care nu are elemente derulante.

cod HTML

Cod Css

Să privim totul în ordine, totul este simplu aici. Creăm un container „mainmeniu” în care plasăm meniul nostru sub forma unei liste neordonate.

Acum se reduce la stilurile CSS. Mai întâi resetăm toate marjele și umplutura la zero pentru toate browserele. Apoi, folosind proprietatea „float:left”, ne deplasăm lista neordonată la stânga și apoi, folosind poziționarea relativă, o deplasăm cu 50% la dreapta. Lățimea listei „ul” va fi egală cu suma lungimilor tuturor elementelor „li” care se află în interiorul acesteia. Astfel, dacă împărțim mental fereastra browserului în jumătate, meniul nostru se va muta în dreapta liniei de separare. Pentru aliniere, vom aplica și poziționarea relativă elementelor „li” și le vom muta la stânga cu 50%, specificând proprietatea „left:-50%”. Și, de asemenea, aproape am uitat, containerul nostru „mainmeniu” trebuie să specifice proprietatea "overflow:ascuns", altfel vom obține o bară de derulare orizontală.

Asta e, acum meniul nostru este aliniat la centru. Acum puteți adăuga sau scădea puncte, acest lucru nu va afecta poziționarea. De asemenea, puteți utiliza acest meniu pe site-urile dvs. web prin simpla schimbare a stilurilor pentru a se potrivi designului dvs.

Meniu orizontal în centru cu elemente derulante

Acum să ne uităm la sub-articolele derulante. Aici situația este oarecum diferită și oarecum mai complicată, pentru că în primul caz, sub-articolele noastre nu vor apărea, deoarece am specificat proprietatea „overflow: hidden” în blocul „mainmenu”. Aceasta înseamnă că elementele din afara acestui bloc nu vor fi afișate. Dar există o cale de ieșire.

Deci, am modificat codul anterior și am eliminat proprietatea „overflow:hidden” din el.

cod HTML

Cod CSS

Acum meniul nostru este plasat în centru și sub-articole apar când treceți cu mouse-ul peste el.

Centrarea meniurilor cu flexbox

Aliniați meniul la centru De asemenea, puteți aplica o nouă regulă în css - flexbox. În general, vreau să dedic o postare separată trucurilor cu flexbox, merită, simplifică foarte mult viața unui designer de layout. În general, nu vom merge mai adânc aici... Voi furniza doar codul css pentru meniul cu elemente derulante aici. Codul HTML este același ca mai sus.

Cod CSS

După cum puteți vedea, regulile s-au schimbat doar pentru lista de părinți - #mainmenu ul. Singurul lucru a fost că a trebuit să adăugăm prefixe pentru versiunile anterioare ale browserelor. Observ că numai browserele moderne înțeleg corect regula flexbox. Dacă vizați browsere mai vechi, atunci opțiunea flexibilă va trebui amânată. Puteți vedea ce browsere înțeleg bine flexbox

De la autor: Bună ziua tuturor. Din anumite motive, webmasterii asociază meniurile drop-down cu scripturi, dar pentru o lungă perioadă de timp o astfel de navigare se poate face absolut ușor folosind CSS pur. Mai mult, un astfel de meniu nu va fi mai rău. Astăzi vă voi arăta cum să creați un meniu drop-down în css. Voi împărtăși, ca să zic așa, rețeta.

Planul lecției și aspectul meniului nostru

În general, să decidem mai întâi cum vom crea meniul în sine. În html5, modul standard este să îl creați în containerul de navigare folosind o listă cu marcatori. Hai să facem tocmai asta. Vom elimina markerii mai târziu folosind css; nu avem nevoie de ele în meniu.

De fapt, voi scrie imediat markup cu liste imbricate în html. Adică, lista noastră va fi pe două niveluri - va conține alte liste. Și anume, pentru fiecare articol există 1 listă, care va forma un meniu derulant.

Există un punct important aici, și anume că s-ar putea să nu fie nevoie să creați fiecare element derulant, ci doar câteva. Nicio problemă, atunci în articolele fără meniuri derulante pur și simplu nu creăm liste imbricate.

De fapt, aici este, toate markupurile:

Înțeleg că este uriaș. Aceasta este problema cu listele imbricate, că trebuie să scrieți mult cod. Dar țineți cont de faptul că facem 4 puncte principale și pentru fiecare va exista un meniu derulant.

De fapt, am dat întregii navigații un identificator de nav, iar toate listele imbricate o clasă de stil de secundă pentru a înțelege că sunt imbricate.

Grozav, avem marcajul gata, vă puteți uita la rezultat:

Da, arată groaznic. Dar acum vom activa css și în câteva minute navigarea noastră se va transforma. Hai sa muncim.

Scrierea stilurilor CSS

Primul lucru pe care îl voi face este să resetați toate umpluturile la implicite pentru toate elementele. Ne vor sta doar în cale; este mai bine să stabilim noi înșine liniuțele mai târziu, acolo unde este nevoie.

*( marja: 0; umplutură: 0; )

#nav( înălțime: 70px; ) #nav ul( list-style: none; )

Acum trebuie să decidem care va fi meniul nostru. Orizontal sau vertical? Vă sugerez să o faceți mai întâi pe cea orizontală și să vedeți totul în exemplul său. Pentru a face acest lucru, trebuie să scrieți următoarele stiluri:

#nav > ul > li( float: stânga; lățime: 180px; poziție: relativ; )

Rețineți că folosind semnul > ne referim la elementele din listă care sunt imbricate direct în ul, care sunt imbricate direct în nav. Acest lucru este foarte important deoarece împiedică aplicarea stilului la elementele din listă imbricate. Cert este că, după ideea mea, articolele din lista principală vor fi amplasate orizontal, iar în cele imbricate – vertical.

Dar tu, desigur, o poți face altfel, în conformitate cu ideea ta. Vă puteți asigura că toate punctele sunt pe o singură linie.

Oricum, codul de mai sus sper sa intelegi. Forțează ca elementele principale ale listei să fie împinse spre stânga, astfel încât să apară toate pe aceeași linie, chiar dacă sunt elemente de bloc. Le-am dat, de asemenea, o lățime explicită și o poziționare relativă.

De ce pozitionare? Este necesar pentru a poziționa apoi absolut listele imbricate. Dacă ați studiat poziționarea în CSS, atunci probabil știți că dacă dați o poziționare relativă a unui bloc, atunci toate elementele din acesta pot fi poziționate absolut în interiorul acestui bloc particular, și nu întreaga fereastră a browserului.

Între timp, iată ce avem până acum:

Din această captură de ecran vă puteți imagina deja rezultatul aproximativ. Desigur, încă trebuie să proiectăm frumos articolele, astfel încât ochii să nu cerească milă atunci când vizualizează navigația.

#nav li a( afișaj: bloc; fundal: #90DA93; chenar: 1px solid #060A13; culoare: #060A13; umplutură: 8px; text-align: center; text-decoration: niciunul; ) #nav li a:hover( fundal: #2F718E)

În primul rând, linkurile în sine trebuie să fie blocate. Acest lucru este necesar pentru ca umplutura să funcționeze și pentru ca toate proprietățile să fie aplicate corect. Apoi, specific culorile fundalului, textului, parametrilor cadrului, umplutura internă și alinierea centrată a textului. În cele din urmă, anulez sublinierea linkurilor.

Toți acești parametri nu trebuie să fie specificați așa cum am făcut-o eu. Puteți alege culorile în mod arbitrar, faceți un cadru diferit sau nu îl folosiți deloc, indentările pot fi reduse sau mărite.

Vă rugăm să rețineți că în acest caz nu am folosit semnul >, așa că regulile de mai sus se vor aplica tuturor legăturilor, inclusiv celor din paragrafele imbricate. Deci acum avem următoarele:

Grozav, dar înțelegi că sub-articolele nu ar trebui să fie vizibile, ar trebui să se deschidă când treci cu mouse-ul peste elementul dorit. Fără aceasta, meniul nostru arată ca o masă. Ei bine, este timpul să ascundeți elementele imbricate.

#nav li .second (afișare: niciunul; poziție: absolut; sus: 100%; )

În primul rând, ascundem liste complet imbricate. În al doilea rând, le oferim poziționare absolută și coordonată de vârf: 100%. Aceasta înseamnă că meniul drop-down va apărea clar sub elementul principal căruia îi aparține, clar la 100% din înălțimea articolului respectiv.

Acum vedem doar meniul principal pe pagina web, care este ceea ce avem nevoie.

Să implementăm abandonul

Tot ce ne rămâne de făcut este cel mai important lucru - să realizăm căderea în sine. Nu este nimic complicat, uită-te la acest cod:

#nav li:hover .second( display: block; )

Acest cod va funcționa impecabil. Când treceți cu mouse-ul peste un element din meniul principal, sublista va deveni vizibilă. Mai mult decât atât, doar lista care este imbricată în elementul peste care trece cursorul.

Există o singură problemă minoră - lățimea elementelor imbricate nu se potrivește cu lățimea celor principale. Dar acest lucru poate fi rezolvat foarte ușor prin adăugarea stilurilor adecvate:

#nav li li( lățime: 180px; )

Asta e, problema rezolvata:

Totul funcționează perfect. Când treceți cu mouse-ul peste elementul principal, apare un meniu derulant corespunzător acestuia. Dacă mutați cursorul în lateral, acesta dispare. Dacă mutați cursorul pe elementele imbricate în sine, puteți face clic pe ele și puteți accesa secțiunea dorită a site-ului. Astfel, am creat pentru tine un meniu derulant foarte simplu și ușor, fără absolut niciun script.

Conversia meniului în vertical

Ei bine, bine, ne-am dat seama complet de navigare orizontală, dar pe lângă aceasta, navigarea verticală se găsește foarte des pe site-uri web și poate fi și una derulantă. De fapt, schimbarea meniului de la orizontal la vertical este foarte ușoară, trebuie doar să schimbăm câteva rânduri de cod.

Mai întâi, va trebui să eliminați float:left din elementele principale ale listei. Această proprietate este cea care asigură că articolele noastre sunt afișate într-o singură linie, dar de ce avem nevoie de aceasta dacă navigarea trebuie să fie verticală?

Acum nu mai rămâne decât să schimbați regulile pentru selectorul #nav li .second, adică pentru listele imbricate, și anume, acestea trebuie poziționate puțin diferit. Ca aceasta:

#nav li .second (afișare: niciunul; poziție: absolut; stânga: 100%; sus: 0; )

Adică, este necesar să se înregistreze două coordonate în loc de una. În primul rând, în cazul navigării orizontale, am spus că, așa cum era planificat, articolele din submeniu ar trebui să fie afișate sub elementele principale. În cazul unui meniu vertical, acesta nu este potrivit - elementele ar trebui să fie afișate în lateral.

Prin urmare, schimbăm de sus: 100% la stânga: 100%. În plus, avem nevoie și de coordonatele de sus. Îl setăm la 0, astfel încât submeniul să fie la același nivel cu elementul căruia îi corespunde.

Gata, acum totul funcționează așa cum trebuie. Îl poți testa. După cum puteți vedea, nu am mințit când am spus că va trebui doar să rescriu câteva rânduri de cod.

Meniu orizontal cu mai multe niveluri

Folosind aproape aceeași abordare, puteți crea mai multe niveluri de meniu dacă este necesar. De exemplu, haideți să creăm o listă pentru al patrulea element din meniul principal, care va fi imbricat într-unul dintre subarticole.

Sarcina de a centra un meniu orizontal poate fi dificilă, mai ales pentru cei care nu folosesc CSS. Căutarea de soluții duce la o listă foarte limitată de metode, dintre care cele mai multe se bazează pe trucuri CSS, JavaScript sau utilizarea unor reguli non-standard care nu sunt acceptate de toate browserele. În acest tutorial, vom parcurge o metodă de centrare a unui meniu orizontal care utilizează numai reguli standard CSS și funcționează în toate browserele.

Exemplu de meniu centrat

Mai jos este un meniu orizontal centrat în această coloană, în care este activată a doua filă. Puteți încerca să redimensionați fereastra sau pagina browserului pentru a vă asigura că meniul rămâne întotdeauna centrat și funcțional.

Pe pagina demo puteți vedea mai multe opțiuni de design pentru un meniu centrat orizontal. Oricare dintre ele poate fi folosit în proiectele dvs.

Marcaj HTML

Toate meniurile prezentate în acest tutorial folosesc o structură simplă. Aceasta este o listă neordonată obișnuită de link-uri plasate într-un element div.

Meniu centrat Cod CSS

Mai jos este codul CSS complet folosit pentru a centra meniul. O explicație a principiului de funcționare este dată mai târziu în lecție.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; poziție:relativ:centru:0 ) 3px 10px; fundal:#ddd; a.active, #centeredmenu ul li a.active:hover (color:# fff; background:#000;

Cum funcționează metoda de centrare?

Acțiunea metodei se bazează pe poziționarea relativă a elementelor bloc plutitoare unul în celălalt. În primul rând, să vedem cum se modifică dimensiunea elementelor odată cu deplasarea.

Element div(blocul) fără deplasare este întins pe toată lățimea disponibilă.

Dar dacă mutăm div-ul spre stânga, acesta se va micșora automat pentru a se potrivi cu conținutul său. Comprimarea este cheia pentru implementarea acestei metode de centrare a meniului. Vă ajută să mutați meniul în poziția corectă.

Meniu standard aliniat la stânga

Să luăm un meniu standard aliniat la stânga și să-l refacem pas cu pas. Pentru claritate, articolele sunt colorate în culori diferite, astfel încât este imediat clar ce merge unde.

Vă rugăm să rețineți următoarele puncte:

• Element meniu centrat div(dreptunghi albastru) este decalat spre stânga, dar are o lățime de 100%, deci rămâne întins pe întreaga pagină.
• Element ul(dreptunghi roz) este în interiorul elementului meniu centrat divși se deplasează spre stânga. Aceasta înseamnă că va fi comprimat la lățimea conținutului său, adică la lățimea totală a tuturor marcajelor.
• Toate elementele li (dreptunghiuri verzi) sunt în interiorul elementului ulși deplasați-vă la stânga. Astfel, ele sunt comprimate la dimensiunea legăturilor din ele și aliniate într-o linie orizontală.
• În interiorul fiecărei legături (dreptunghiuri portocalii) este afișat textul marcajului: Marcaj 1, Marcaj 2 și așa mai departe.

Schimbarea poziției unei liste neordonate

Apoi compensăm elementul ul la dreapta cu 50% folosind pozitia:ruda; . Când un element este compensat procentual în aceste condiții, este important să ne amintim că lățimea totală a elementelor pe care le conține nu este lățimea sa. În cazul nostru, decalajul are loc la jumătatea ferestrei browserului (sau spațiul disponibil pentru afișare). Prin urmare, meniul nostru începe în mijlocul ferestrei și se extinde parțial dincolo de limitele acesteia. Și să trecem la pasul următor.

Schimbați poziția tuturor elementelor de meniu

Tot ce rămâne este să muți toate elementele li lăsat cu 50%. Aceasta reprezintă 50% din lățimea elementului nostru ul (containerul care conține meniul). Astfel, marcajele sunt mutate exact în centrul ferestrei.

Câteva note importante

Când utilizați această metodă de centrare, există câteva puncte importante de reținut:

• Din moment ce elementul ul se extinde parțial dincolo de fereastră, acest lucru are ca rezultat afișarea barelor de defilare. Prin urmare, trebuie să utilizați regula overflow:hidden; pentru element meniu centrat div. Astfel, partea proeminentă a elementului div va fi tăiat.
• Din moment ce elementul ul nu este aliniat la marcaje, nu puteți utiliza niciun stil vizual pentru acesta. Lăsați elementul ul fără culoare de fundal și fără chenar, astfel încât să devină complet invizibil. Și stilurile pentru marcaje ar trebui folosite numai pentru elemente li.
• Dacă trebuie să setați stiluri speciale pentru primul și ultimul marcaj, trebuie să adăugați o clasă pentru primul și ultimul element li, astfel încât să le puteți modela individual.

Concluzie

Soluția propusă este compatibilă cu toate browserele, nu utilizează JavaScript și acceptă text redimensionabil.

Sarcină

Creați un meniu orizontal, ale cărui elemente au o pantă arbitrară (Fig. 1).

Orez. 1. Vizualizare meniu cu elemente înclinate

Soluţie

Transformarea proprietății de stil este responsabilă pentru transformarea elementului ca valoare se folosește funcția skewX, care stabilește panta dorită. Este mai ușor să setați unghiul de înclinare în grade, de exemplu, 30 de grade este 30 de grade față de verticală. Transformarea afectează și toate elementele copil, astfel încât textul din interiorul elementului va fi și înclinat, ceea ce nu are cel mai bun efect asupra lizibilității și frumuseții sale. Prin urmare, este important să aplicați din nou înclinarea textului, dar în cealaltă direcție, pentru a face acest lucru, pur și simplu schimbați semnul din fața valorii gradelor;

Browserele acceptă proprietatea de transformare în principal cu propriile prefixe, așa că pentru universalitate în stiluri ar trebui să o repetați de mai multe ori cu aceeași valoare, adăugând -moz- pentru Firefox, -webkit- pentru Safari și Chrome, -o- pentru Opera și -ms - pentru browserul Internet Explorer, așa cum se arată în exemplul 1.

Exemplul 1: Înclinarea elementului de meniu

HTML5 CSS3 IE Cr Op Sa Fx

• Joker
• Pazuzu
• Palpatine
• Doctor Doom

În acest exemplu, un meniu orizontal este creat folosind o listă cu marcatori. Pentru a vă asigura că lista este orizontală, la elementul li din stiluri este adăugată o proprietate de afișare cu valoarea inline-block. Pentru skew, utilizați proprietatea transform cu funcția skewX și valoarea -30º. Această proprietate se aplică și link-urilor din interiorul listei, dar cu o valoare pozitivă de 30º, aceasta asigură că literele sunt afișate corect și nu înclinate.

Browserele Chrome, Safari și Firefox folosesc proprietatea de transformare pentru elementele blocate sau inline, astfel încât linkurile au proprietatea de afișare setată la blocare .