Vytvorenie hojdacieho vyhľadávacieho poľa CSS3
CSS3 je jazyk štýlov prvej generácie. Predstavuje množstvo nových a zaujímavých funkcií, ako sú tiene, animácie, prechody, polomer okrajov atď. Aj keď špecifikácie ešte neboli dokončené, mnohí výrobcovia prehliadačov už začali podporovať mnoho nových funkcií.
V tomto výučbe budeme skúmať niektoré z týchto funkcií, ako napríklad text-shadow, border-radius, box tiene a prechodov na vytvorenie hojdacieho vyhľadávacieho poľa.
Verzia tohto vyhľadávacieho poľa od spoločnosti Photoshop bola vytvorená spoločnosťou Alvin Thong a môže byť stiahnutá z tohto miesta. Pokúsil som sa obnoviť toto vyhľadávacie pole pomocou čistého CSS3. Treba poznamenať, že nie všetky prehliadače podporujú funkcie CSS3 a vyskúšať si tento tutoriál, mali by ste použiť jeden z moderných prehliadačov, ktoré podporujú funkcie CSS 3.
Pripravený? Začnime!
1. HTML5 Doctype
Začneme s označením HTML. Je to veľmi jednoduché, po HTML5 doctype a deklarácia, máme s identifikáciou ID #wrapper vnútri . Toto sa jednoducho definuje šírkou rámčeka obsah a zarovná sa so stredom stránky.
Nasleduje a Tu je kód, ako vyzerá takto: Ak chcete vytvoriť veľké pole okolo formulára, pridáme štýly do Dôležitým kódom tu je vysvetlenie: Tu vložka kľúčového slova určuje, či sa tieň nachádza vo vnútri poľa. Prvé dve nuly označujú x-offset a y-offset a 3px označujú rozmazanie. Ďalej je deklarácia farieb. Použil som tu hodnoty rgba; rgba znamená červenú zelenú modrú a alfa (opacita). Preto 4 hodnoty v zátvorke označujú množstvo červenej, zelenej, modrej a jej alfa (opacita). Zistíte, že 5 sád stínových vyhlásení bolo spojených dohromady. Môžete to urobiť tak, že ich oddeľujete čiarkou. Prvé dva tiene vymedzujú biely efekt "vnútornej žiarivky" a nasledujúce deklarácie dávajú krabici svoj pevný / hrubý vzhľad. Hrať si s týmito hodnotami, aby ste pochopili, ako to funguje. Teraz, keď je krabica dokončená, prejdite na štýl vstupného poľa. Štýly deklarované pre vstupné pole sú celkom podobné tým, ktoré boli rozdelené do veľkej krabice vysvetlenie: Všimnete si, že tentoraz sa stínové rozostrenie udržalo na hodnote 0, aby sa získal ostrý tieň a použije sa vertikálny posun 5px. V postupných vyhláseniach sa rozmazanie udržalo na hodnote 0px, ale farba a y-offset boli zmenené. Opäť hrajte s týmito hodnotami, aby ste získali rôzne výsledky. Stlačte tlačidlo vyhľadávania. Okrem farieb má tlačidlo vyhľadávania prevažne rovnaké štýly ako tlačiareň. Na tlačidle sa použili podobné okraje okrajov a tieňov. Nová funkcia bola zavedená vysvetlenie: V Aktívny stav tlačidla má o niečo viac zmien. V tomto bode som dal tlačidlu absolútnu pozíciu a "najvyššiu" hodnotu 5px. To bolo urobené, aby sa prirodzenejší vzhľad, takže to cíti, že tlačidlo bolo skutočne tlačil o 5 pixelov. Ďalšie zmeny aktívneho stavu sú farby pozadia a tieň. Všimnite si, že som zmenšil y-offset tieňov, aby som získal "stlačený" vzhľad. Tu je kód pre aktívny stav tlačidla na odoslanie: Toto dokončí naše vyhľadávacie pole. Použili sme niekoľko nových funkcií CSS3. Tu je kompletný CSS a HTML tohto vyhľadávacieho poľa. Dúfam, že ste si tento tutoriál užili. Neváhajte experimentovať s týmito funkciami a nezabudnite zdieľať svoje myšlienky. Poznámka redaktora: Tento príspevok je napísaný používateľom Bharani M pre Hongkiat.com. Bharani je dizajnér / developer z New Delhi v Indii.#hlavné. Tento identifikátor obsahuje štýly, ktoré definujú veľké biele pole okolo vstupného poľa a tlačidlo vyhľadávania. toto deklarované vnútri. Formulár má pole pre zadávanie textu a sTlačidlo prehľadu. Tu je spôsob, ako vyzerá formulár bez toho, aby na ňu boli použité žiadne štýly: 
Pole vyhľadávania CSS3
2. Vytvorenie ohraničenia
#hlavné. Z nižšie uvedeného kódu si všimnete, že v poli bolo priradené šírka 400 pixelov a výška 50 pixlov. #main šírka: 400px; výška: 50px; pozadie: # f2f2f2; polstrovanie: 6px 10px; hranica: 1px solid # b5b5b5; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; -moz-box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1) 0 0px 0 # 989898, 0 13px 0 # dfdede;
border-radius vyhlásenie a box-shadow vyhlásenia. Na vytvorenie zaoblených rohov sme použili deklaráciu okraja polomeru CSS3, predpony prehliadača "-moz-" a "-webkit-" boli použité, aby sa zabezpečilo, že to funguje v prehliadačoch gecko a webkit. Tieňové deklarácie boxov môžu vyzerať trochu mätúce, ale v skutočnosti sú veľmi jednoduché. box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1) 0 0px 0 # 989898, 0 13px 0 # dfdede;
Náhľad
3. Styling vstupného poľa
vstup [typ = "text"] float: vľavo; šírka: 230 pixlov; polstrovanie: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; hranica: 1px masívna # 999999; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; -moz-box-tieň: vložka 0 5px 0 #ccc, vložka 0 6px 0 # 989898, vložka 0 13px 0 #dfdede; -webkit-box-shadow: vložka 0 5px 0 #ccc, vložka 0 6px 0 # 989898, vložiť 0 13px 0 #dfdede; box-tieň: vložiť 0 5px 0 # ccc, vložiť 0 6px 0 # 989898, vložiť 0 13px 0 #dfdede;
#hlavné. Použili sme rovnaký polomer okrajov (5px). Znova bolo niekoľko box-tieňových klubov. box-tieň: vložiť 0 5px 0 # ccc, vložiť 0 6px 0 # 989898, vložiť 0 13px 0 #dfdede;
Náhľad
4. Štýl tlačidla na odoslanie
zadajte type = "submit"] solid float: left; kurzor: ukazovateľ; šírka: 130px; polstrovanie: 8px 6px; margin-left: 20px; farba pozadia: # f8b838; farba: rgba (134, 79, 11, 0,8); textová transformácia: veľké; font-weight: tučné; hranica: 1px pevná # 99631d; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; textový tieň: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; box-tieň: vložiť 0 0 3px rgba (255, 255, 255, 0.6), vložiť 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, ccc; -webkit-transition: background 0.2s ease-out;
text-shadow. textový tieň: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow prvé tri číselné hodnoty sú x-offset, y-offset a rozostrenie. Hodnoty rgba označujú farbu tieňa. V ďalšej sade deklarácie (oddelenej čiarkou) je hodnota posunu y daná hodnotou -1. Toto je vykonané tak, aby text bol a “vnútorný tieň” účinok. Stav presúvania / zaostrovania tlačidla Odoslať má rôzne hodnoty farby pozadia a tiene. Náhľad
"Aktívny" stav pre tlačidlo
vstupné [typ = "odoslať"] solid: active background: # f6a000; pozícia: relatívna; top: 5px; hranica: 1px pevná # 702d00; -moz-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, ccc;
Kompletný (CSS) kód
#main šírka: 400px; výška: 50px; pozadie: # f2f2f2; polstrovanie: 6px 10px; hranica: 1px solid # b5b5b5; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; -moz-box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.8), vložka 0 2px 2px rgba (255, 255, 255, 1) 0 0px 0 # 989898, 0 13px 0 # dfdede; vstup [typ = "text"] float: vľavo; šírka: 230 pixlov; polstrovanie: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; hranica: 1px masívna # 999999; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; -moz-box-tieň: vložka 0 5px 0 #ccc, vložka 0 6px 0 # 989898, vložka 0 13px 0 #dfdede; -webkit-box-shadow: vložka 0 5px 0 #ccc, vložka 0 6px 0 # 989898, vložiť 0 13px 0 #dfdede; box-tieň: vložiť 0 5px 0 # ccc, vložiť 0 6px 0 # 989898, vložiť 0 13px 0 #dfdede; zadajte [type = "submit"] solid float: left; kurzor: ukazovateľ; šírka: 130px; polstrovanie: 8px 6px; margin-left: 20px; farba pozadia: # f8b838; farba: rgba (134, 79, 11, 0,8); textová transformácia: veľké; font-weight: tučné; hranica: 1px pevná # 99631d; -moz-okraj-polomer: 5px; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; textový tieň: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; box-tieň: vložiť 0 0 3px rgba (255, 255, 255, 0.6), vložiť 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, ccc; -webkit-transition: background 0.2s ease-out; zadajte [type = "submit"] solid: hover, zadajte [type = "submit"] solid: focus background: # ffd842; -moz-box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.9), vložka 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.9), vložka 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.9), vložka 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; vstupné [typ = "odoslať"] solid: active background: # f6a000; pozícia: relatívna; top: 5px; hranica: 1px pevná # 702d00; -moz-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-tieň: vložka 0 0 3px rgba (255, 255, 255, 0.6), vložka 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, ccc;
