Meniul de navigare pe css3, totul despre crearea site-urilor

Mai recent, Apple.com a actualizat meniul de navigare pe site-ul său Web din partea de sus a paginii. Acest meniu a devenit mai întunecat decât predecesorul său, în aspectul său gri, dar arăta mult mai bine.







Un lucru care mi-a atras imediat ochiul este că meniul a fost făcut pe imagini. Vom încerca să recreăm acest meniu, dar cu ajutorul tehnicii CSS3.

Și astfel, vă prezentăm meniul de navigare, ca pe site-ul Apple.com, executat complet folosind CSS3.

Vă reamintim, deoarece meniul este plictisitor pe CSS3. atunci browserul cu care îl veți vedea ar trebui să fie compatibil cu webkit. Prin urmare, în Opera și IE, meniul nu poate arăta la fel de frumos ca în imagine, dar va rămâne funcțional.

Înainte de a începe programarea CSS, vă vom arăta mai întâi mai multe metode care vor fi folosite pentru a crea efectul dorit:







  • font - același font este folosit ca și pe Apple.com Lucida.
  • text-umbra - umbra netezit pe text, este folosit în numele de butoane.
  • border radius - O margine rotunjită este utilizată în primul și ultimul element de meniu, precum și în caseta de căutare.
  • box-shadow - folosit în mai multe locuri pentru a crea un efect subtil de umbră.
  • box-shadow: inset - necesar pentru a crea un efect de umbra intern.
  • gradient - gradiente sunt utilizate pe majoritatea elementelor de meniu, astfel încât generatorul de gradienți CSS3 este foarte util în crearea acestora.
  • : primul copil - acest pseudo-element este utilizat pentru a selecta primul element din meniu.
  • : nu (: ultimul-copil) - selector: nu (: ultimul-copil) exclude ultimul copil al evenimentului hover.
  • background-image: url (), gradient () - fundalul multifuncțional este utilizat în bara de căutare pentru a afișa gradientul de fond și lupa.
  • cadrele cheie - animația grațioasă a dispariției meniului se face cu ajutorul cadrelor cheie.
  • Suportul Fallback - inversat este foarte important pentru browserele care nu suportă gradienti, așa că punem piedici sub forma setării proprietății de culoare-fundal.

Acum să vedem cum arată CSS!







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: