Vytvoření vyhledávacího pole CSS3
CSS3 je jazyk příští generace. Představuje mnoho nových a vzrušujících funkcí, jako jsou stíny, animace, přechody, hraniční okraje atd. Přestože specifikace ještě nebyly dokončeny, mnoho výrobců prohlížečů již začalo podporovat mnoho nových funkcí.
V tomto tutoriálu prozkoumáme některé z těchto funkcí textového stínu, poloměr ohraničení, box-stíny a přechody k vytvoření houpacího vyhledávacího pole.
Photoshop verze tohoto vyhledávacího pole byla vytvořena společností Alvin Thong a lze ji stáhnout zde. Pokusil jsem se znovu vytvořit toto vyhledávací pole pomocí čistého CSS3. Je třeba poznamenat, že ne všechny prohlížeče podporují funkce CSS3 a vyzkoušet tento návod, měli byste použít jeden z moderních prohlížečů, které podporují funkce CSS 3.
Připraveni? Začněme!
1. HTML5 Doctype
Začneme s HTML značkami. Je to velmi jednoduché, po HTML5 doctype a prohlášení, máme s voláním ID #obal uvnitř . To se provádí jednoduše definováním šířky pole obsahu a jeho zarovnáním do středu stránky.
Následuje a Jak kód vypadá takto: K vytvoření velkého rámečku kolem formuláře přidáme styly Důležitým kódem je zde Vysvětlení: Zde vložené klíčové slovo určuje, zda bude stín uvnitř rámečku. První dvě nuly označují x-offset a y-offset a 3px označuje rozostření. Dále je deklarace barev. Použil jsem zde hodnoty rgba; rgba je zkratka pro červenou zelenou modrou a alfa (neprůhlednost). Hodnoty 4 uvnitř závorek tedy označují množství červené, zelené, modré a její alfa (neprůhlednost). Všimněte si, že 5 sad stínových deklarací bylo dohromady uloženo. To lze provést oddělením čárkou. První dva stíny definují bílý efekt "vnitřní záře" a další deklarace dávají boxu svůj pevný / robustní vzhled. Hrajte si s těmito hodnotami, abyste pochopili, jak to funguje. Nyní, když je rámeček kompletní, můžete přejít na styling vstupního pole. Styly deklarované pro vstupní pole jsou velmi podobné těm, které se pro velký box rozpadly Vysvětlení: Všimněte si, že tentokrát bylo rozostření stínu udržováno na 0, aby se získal ostrý stín a byl použit vertikální posun 5px. V následných deklaracích bylo rozostření udržováno na 0px, ale barva a posun y byly změněny. Opět hrajte s těmito hodnotami, abyste získali různé výsledky. Pojďme styl vyhledávacího tlačítka. Kromě barev má vyhledávací tlačítko většinou stejné styly jako vnější box. Na tlačítku bylo použito podobné ohraničení okraje a rámečku. Novinkou je nová Vysvětlení: V Aktivní stav tlačítka má o něco více změn. V tomto jsem dal tlačítku pozici absolutní a 'top' hodnotu 5px. Toto bylo děláno dát tomu přirozenější pohled, takový že to cítí, že tlačítko bylo vlastně tlačil dolů o 5 pixelů. Další změny aktivního stavu jsou barvy pozadí a stíny. Všimněte si, že jsem zmenšil y-ofset stínů, abych se na něj podíval. Zde je kód aktivního stavu tlačítka Odeslat: Tím je naše vyhledávací pole dokončeno. Použili jsme několik nových funkcí CSS3. Zde je kompletní CSS a HTML tohoto vyhledávacího pole. Doufám, že jste si tento návod užili. Nebojte se experimentovat s těmito funkcemi a nezapomeňte se podělit o své myšlenky. Poznámka editora: Tento příspěvek je napsán Bharani M pro Hongkiat.com. Bharani je návrhář / vývojář z New Delhi, Indie.#hlavní. Toto ID obsahuje styly, které definují velké bílé pole kolem vstupního pole a vyhledávacího tlačítka. Tento uvnitř. Formulář má pole pro zadávání textu a sTlačítko vyhledávání. Jak vypadá formulář bez jakýchkoli stylů: 
Vyhledávací pole CSS3
2. Vytvoření ohraničovacího rámečku
#hlavní. Z níže uvedeného kódu si všimnete, že krabička má šířku 400px a výšku 50px. #main width: 400px; výška: 50px; pozadí: # f2f2f2; polstrování: 6px 10px; okraj: 1px pevná # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # 989898, 0 13px 0 # dfdede;
poloměr ohraničení prohlášení a. \ t box-stín prohlášení. Pro vytvoření zaoblených rohů jsme použili deklaraci CSS3 hraničního rádiusu, "-moz-" a "-webkit-" prefixy prohlížeče byly použity k zajištění toho, že to funguje v prohlížečích založených na gecku a webkitu. Deklarace stínového boxu může vypadat trochu matoucí, ale ve skutečnosti je to velmi jednoduché. box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # 989898, 0 13px 0 # dfdede;
Náhled
3. Styling vstupního pole
input [type = "text"] float: vlevo; šířka: 230px; polstrování: 15px 5px 5px 5px; okraj: 5px; levý okraj: 3px; ohraničení: 1px pevná # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede;
#hlavní. Použili jsme stejný poloměr ohraničení (5px). Opět, klubové stíny byly ukradeny. box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede;
Náhled
4. Styling tlačítko Odeslat
input [type = "submit"]. solid float: left; kurzor: ukazatel; šířka: 130px; polstrování: 8px 6px; margin-left: 20px; barva pozadí: # f8b838; barva: rgba (134, 79, 11, 0,8); text-transform: velká písmena; font-weight: tučné; ohraničení: 1px pevné # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px0 rgba (64, 38, 5, 0,9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webk-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # # ccc; -webkit-transition: pozadí 0.2s easy-out;
textového stínu. text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px0 rgba (64, 38, 5, 0,9);
textového stínu první tři číselné hodnoty jsou x-offset, y-offset a blur. Hodnoty rgba označují barvu stínu. V další sadě deklarace (oddělené čárkou) je y-ofsetu dána hodnota -1. To se provádí tak, že se text a “vnitřní stín” účinek. Stav přechodu / fokusu tlačítka Odeslat má různé hodnoty barvy pozadí a stínů. Náhled
Stav "Aktivní" tlačítka
input [type = "submit"]. solid: active background: # f6a000; poloha: relativní; nahoru: 5px; okraj: 1px pevné # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webk-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # 593a11, 0 8px 0 # ccc;
Kompletní (CSS) kód
#main width: 400px; výška: 50px; pozadí: # f2f2f2; polstrování: 6px 10px; okraj: 1px pevná # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), vloženo 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: vlevo; šířka: 230px; polstrování: 15px 5px 5px 5px; okraj: 5px; levý okraj: 3px; ohraničení: 1px pevná # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, vloženo 0 6px 0 # 989898, vloženo 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; kurzor: ukazatel; šířka: 130px; polstrování: 8px 6px; margin-left: 20px; barva pozadí: # f8b838; barva: rgba (134, 79, 11, 0,8); text-transform: velká písmena; font-weight: tučné; ohraničení: 1px pevné # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; hraniční rádius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px0 rgba (64, 38, 5, 0,9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webk-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # # ccc; -webkit-transition: pozadí 0.2s easy-out; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: vložka 0 0 3px rgba (255, 255, 255, 0,9), vloženo 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webk-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,9), vloženo 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,9), vloženo 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # 593a11 ccc; input [type = "submit"]. solid: active background: # f6a000; poloha: relativní; nahoru: 5px; okraj: 1px pevné # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webk-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), vloženo 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # 593a11, 0 8px 0 # ccc;
