Jedným z najčastejšie používaných prvkov každej webovej stránky je vyhľadávací formulár. Ak chcete zvýšiť úroveň jednoduchosti používania na svojich stránkach a výrazne uľahčiť proces hľadania správneho materiálu, mali by ste vážne začať s vývojom vyhľadávacieho formulára.
Dnes vám teda chceme povedať o navrhovaní vyhľadávacieho formulára pomocou vlastností CSS3.
V minulosti ste už určite našli návody ako navrhnúť vyhľadávací formulár v CSS3, no dnes vám chceme ponúknuť trochu inú možnosť – vyhľadávací formulár s 3D efektom implementovaný pomocou parametra box-shadow.
Označovanie
Nižšie môžete vidieť HTML kód použitý na vývoj tohto formulára. Upozorňujeme, že náš výplň bol vyvinutý pomocou HTML5 a použili sme všetky potrebné atribúty.
Najprv sme chceli použiť type="search" zavedený v HTML5, ale potom sme zmenili názor kvôli nekompatibilite s mnohými modernými prehliadačmi. Teraz budeme musieť pridať pár riadkov kódu CSS navyše, aby sme prepísali pôvodné hodnoty.
CSS kód
Poďme sa pozrieť na minimálne štýly použité na vytvorenie krásneho vyhľadávacieho formulára CSS3:
Form-wrapper(
šírka: 450px;
výplň: 8px;
okraj: 100px automaticky;
prepad: skrytý;
border-width: 1px;
okrajový štýl: pevný;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
farba pozadia: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
Form-wrapper #search (
šírka: 330px;
výška: 20px;
padding: 10px 5px;
plavák: vľavo;
písmo: tučné 16px "lucida sans", "trebuchet MS", "Tahoma";
orámovanie: 1px plný #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
Form-wrapper #search:focus (
obrys: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
Form-wrapper #search::-webkit-input-placeholder (
farba: #999;
font-weight: normal;
}
Form-wrapper #search:-moz-placeholder (
farba: #999;
font-weight: normal;
}
Form-wrapper #search:-ms-input-placeholder (
farba: #999;
font-weight: normal;
}
Form-wrapper #submit (
plavák: vpravo;
orámovanie: 1px plný #00748f;
výška: 42px;
šírka: 100px;
výplň: 0;
kurzor: ukazovateľ;
font: bold 15px Arial, Helvetica;
farba: #fafafa;
text-transform: veľké písmená;
farba pozadia: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0,3) vložka, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0,3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0,3) inset, 0 1px 0 #fff;
}
Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
farba pozadia: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
Form-wrapper #submit:active (
obrys: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0,5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0,5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0,5) inset;
}
Form-wrapper #submit::-moz-focus-inner (
ohraničenie: 0;
}
Podpora prehliadača
Nižšie môžete vidieť niekoľko snímok obrazovky zobrazujúcich náš vyhľadávací formulár. Mali by ste si uvedomiť, že sa správa dobre aj vtedy, ak je stránka otvorená v staršej verzii prehliadača. Chcel by som tiež dodať, že tento vyhľadávací formulár CSS3 je úplne pripravený na použitie.
Moderné prehliadače Chrome, Firefox, Safari, Opera, IE10:
Upozorňujeme, že Opera v súčasnosti podporuje atribút zástupného symbolu v HTML5, ale nedá sa upraviť.
Dobrou správou je, že IE10 podporuje aj HTML5 filler.
Predchádzajúce verzie IE (6/7/8):
*
Na záver
Ak ste čítali naše predchádzajúce články, tak pravdepodobne viete, že tu vyvíjame fungujúce aplikácie (s rollback verziami aj bez nich) pre všetky prehliadače. A tento príklad nie je výnimkou.
Okrem použitia formulára CSS3 na vytvorenie vyhľadávacieho bloku ho môžete jednoducho prispôsobiť na vytvorenie autorizačného formulára alebo formulára predplatného.
Vyhľadávacie pole je pravdepodobne jedným z bežných prvkov používateľského rozhrania. Pri práci na úrovni pohodlia rozhrania veľmi často existuje túžba pridať štýlové vyhľadávacie pole. V tomto návode vytvoríme taký populárny prvok pomocou pseudoprvkov.
HTML značenie
Na prípravu takéhoto poľa bude označenie minimálne.
Tu sa používa špeciálny zástupný symbol HTML5 a povinné atribúty:
- zástupný symbol- tento atribút určuje, že text sa zobrazí v poli predtým, ako sa pole zameria na vstup, potom sa text skryje.
- požadovaný- tento atribút určuje povinnú podmienku pre prítomnosť informácie vo vstupnom poli pred odoslaním formulára.
HTML5 má tiež nový význam pre atribút type: type="search" . V prehliadačoch je však slabo podporovaný, takže ho zatiaľ nebudeme používať.
Prvky HTML ako img a input nemajú žiadny obsah. Preto pseudoprvok ako:before nebude zobrazovať žiadne šípky pre tlačidlo.
Riešením tohto problému v našom prípade je použitie tlačidla type="submit" namiesto input type="submit" . Takto udržíme formulár pomocou klávesu ENTER.
CSS
Nižšie sú uvedené štýly potrebné pre našu demonštráciu:
Zrušiť zalamovanie textu
Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
Formulárové prvky
Pre lepšiu prehľadnosť nie sú v kóde zobrazené predpony prehliadača. Celý kód si môžete pozrieť v zdrojovom texte.
/* Štýly pre kontajner formulára */ .form-wrapper ( šírka: 450px; padding: 15px; margin: 150px auto 50px auto; pozadie: #444; pozadie: rgba(0,0,0,.2); border- polomer : 10px box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2) /* Štýly zadávania textu */ .form-wrapper input ( width : 330px) ; výplň: 10px 5px; bold 15px "trebuchet MS"; border-radius: 3px 0 0 3px ) .form-wrapper input:focus ( obrys: 0; pozadie: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::-webkit -input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) . form-wrapper input:-moz-placeholder ( farba: #999; font-weight: normal; font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( color: #999; font-weight: normal font-style: italic; ohraničenie: 0; výplň: 0; kurzor: ukazovateľ; výška: 40px; šírka: 110px; písmo: tučné 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; farba: #fff; text-transform: veľké písmená; pozadie: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); ) .form-wrapper button:hover( background: #e54040; ) .form-wrapper button:active, .form-wrapper button:focus( background: #c42f2f; obrys: 0; ) .form-wrapper button:before ( / * šípka doľava */ obsah: ""; šírka-okraja: 8px 8px 0; border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz- focus-inner ( /* Odstránenie nadbytočného priestoru vedľa tlačidla v prehliadači Mozilla Firefox */ border: 0; padding: 0; )
Vyhľadávacie pole pre danú lokalitu je jedným z najdôležitejších prvkov používateľského rozhrania na webovej stránke. S jeho pomocou môže používateľ nájsť požadovaný obsah na vašej stránke.
V tomto návode sa naučíte, ako vytvoriť označenie vyhľadávacieho poľa pomocou HTML5, ako aj ako štýlovať prvky formulára pomocou sily CSS3 bez použitia skriptov.
1. Značenie HTML
Element
