Curățați meniul de stil cu CSS3
Și astfel, înarmați cu răbdare și pătuțurile (care au nevoie de ea), începe de la „umplutura“ cod mort, pentru a crea un meniu de navigare plin de viață și dinamic. Să începem, ca întotdeauna cu construirea în Html, cea mai simplă listă a meniurilor noastre.
Marcaj HTML
După cum puteți vedea, marcajul pare a fi la fel de disperat pur și simplu, realizat sub forma unei liste elementare neordonate. Pentru a respira viața și a da atractivitate acestei liste, vom recurge la folosirea "magiei" CSS 3, sau mai exact, vom lucra cu parametrii tabelelor de stiluri de cascadă. Prin atribuirea listei în lista id = "main-navigation". și primul element de clasă = "primul", și deja în css, în vom puzzle despre forma, culoarea și funcționalitatea meniului viitor.
CSS3 layout
În proiectarea meniului folosind colturi rotunjite border-radius și un gradient liniar al funcției de drum nu cu mult timp în urmă, și Opera mea preferată, începând cu versiunea a 11-a făcut în cele din urmă includ suport pentru gradientului. Ei bine, IEshka, de asemenea, suflă în sus și nu rămâne în spatele fraților, chiar dacă nu fără ajutorul unui filtru special.
După ce ați făcut toate cele de mai sus, obțineți un rezultat excelent asupra eșapamentului și acesta va arăta astfel:
Totul sa dovedit foarte bine. În primul exemplu, când plasăm cursorul peste un element de meniu, am utilizat sublinierea standard. Să complicăm puțin stilul, să eliminăm linkurile de subliniere și să adăugăm un efect mai frumos. Sincer nu vom fi înțelepți, ci pur și simplu schimbați direcția înclinării în momentul în care îndreptați indicatorul către elementul de meniu:
În final, obținem un gen complet de elemente de navigare active:
Cu siguranță ați observat că primul punct de pe meniul nostru, atunci când treceți peste el, nu este într-adevăr valabil, colțurile laterale stânga apar drepte, care nu este bun pentru imaginea de simetrie căptuși. Corectați situația nu va fi mai dificilă, pentru că merită să adăugați câteva modificări pentru clasă. create în avans în mod specific pentru primul paragraf.
Nu am făcut nimic supranatural, tocmai am adăugat funcția de rază a marginii în colțurile de sus și de jos din stânga. Dacă faceți totul corect (altfel nu poate fi), trebuie să obțineți un meniu de navigare minunat, ușor și cel mai important pe deplin funcțional:
Asta e tot, dragi prieteni, îndrăznesc să sper că în liniște rezultatul va fi satisfăcut. Și dacă dintr-o dată cineva vrea să modifice meniul, este foarte rapid, experimentând parametrii stilurilor, puteți obține orice rezultate, cele mai uimitoare și mai de neimaginat. Nu m-am săturat să repet că viitorul noilor standarde și tehnici de performanță în dezvoltarea web-ului, voi încerca să continuu să vă familiarizez cu uimitoarele descoperiri și soluții de design web. Data viitoare când vă voi spune cum fără gesturi inutile și necesare, puteți adăuga rapid o bară de căutare în meniul de navigare din WordPress.
Materialul a fost pregătit, tradus și adus în minte, bazat pe evoluții, probabil o burgheză respectabilă: Bavota San
Aș fi recunoscător dacă susțineți proiectul - adăugând un blog la excepțiile AdBlock și partajați un link către intrarea în rețelele dvs. sociale:
Articole similare
Trimiteți-le prietenilor: