Rocking CSS3 -hakukentän luominen
CSS3 on seuraavan sukupolven tyylisivu. Se tuo mukanaan paljon uusia ja jännittäviä ominaisuuksia, kuten varjoja, animaatioita, siirtymiä, reunaradioita jne. Vaikka eritelmiä ei ole vielä viimeistelty, monet selainten valmistajat ovat jo alkaneet tukea monia uusia ominaisuuksia.
Tässä oppaassa tutkitaan joitakin näistä ominaisuuksista, kuten text-shadow, border-säde, box-varjot ja siirtymät luodakseen keinutun hakukentän.
Alvin Thong on luonut tämän hakukentän Photoshop-version ja sen voi ladata täältä. Olen yrittänyt luoda tämän hakukentän uudelleen käyttämällä puhdasta CSS3: ta. On huomattava, että kaikki selaimet eivät tue CSS3-ominaisuuksia ja kokeile tätä opetusohjelmaa, sinun pitäisi käyttää jotakin nykyaikaisista selaimista, jotka tukevat CSS 3 -ominaisuuksia.
Valmis? Aloitetaan!
1. HTML5 Doctype
Aloitamme HTML-merkinnällä. Se on hyvin yksinkertainen HTML5 doctype ja meillä on a kutsutaan tunnus #kääre sisällä . Tämä tehdään vain määrittämään sisältölaatikon leveys ja kohdistamaan se sivun keskelle.
Tätä seuraa a Seuraavassa kuvataan, miten koodi näyttää: Luodaksesi lomakkeen ympärille suuren laatikon, lisäämme tyylit Tärkeä koodi tässä on Selitys: Tässä avainsanan sisäpuolella määritetään, onko varjo laatikon sisällä. Kaksi ensimmäistä nollaa ilmaisevat x-offsetin ja y-offsetin ja 3px ilmaisee hämärtymisen. Seuraavaksi on väriilmoitus. Olen käyttänyt rgba-arvoja täällä; rgba on punainen vihreä sininen ja alfa (opasiteetti). Siten sulkeissa olevat neljä arvoa osoittavat punaisen, vihreän, sinisen ja sen alfa (opasiteetti). Huomaat, että 5 varjoilmoitussarjaa on yhdistetty yhteen. Tämä voidaan tehdä erottamalla ne pilkulla. Kaksi ensimmäistä varjoa määrittelevät valkoisen "sisäisen hehkun" vaikutuksen ja seuraavassa ilmoitukset antavat ruudulle sen kiinteän / paksuisen ilmeen. Toista nämä arvot ja ymmärrä, miten se toimii. Nyt kun laatikko on valmis, voit siirtyä syöttökentän muotoiluun. Syöttökentälle ilmoitetut tyylejä ovat melko samanlaisia kuin suurikotelossa Selitys: Huomaat, että tällä kertaa varjohäiriö on pidetty 0: ssa, jotta saadaan terävä varjo ja käytetään pystysuuntaista 5px: n siirtymää. Peräkkäisissä ilmoituksissa hämärtyminen on pidetty 0px: ssä, mutta väri ja y-offset on muutettu. Toista jälleen nämä arvot saadaksesi erilaisia tuloksia. Tehdään tyyli hakupainike. Värien lisäksi hakupainikkeella on pääosin samat tyylit kuin ulkokotelossa. Samalla reunalla on käytetty samanlaisia rajan ja ruudun varjoja. Uusi ominaisuus on Selitys: Vuonna Painikkeen aktiivisessa tilassa on hieman enemmän muutoksia. Tässä olen antanut painikkeelle absoluuttisen ja 5px-arvon. Tämä on tehty antamaan sille luonnollisempi ulkoasu, niin että se tuntuu, että painiketta on todella painettu 5 pikselin verran. Muut aktiiviseen tilaan tehdyt muutokset ovat taustavärin ja varjojen muutoksia. Huomaa, että olen vähentänyt varjojen y-offsetin antamaan sille "puristetun" ilmeen. Tässä on lähetyspainikkeen aktiivisen tilan koodi: Tämä täydentää hakukenttää. Olemme käyttäneet melko paljon uusia CSS3-ominaisuuksia. Tässä on tämän hakukentän täydellinen CSS ja HTML. Toivottavasti nautit tästä opetusohjelmasta. Voit kokeilla näitä ominaisuuksia ja älä unohda jakaa ajatuksiasi. Toimittajan huomautus: Tämä viesti on kirjoittanut Bharani M varten Hongkiat.com. Bharani on suunnittelija / kehittäjä New Delhistä, Intiasta.#main. Tämä tunnus sisältää tyylit, jotka määrittävät suuren valkoisen laatikon syöttökentän ja hakupainikkeen ympärille. Tämä sen sisällä. Lomakkeessa on tekstinsyöttökenttään ja search-painike. Seuraavassa kuvataan, miten lomake näyttää ilman mitään tyylejä. 
CSS3-hakukenttä
2. Rajoituslaatikon luominen
#main. Alla olevasta koodista huomaat, että ruutuun on annettu 400 pikselin leveys ja 50 pikselin korkeus. #main leveys: 400px; korkeus: 50px; tausta: # f2f2f2; pehmuste: 6px 10px; raja: 1px kiinteä # b5b5b5; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,8), upotus 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,8), upotus 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), upotus 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-säde ilmoitus ja box-varjo ilmoituksessa. Pyöristettyjen kulmien luomiseksi olemme käyttäneet CSS3-raja-säteen ilmoitusta, "-moz-" ja "-webkit-" selaimen etuliitteitä sen varmistamiseksi, että tämä toimii gecko- ja webkit-pohjaisissa selaimissa. Laatikon varjoilmoitukset saattavat näyttää hieman hämmentäviltä, mutta se on todella yksinkertainen. box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,8), upotus 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
esikatselu
3. Syöttökentän muotoilu
input [type = "text"] float: vasen; leveys: 230px; pehmuste: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; raja: 1px kiinteä # 999999; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; -moz-box-shadow: upotettu 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: upotettu 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; laatikko-varjo: upotettu 0 5px 0 #ccc, lisäys 0 6px 0 # 989898, upotettu 0 13px 0 #dfdede;
#main. Olemme käyttäneet samaa rajan sädettä (5px). Jälleen kerran on useita kerrosvarjoja. laatikko-varjo: upotettu 0 5px 0 #ccc, lisäys 0 6px 0 # 989898, upotettu 0 13px 0 #dfdede;
esikatselu
4. Lähetä lähetyspainike
input [type = "Submit"]. kiinteä float: left; kohdistin: osoitin; leveys: 130px; pehmuste: 8px 6px; margin-left: 20px; taustaväri: # f8b838; väri: rgba (134, 79, 11, 0,8); tekstimuunnos: isot kirjaimet; font-paino: lihavoitu; raja: 1px kiinteä # 99631d; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; teksti-varjo: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), upotettu 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), upotettu 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), sis. 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-siirtyminen: tausta 0.2s help-out;
text-shadow. teksti-varjo: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
text-shadow Kolme ensimmäistä numeerista arvoa ovat x-offset, y-offset ja hämärtyminen. Rgba-arvot ilmaisevat varjo- väriä. Seuraavassa ilmoitussarjassa (erotettuna pilkulla) y-offsetille annetaan arvo -1. Tämä tehdään tekstin antamiseksi “sisäinen varjo” vaikutus. Lähetä-painikkeen hover / focus-tilassa on erilaisia taustavärin ja varjojen arvoja. esikatselu
"Aktiivinen" -painike
tulo [type = "Submit"]. Kiinteä: aktiivinen tausta: # f6a000; asema: suhteellinen; alkuun: 5px; raja: 1kpl kiinteä # 702d00; -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), sis. 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), sis. 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), upotettu 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Täydellinen (CSS) -koodi
#main leveys: 400px; korkeus: 50px; tausta: # f2f2f2; pehmuste: 6px 10px; raja: 1px kiinteä # b5b5b5; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,8), upotus 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,8), upotus 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), upotus 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: vasen; leveys: 230px; pehmuste: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; raja: 1px kiinteä # 999999; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; -moz-box-shadow: upotettu 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: upotettu 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; laatikko-varjo: upotettu 0 5px 0 #ccc, lisäys 0 6px 0 # 989898, upotettu 0 13px 0 #dfdede; input [type = "Submit"]. kiinteä float: left; kohdistin: osoitin; leveys: 130px; pehmuste: 8px 6px; margin-left: 20px; taustaväri: # f8b838; väri: rgba (134, 79, 11, 0,8); tekstimuunnos: isot kirjaimet; font-paino: lihavoitu; raja: 1px kiinteä # 99631d; -moz-border-säde: 5px; -webkit-border-radius: 5px; raja-säde: 5px; teksti-varjo: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), upotettu 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), upotettu 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), sis. 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-siirtyminen: tausta 0.2s help-out; input [type = "Submit"].: kiinteä: hover, input [type = "Submit"], kiinteä: tarkennus tausta: # ffd842; -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,9), upotus 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,9), sis. 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; laatikko-varjo: upotettu 0 0 3px rgba (255, 255, 255, 0,9), upotettu 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "Submit"]. kiinteä: aktiivinen tausta: # f6a000; asema: suhteellinen; alkuun: 5px; raja: 1kpl kiinteä # 702d00; -moz-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), sis. 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: upotettu 0 0 3px rgba (255, 255, 255, 0,6), sis. 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), upotettu 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
