„Rocking CSS3“ paieškos laukelio kūrimas
CSS3 yra naujos kartos stiliaus lapas. Jame pristatomos daug naujų ir įdomių funkcijų, tokių kaip šešėliai, animacijos, perėjimai, pasienio spindulys ir tt Nors specifikacijos dar nėra baigtos, daugelis naršyklės gamintojų jau pradėjo palaikyti daugelį naujų funkcijų.
Šioje instrukcijoje išnagrinėsime kai kurias iš šių funkcijų teksto šešėlis, pasienio spindulys, dėžutės šešėliai ir perėjimai, kad sukurtumėte roko paieškos lauką.
Šios paieškos lauko „Photoshop“ versiją sukūrė „Alvin Thong“ ir ją galima atsisiųsti iš čia. Bandžiau atkurti šią paieškos lauką naudojant gryną CSS3. Pažymėtina, kad ne visos naršyklės palaiko CSS3 funkcijas ir norėdami išbandyti šią pamoką, turėtumėte naudoti vieną iš šiuolaikinių naršyklių, palaikančių CSS 3 funkcijas.
Paruošta? Pradėkime!
1. HTML5 „Doctype“
Pradėsime nuo HTML žymėjimo. Tai labai paprasta, po HTML5 doctype ir deklaraciją, turime paskambinus ID #vyniojamasis popierius viduje . Tai daroma paprasčiausiai nustatant turinio langelio plotį ir suderinant jį su puslapio centru.
Po to seka a Štai kaip atrodo šis kodas: Norėdami sukurti didelį langelį aplink formą, mes pridėsime stilių Svarbus kodas čia yra Paaiškinimas: Čia raktinis žodis nurodo, ar šešėlis bus dėžutės viduje. Pirmieji du nuliai rodo x-offsetą ir y-offsetą, o 3px - neryškumą. Kitas yra spalvų deklaracija. Čia naudoju rgba reikšmes; rgba reiškia raudoną žalią ir alfa (neskaidrumą). Taigi, 4 reikšmės skliausteliuose nurodo raudonos, žalios, mėlynos ir jo alfa (neskaidrumo) kiekį. Jūs pastebėsite, kad 5 šešėlių deklaracijų rinkiniai buvo sujungti kartu. Tai galima padaryti atskiriant kableliu. Pirmieji du šešėliai apibrėžia baltą „vidinį švytėjimą“ efektą, o kitos deklaracijos suteikia dėžutei tvirtą / stambią išvaizdą. Žiūrėkite su šiomis vertybėmis, kad suprastumėte, kaip ji veikia. Dabar, kai langelis yra baigtas, galite pereiti prie įvesties lauko formavimo. Įvesties laukui deklaruoti stiliai yra gana panašūs į dideliam langeliui nukreiptus stilius Paaiškinimas: Jūs pastebėsite, kad šį kartą šešėlio atspalvis buvo išlaikytas 0, kad būtų gautas aštrus šešėlis, o vertikali 5px kompensacija naudojama. Vėlesnėse deklaracijose neryškumas buvo išlaikytas 0px, bet spalva ir y-offsetas pasikeitė. Vėlgi, atlikite šiuos duomenis, kad gautumėte skirtingus rezultatus. Leiskite stiliui ieškoti mygtuko. Be spalvų, paieškos mygtukas dažniausiai yra tas pats, kaip ir išoriniame langelyje. Mygtuke buvo naudojami panašūs pasienio spinduliai ir langų šešėliai. Įdiegta nauja funkcija Paaiškinimas: Viduje konors Aktyvi mygtuko būsena turi šiek tiek daugiau pakeitimų. Tai daviau mygtuką absoliučios ir „viršutinės“ 5px vertės pozicijai. Tai buvo padaryta siekiant suteikti jai natūralesnę išvaizdą, kad jaustųsi, jog mygtukas iš tiesų buvo nuleistas 5 pikseliais. Kiti aktyvios būsenos pakeitimai yra fono spalvos ir šešėlių pokyčiai. Atkreipkite dėmesį, kad aš sumažinau šešėlių y-offsetą, kad jis atrodytų „nuspaustas“. Toliau pateikiamas aktyvaus siuntimo mygtuko kodas: Tai užbaigia paieškos lauką. Mes naudojome nemažai naujų CSS3 funkcijų. Čia yra šio paieškos lauko CSS ir HTML. Tikimės, kad jums patiko ši pamoka. Nesivaržykite eksperimentuoti su šiomis funkcijomis ir nepamirškite pasidalinti savo mintimis. Redaktoriaus pastaba: Šį įrašą parašė Bharani M už Hongkiat.com. Bharani yra dizaineris / kūrėjas iš Niu Delis, Indija.#main. Šiame ID yra stilių, apibrėžiančių didelį baltą langelį aplink įvesties lauką ir paieškos mygtuką. Tai viduje. Forma turi teksto įvedimo laukas ir search mygtukas. Štai kaip atrodo, kaip forma atrodo be jokių stilių: 
CSS3 paieškos laukas
2. Rėmelio kūrimas
#main. Iš toliau pateikto kodo pastebėsite, kad dėžutei buvo suteiktas 400 pikselių plotis ir 50 pikselių aukštis. #main plotis: 400px; aukštis: 50px; fonas: # f2f2f2; įdėklas: 6px 10px; siena: 1px kietas # b5b5b5; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; -moz-box-shadow: įdėklas 0 0 3px rgba (255, 255, 255, 0,8), įdėjimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,8), įterpimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,8), įdėjimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
pasienio spindulys deklaracija ir langelis-šešėlis deklaraciją. Norėdami sukurti apvalius kampus, mes naudojome CSS3 pasienio spindulio deklaraciją, „-moz-“ ir „-webkit-“ naršyklės prefiksus, siekiant užtikrinti, kad tai veikia „gecko“ ir „webkit“ pagrindu veikiančiose naršyklėse. Dėžutės šešėlinės deklaracijos gali atrodyti šiek tiek painios, bet iš tikrųjų tai labai paprasta. dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,8), įdėjimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Peržiūra
3. Įveskite įvesties lauką
įvestis [type = "text"] float: kairė; plotis: 230px; paminkštinimas: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; siena: 1px kietas # 999999; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; -moz-box-shadow: įdėklas 0 5px 0 #ccc, įterpimas 0 6px 0 # 989898, įterpimas 0 13px 0 #dfdede; -webkit-box-shadow: intarpas 0 5px 0 #ccc, įterpimas 0 6px 0 # 989898, įterpimas 0 13px 0 #dfdede; box-shadow: įdėklas 0 5px 0 #ccc, įdėklas 0 6px 0 # 989898, įdėklas 0 13px 0 #dfdede;
#main. Mes naudojome tą patį pasienio spindulį (5px). Vėlgi, keli dėžutės šešėliai buvo klubiniai. box-shadow: įdėklas 0 5px 0 #ccc, įdėklas 0 6px 0 # 989898, įdėklas 0 13px 0 #dfdede;
Peržiūra
4. Pateikimo mygtuko stilius
įvestis [type = "Submit"]. kietas float: left; žymeklis: žymeklis; plotis: 130px; pagalvėlė: 8px 6px; margin-left: 20px; fono spalva: # f8b838; spalva: rgba (134, 79, 11, 0,8); teksto transformavimas: didžiosios; šrifto svoris: paryškintas; siena: 1px kietas # 99631d; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; teksto šešėlis: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: įdėjimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,6), įdėjimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-perėjimas: fonas 0.2s-out;
teksto šešėlis. teksto šešėlis: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
teksto šešėlis pirmieji trys skaitmeniniai dydžiai yra atitinkamai x-offset, y-offset ir blur. Rgba reikšmės rodo šešėlių spalvą. Kitame deklaracijų rinkinyje (atskirtą kableliu) y-offsetui suteikiama -1 vertė. Tai daroma siekiant pateikti tekstą “vidinis šešėlis” poveikį. Paspaudimo mygtuko judėjimo / fokusavimo būsenoje yra skirtingos fono spalvos ir šešėlių vertės. Peržiūra
„Aktyvus“ mygtukas
įvestis [type = "Submit"]. kietas: aktyvus fonas: # f6a000; pozicija: santykinis; viršuje: 5px; siena: 1px kietas # 702d00; -moz-box-shadow: įdėjimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,6), įdėjimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Pilnas (CSS) kodas
#main plotis: 400px; aukštis: 50px; fonas: # f2f2f2; įdėklas: 6px 10px; siena: 1px kietas # b5b5b5; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; -moz-box-shadow: įdėklas 0 0 3px rgba (255, 255, 255, 0,8), įdėjimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,8), įterpimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,8), įdėjimas 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: kairėje; plotis: 230px; paminkštinimas: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; siena: 1px kietas # 999999; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; -moz-box-shadow: įdėklas 0 5px 0 #ccc, įterpimas 0 6px 0 # 989898, įterpimas 0 13px 0 #dfdede; -webkit-box-shadow: intarpas 0 5px 0 #ccc, įterpimas 0 6px 0 # 989898, įterpimas 0 13px 0 #dfdede; box-shadow: įdėklas 0 5px 0 #ccc, įdėklas 0 6px 0 # 989898, įdėklas 0 13px 0 #dfdede; input [type = "Submit"]. kietas float: left; žymeklis: žymeklis; plotis: 130px; pagalvėlė: 8px 6px; margin-left: 20px; fono spalva: # f8b838; spalva: rgba (134, 79, 11, 0,8); teksto transformavimas: didžiosios; šrifto svoris: paryškintas; siena: 1px kietas # 99631d; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; pasienio spindulys: 5px; teksto šešėlis: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: įdėjimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,6), įdėjimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-perėjimas: fonas 0.2s-out; įvestis [type = "Submit"].: kietas: hover, input [type = "Submit"], kietas: focus background: # ffd842; -moz-box-shadow: įdėklas 0 0 3px rgba (255, 255, 255, 0,9), įdėjimas 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: įdėjimas 0 0 3px rgba (255, 255, 255, 0,9), įterpimas 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,9), įdėklas 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "Submit"]. kietas: aktyvus fonas: # f6a000; pozicija: santykinis; viršuje: 5px; siena: 1px kietas # 702d00; -moz-box-shadow: įdėjimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: įterpimas 0 0 3px rgba (255, 255, 255, 0,6), įterpimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; dėžutės šešėlis: įdėklas 0 0 3px rgba (255, 255, 255, 0,6), įdėjimas 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
