A Rocking CSS3 keresőmező létrehozása
A CSS3 a következő generációs stíluslap nyelve. Sok új és izgalmas funkciót mutat be, mint például az árnyékok, az animációk, az átmenetek, a határ-sugár stb. Bár a specifikációk még nem fejeződtek be, sok böngészőgyártó már számos új funkciót támogatott.
Ebben a bemutatóban megvizsgáljuk néhány ilyen funkciót, mint például text-shadow, border-radius, box-árnyék és átmenetek egy ringató keresési mező létrehozásához.
Ennek a keresési mezőnek a Photoshop verzióját az Alvin Thong készítette, és letölthető innen. Próbáltam újra létrehozni ezt a keresési mezőt tiszta CSS3 használatával. Ezt meg kell jegyezni nem minden böngésző támogatja a CSS3 funkciókat és a kísérlet kipróbálásához a modern CSS 3 funkciókat támogató böngészők egyikét kell használnia.
Kész? Kezdjük el!
1. HTML5 Doctype
Kezdjük a HTML jelöléssel. Ez nagyon egyszerű, miután a HTML5 doctype és a nyilatkozat, van egy egy azonosítóval #csomagolás belül . Ez egyszerűen a tartalom mező szélességének meghatározásához és az oldal közepéhez igazításához szükséges.
Ezt követi a A kód így néz ki: Az űrlap körüli nagy doboz létrehozásához stílusokat adunk hozzá A fontos kód itt a Magyarázat: Itt a beillesztett kulcsszó megadja, hogy az árnyék a doboz belsejében lesz. Az első két nulla az x-offsetet és az y-offsetet, a 3px pedig az elmosódást jelzi. Ezután a színes nyilatkozat. Itt rgba értékeket használtam; Az rgba a piros zöld kék és az alfa (opacitás). Így a zárójelben lévő 4 érték a piros, zöld, kék és az alfa (opacitás) mennyiségét jelzi. Észreveheted, hogy 5 árnyék-nyilatkozatkészlet van együtt. Ezt úgy lehet elvégezni, hogy vesszővel elválasztjuk őket. Az első két árnyék határozza meg a fehér "belső ragyogás" hatást, és a következő nyilatkozatok a doboznak a szilárd / vaskos megjelenést adják. Játssz ezen értékekkel, hogy megértsd, hogyan működik. Most, hogy a doboz befejeződött, továbbléphet a beviteli mező kialakításához. A beviteli mezőben bejelentett stílusok meglehetősen hasonlítanak a nagy dobozhoz képest Magyarázat: Észreveszed, hogy ezúttal az árnyék elmosódását 0-ban tartottuk, hogy éles árnyékot kapjunk, és 5px függőleges eltolást használjunk. Az egymást követő deklarációkban az elmosódást 0px értéken tartották, de a szín és az y-offset megváltozott. Ismét játsszon ezen értékekkel, hogy különböző eredményeket érjen el. Stílusozzuk a keresési gombot. A színeken kívül a keresőgomb többnyire ugyanolyan stílusokkal rendelkezik, mint a külső doboz. Hasonló gombnyomást és doboz árnyékokat használtak a gombon. A bevezetett új funkció a Magyarázat: Ban,-ben A gomb aktív állapotának van egy kicsit több változása. Ebben az esetben az abszolút és a „top” érték 5px-es pozícióját adtam. Ez azért történt, hogy természetesebb megjelenést kapjunk úgy, hogy úgy érzi, hogy a gombot 5 pixelrel lenyomták. Az aktív állapot egyéb változásai a háttérszín és az árnyékok. Figyeljük meg, hogy csökkentem az árnyékok y-eltolását, hogy ez egy „lenyomott” megjelenés legyen. Itt van a beküldési gomb aktív állapotának kódja: Ezzel kitölti keresési mezőünket. Az új CSS3 funkciók közül sokat használtunk. Itt van a keresési mező teljes CSS és HTML kódja. Remélem, élvezted ezt a bemutatót. Nyugodtan kísérelje meg ezeket a funkciókat, és ne felejtse el megosztani a gondolatait. A szerkesztő megjegyzése: Ezt a bejegyzést írta Bharani M Hongkiat.com részére. Bharani tervező / fejlesztő New Delhi, India.#fő. Ez az azonosító olyan stílusokat tartalmaz, amelyek meghatározzák a nagy fehér mezőt a beviteli mező és a kereső gomb körül. Ez benne. Az űrlap a szövegbeviteli mező és az search gomb. Íme, hogyan néz ki az űrlap anélkül, hogy bármilyen stílust alkalmazna rá: 
CSS3 keresési mező
2. A határoló doboz létrehozása
#fő. Az alább látható kódból megtudhatja, hogy a doboz 400px szélességű és 50px magasságú. #main szélesség: 400px; magasság: 50px; háttér: # f2f2f2; párnázás: 6px 10px; határ: 1px szilárd # b5b5b5; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; -moz-box-shadow: beillesztés 0 0 3px rgba (255, 255, 255, 0,8), 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,8), beillesztés 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,8), beillesztés 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-radius nyilatkozat és a box-shadow nyilatkozat. A lekerekített sarkok létrehozásához használjuk a CSS3 határ-sugár deklarációt, a "-moz-" és "-webkit-" böngésző előtagokat annak biztosítására, hogy ez a gecko és webkit alapú böngészőkben működik. A doboz árnyék-nyilatkozatai kissé zavarónak tűnhetnek, de valójában nagyon egyszerű. box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,8), beillesztés 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Előnézet
3. A beviteli mező formázása
bemenet [type = "text"] float: balra; szélesség: 230px; párnázás: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; határ: 1px szilárd # 999999; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; -moz-box-shadow: betét 0 5px 0 #ccc, beillesztés 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede; -webkit-box-shadow: beillesztés 0 5px 0 #ccc, beillesztés 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede; box-shadow: betét 0 5px 0 #ccc, betét 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede;
#fő. Ugyanezt a határ sugarat használtuk (5px). Ismét több doboz-árnyék is lett. box-shadow: betét 0 5px 0 #ccc, betét 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede;
Előnézet
4. A beküldési gomb megadása
bemenet [type = "Submit"]. szilárd float: left; kurzor: mutató; szélesség: 130px; párnázás: 8px 6px; margin-left: 20px; háttérszín: # f8b838; szín: rgba (134, 79, 11, 0,8); szöveg-átalakítás: nagybetűs; font-súly: félkövér; határ: 1px szilárd # 99631d; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; szöveg-árnyék: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-átmenet: háttér 0.2s egyszerűsítés;
text-shadow. szöveg-árnyék: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
text-shadow Az első három számérték az x-offset, az y-offset és a blur. Az rgba értékek jelzik az árnyék színét. A következő deklarációs sorban (vesszővel elválasztva) az y-eltolás értéke -1. Ez azért történik, hogy a szöveg egy “Belső árnyék” hatás. A küldési gomb lebegő / fókuszállapotának különböző értékei vannak a háttérszínnek és az árnyékoknak. Előnézet
"Aktív" állapot gomb
bemenet [type = "Submit"]. szilárd: aktív háttér: # f6a000; pozíció: relatív; top: 5px; határ: 1px szilárd # 702d00; -moz-box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
A teljes (CSS) kód
#main szélesség: 400px; magasság: 50px; háttér: # f2f2f2; párnázás: 6px 10px; határ: 1px szilárd # b5b5b5; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; -moz-box-shadow: beillesztés 0 0 3px rgba (255, 255, 255, 0,8), 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,8), beillesztés 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,8), beillesztés 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; bemenet [type = "text"] float: balra; szélesség: 230px; párnázás: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; határ: 1px szilárd # 999999; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; -moz-box-shadow: betét 0 5px 0 #ccc, beillesztés 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede; -webkit-box-shadow: beillesztés 0 5px 0 #ccc, beillesztés 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede; box-shadow: betét 0 5px 0 #ccc, betét 0 6px 0 # 989898, beillesztés 0 13px 0 #dfdede; bemenet [type = "Submit"]. szilárd float: left; kurzor: mutató; szélesség: 130px; párnázás: 8px 6px; margin-left: 20px; háttérszín: # f8b838; szín: rgba (134, 79, 11, 0,8); szöveg-átalakítás: nagybetűs; font-súly: félkövér; határ: 1px szilárd # 99631d; -moz-határ-sugár: 5px; -webkit-border-radius: 5px; határ-sugár: 5px; szöveg-árnyék: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-átmenet: háttér 0.2s egyszerűsítés; input [type = "Submit"]. szilárd: hover, input [type = "Submit"]. szilárd: focus background: # ffd842; -moz-box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,9), beillesztés 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: 0 0 3px rgba (255, 255, 255, 0,9), 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,9), beillesztés 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; bemenet [type = "Submit"]. szilárd: aktív háttér: # f6a000; pozíció: relatív; top: 5px; határ: 1px szilárd # 702d00; -moz-box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: 0 0 3px rgba (255, 255, 255, 0,6), 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: betét 0 0 3px rgba (255, 255, 255, 0,6), beillesztés 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
