A navigációs menü css3, minden a weboldalak létrehozása
Újabban Apple.com frissítése a webhely navigációs menü tetején található az oldalon. Ez a menü sötétebb lesz, mint elődje, az ő szürke álruhában, de már egy sokkal jobb.
Egy dolog, hogy azonnal megakadt a szemem, hogy a menü már lefektetett a képeket. Megpróbáljuk újra ezt a menüt, de CSS3 technikákat.
És mi is jelen van egy navigációs menü, mint Apple.com weboldal, teljesen készült CSS3.
Emlékeztetünk, ahogyan azt a menüben CSS3. és a böngésző, amelyen keresztül megtekinthetjük összeegyeztethetőnek kell lennie WebKit. Ezért az Opera és az IE menü nem úgy néz ki, szép, mint a képen, de akkor is működőképes marad.
Mielőtt tovább a CSS programozás, először mutatnak néhány technikát, amelyeket használni fognak, hogy hozzon létre a kívánt hatást:
- font - használják ugyanazt a betűtípust a Apple.com Lucida.
- text-shadow - simított árnyék a szöveg, amit a nevét a gombok.
- border-radius - lekerekített szegély használjuk az első és az utolsó menüpont, valamint a keresőmezőbe.
- box-shadow - kifejezés több helyen, hogy hozzon létre egy finom árnyék hatás.
- box-shadow: süllyesztés - létre kell hozni egy belső árnyék hatás.
- gradiens - színátmenetek használni a legtöbb menüpontok, így segít létrehozni egy nagyon CSS3 gradiens generátort.
- : Első gyermek - ez a pszeudo-elem segítségével visszatérhet az első tétel a menüben.
- : Nem (: last-gyerek) - választó: nem (: last-gyermek) kizárja az utolsó leszármazottja a légpárnás esemény.
- background-image: url () (gradiens) - multi-hátterű használt keresési kifejezést, megjelenítésére háttér színátmenet és nagyító.
- Kulcsképek - tette kecses animációs menü eltűnése segítségével kulcskockákat.
- Tartalék - kölcsönös támogatás nagyon fontos a böngészők, amelyek nem támogatják a színátmenetek, így tesszük a dugó formájában kibocsátó ingatlan háttér színét.
Most lássuk, hogyan néz ki a CSS kódot!