Vienas iš dažniausiai naudojamų bet kurios svetainės elementų yra paieškos forma. Jei norite padidinti savo svetainės naudojimo paprastumo lygį ir labai palengvinti tinkamos medžiagos paieškos procesą, turėtumėte rimtai pradėti kurti paieškos formą.
Taigi, šiandien norime papasakoti apie paieškos formos kūrimą naudojant CSS3 ypatybes.
Anksčiau tikriausiai jau radote vadovėlius, kaip sukurti paieškos formą CSS3, tačiau šiandien norime jums pasiūlyti kiek kitokį variantą – paieškos formą su 3D efektu, įgyvendintu naudojant parametrą box-shadow.
Žymėjimas
Žemiau galite pamatyti HTML kodą, naudotą kuriant šią formą. Atkreipkite dėmesį, kad mūsų užpildas buvo sukurtas naudojant HTML5 ir naudojome visus reikiamus atributus.
Iš pradžių norėjome naudoti HTML5 įvestą type="search", bet vėliau apsigalvojome dėl nesuderinamumo su daugeliu šiuolaikinių naršyklių. Dabar turėsime pridėti keletą papildomų CSS kodo eilučių, kad perrašytume pradines reikšmes.
CSS kodas
Pažvelkime į minimalius stilius, naudojamus kuriant gražią CSS3 paieškos formą:
Formos įvynioklis (
plotis: 450 pikselių;
pamušalas: 8px;
paraštė: 100 pikselių automatinis;
perteklius paslėptas;
kraštinės plotis: 1px;
apvado stilius: tvirtas;
kraštinės spalva: #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;
langelio šešėlis: 0 3px 3px rgba(255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-Webkit-border-radius: 10px;
kraštinės spindulys: 10 pikselių;
fono spalva: #f6f6f6;
background-image: -webkit-gradient(linijinis, kairėje viršuje, kairėje apačioje, nuo(#f6f6f6), iki(#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(viršuje, #f6f6f6, #eae8e8);
background-image: linear-gradient(viršuje, #f6f6f6, #eae8e8);
}
Formos įvynioklis #search (
plotis: 330 pikselių;
aukštis: 20px;
užpildymas: 10 piks. 5 piks.;
plūdė: kairė;
šriftas: bold 16px "lucida sans", "trebuchet MS", "Tahoma";
kraštinė: 1px vientisas #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;
langelis-šešėlis: 0 1px 1px #ddd intarpas, 0 1px 0 #fff;
-moz-border-radius: 3px;
-Webkit-border-radius: 3px;
kraštinės spindulys: 3 pikseliai;
}
Formos įvynioklis #search:focus (
kontūras: 0;
kraštinės spalva: #aaa;
-moz-box-shadow: 0 1px 1px #bbb intarpas;
-webkit-box-shadow: 0 1px 1px #bbb inset;
langelis-šešėlis: 0 1px 1px #bbb intarpas;
}
Formos įvynioklis #search::-webkit-input-placeholder (
spalva: #999;
šrifto svoris: normalus;
}
Formos įvynioklis #search:-moz-placeholder (
spalva: #999;
šrifto svoris: normalus;
}
Formos įvynioklis #search:-ms-input-placeholder (
spalva: #999;
šrifto svoris: normalus;
}
Formos įvynioklis #submit (
plūdė: dešinė;
kraštinė: 1px solid #00748f;
aukštis: 42px;
plotis: 100 pikselių;
paminkštinimas: 0;
žymeklis: rodyklė;
šriftas: bold 15px Arial, Helvetica;
spalva: #fafafa;
teksto transformavimas: didžiosios raidės;
fono spalva: #0483a0;
background-image: -webkit-gradient(linijinis, kairėje viršuje, kairėje apačioje, 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(viršuje, #31b2c3, #0483a0);
background-image: linear-gradient (viršuje, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-Webkit-border-radius: 3px;
kraštinės spindulys: 3 pikseliai;
teksto šešėlis: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0,3) įdėta, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
langelis-šešėlis: 0 1px 0 rgba(255, 255, 255, 0,3) įdėta, 0 1px 0 #fff;
}
Formos įvynioklis #submit:hover,
.form-wrapper #submit:focus (
fono spalva: #31b2c3;
background-image: -webkit-gradient(linijinis, kairėje viršuje, kairėje apačioje, 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(viršuje, #0483a0, #31b2c3);
background-image: linear-gradient(viršuje, #0483a0, #31b2c3);
}
Formos įvynioklis #submit:aktyvus (
kontūras: 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 (
kraštinė: 0;
}
Naršyklės palaikymas
Žemiau galite pamatyti keletą ekrano kopijų, kuriose rodoma mūsų paieškos forma. Turėtumėte atkreipti dėmesį, kad jis taip pat veikia gerai, jei puslapis atidaromas senesnėje naršyklės versijoje. Taip pat norėčiau pridurti, kad ši CSS3 paieškos forma yra visiškai paruošta naudoti.
Šiuolaikinės naršyklės Chrome, Firefox, Safari, Opera, IE10:
Atminkite, kad „Opera“ šiuo metu palaiko vietos rezervavimo atributą HTML5, tačiau jo negalima formuoti.
Geros naujienos yra tai, kad IE10 taip pat palaiko HTML5 užpildą.
Ankstesnės IE versijos (6/7/8):
*
Apibendrinant
Jei skaitėte mūsų ankstesnius straipsnius, tikriausiai žinote, kad čia mes kuriame veikiančias programas (su atšaukimo versijomis ir be jų) visoms naršyklėms. Ir šis pavyzdys nėra išimtis.
Be CSS3 formos naudojimo, kad sukurtumėte paieškos bloką, galite lengvai pritaikyti ją, kad sukurtumėte įgaliojimo formą arba prenumeratos formą.
Paieškos laukas tikriausiai yra vienas iš labiausiai paplitusių vartotojo sąsajos elementų. Dirbant sąsajos patogumo lygiu, labai dažnai kyla noras pridėti stilingą paieškos laukelį. Šioje pamokoje mes sukursime tokį populiarų elementą naudodami pseudoelementus.
HTML žymėjimas
Norint paruošti tokį lauką, žymėjimas bus minimalus.
Čia naudojami specialūs HTML5 rezervavimo ženklai ir būtini atributai:
- vietos rezervuaras- šis atributas nurodo, kad tekstas lauke rodomas prieš lauke gaunant įvesties fokusavimą, tada tekstas yra paslėptas.
- reikalaujama- šis atributas nurodo privalomą informacijos buvimo įvesties lauke sąlygą prieš pateikiant formą.
HTML5 taip pat turi naują tipo atributo reikšmę: type="search" . Tačiau jis menkai palaikomas naršyklėse, todėl kol kas jo nenaudosime.
HTML elementai, tokie kaip img ir input, neturi turinio. Todėl pseudoelementas, toks kaip:befor, nerodys jokių mygtuko rodyklių.
Šios problemos sprendimas mūsų atveju yra naudoti mygtuką type="submit", o ne įvesties tipas="pateikti" . Tokiu būdu išlaikome formą naudodami klavišą ENTER.
CSS
Žemiau pateikiami mūsų demonstravimui reikalingi stiliai:
Atšaukti teksto įvyniojimą
Cf:before, .cf:after(turinys:""; ekranas:lentelė; ) .cf:after( clear:abi; ) .cf(zoom:1; )
Formos elementai
Siekiant didesnio aiškumo, kode nerodomi naršyklės priešdėliai. Visą kodą galite pamatyti šaltinio tekste.
/* Formų sudėtinio rodinio stiliai */ .form-wrapper ( plotis: 450 pikselių; užpildymas: 15 pikselių; paraštė: 150 pikselių automatinis 50 pikselių automatinis; fonas: #444; fonas: rgba(0,0,0,.2); rėmelis- spindulys : 10 tšk.; langelio šešėlis: 0 1 piks. 1 piks. rgba(0,0,0,.4) įterptas, 0 1px 0 rgba(255,255,255,.2) /* Teksto įvesties stiliai */ .form-wrapper įvestis ( plotis : 330px ; padding: 10px 5px: bold 15px "trebuchet": 0, 0 3px. 0 0 2px rgba(0,0,0,.8) inset; .form-wrapper input::-webkit -input-placeholder ( spalva: #999; šrifto svoris: normalus; šrifto stilius: kursyvas; ) . form-wrapper input:-moz-placeholder ( spalva: #999; šrifto svoris: normalus; šrifto stilius: kursyvas ; ) .form-wrapper input:-ms-input-placeholder ( spalva: #999; šrifto svoris: normalus šrifto stilius: kursyvas ) /* Formos pateikimo mygtukas kraštinė: 0; paminkštinimas: 0; žymeklis: rodyklė; aukštis: 40px; plotis: 110px; šriftas: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; spalva: #fff; teksto transformavimas: didžiosios raidės; fonas: #d83c3c; kraštinės spindulys: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); ) .form-wrapper button:hover( fonas: #e54040; ) .form-wrapper mygtukas:aktyvus, .form-wrapper mygtukas:focus(fonas: #c42f2f; kontūras: 0; ) .form-wrapper mygtukas:prieš ( / * rodyklė į kairę: "" absoliuti border-width: 8px 0 border-style: solid border-color: skaidri #d83c3c permatoma ) .form-wrapper:before; border-right-color: #e54040; ) .form-wrapper mygtukas:focus:prieš, .form-wrapper mygtukas:active:before( border-right-color: #c42f2f; ) .form-wrapper mygtukas::-moz- focus-inner ( /* Pašalinkite papildomą vietą šalia mygtuko „Mozilla Firefox“ */ kraštinė: 0; užpildymas: 0; )
Svetainės paieškos laukas yra vienas iš svarbiausių vartotojo sąsajos elementų tinklalapyje. Su jo pagalba vartotojas gali rasti norimą turinį jūsų svetainėje.
Šioje pamokoje sužinosite, kaip sukurti paieškos lauko žymėjimą naudojant HTML5 ir kaip formuoti formos elementus naudojant CSS3 be scenarijų.
1. HTML žymėjimas
Elementas
