Kiik CSS3 otsingukasti loomine
CSS3 on järgmise põlvkonna stiilis lehe keel. See tutvustab palju uusi ja põnevaid funktsioone, nagu varjud, animatsioonid, üleminekud, piirirad jne. Kuigi spetsifikatsioone ei ole veel lõpetatud, on paljud brauseritootjad juba alustanud paljude uute funktsioonide toetamist.
Selles juhendis uurime neid funktsioone nagu teksti vari, raadius, kasti varjud ja üleminekud kiikotsinguvälja loomiseks.
Selle otsinguvälja Photoshopi versiooni lõi Alvin Thong ja selle saab alla laadida siit. Olen püüdnud selle otsinguvälja uuesti CSS3 abil uuesti luua. Tuleb märkida, et mitte kõik brauserid ei toeta CSS3 funktsioone ja selle juhendi proovimiseks peaksite kasutama ühte moodsatest brauseritest, mis toetavad CSS 3 funktsioone.
Valmis? Alustame!
1. HTML5 Doctype
Alustame HTML-märgistusega. See on väga lihtne pärast HTML5 doctype ja deklaratsioon, meil on a ID-ga #wrapper sees . Seda tehakse lihtsalt sisukasti laiuse määramiseks ja selle joondamiseks lehe keskele.
Sellele järgneb a Kood näeb välja nagu: Vormi ümber suure kasti loomiseks lisame Oluline kood on siin Selgitus: Siin määrab märksõna sisend, kas vari on kasti sees. Kaks esimest nulli näitavad x-nihet ja y-nihet ning 3px tähistab hägusust. Järgmine on värvi deklaratsioon. Olen siin kasutanud rgba väärtusi; rgba tähistab punast rohelist sinist ja alfa (läbipaistmatus). Seega näitavad sulgudes olevad 4 väärtust punase, rohelise, sinise ja selle alfa (läbipaistmatus) kogust. Te märkate, et 5 vari-deklaratsioonide komplekti on kokku pandud. Seda saab teha eraldades need komaga. Kaks esimest varju määravad valge "sisemise hõõgumise" efekti ja järgmine deklaratsioon annab kastile kindla / paksu väljanägemise. Mängi neid väärtusi, et mõista, kuidas see toimib. Nüüd, kui kast on lõpetatud, saab edasi liikuda sisendvälja kujundamiseks. Sisendiväljale deklareeritud stiilid on üsna sarnased suurkasti jaoks deklareeritud stiilidega Selgitus: Te märkate, et seekord hoitakse varju hägusust 0-ni, et saada terav vari ja kasutatakse vertikaalset 5px nihet. Järjestikustes deklaratsioonides on hägusust hoitud 0px juures, kuid värvi ja y-offsetit on muudetud. Jällegi mängige nende väärtustega, et saada erinevaid tulemusi. Olgem stiilis otsingunuppu. Peale värvide on otsingunupul enamasti samasugused stiilid kui väliskastil. Nupul on kasutatud sarnaseid piiriradasid ja kasti varje. Uus funktsioon on kasutusel Selgitus: In Nupu aktiivsel olekul on veidi rohkem muudatusi. Sellega olen andnud nupule absoluutse ja 5px väärtuse positsiooni. Seda on tehtud selleks, et anda sellele loomulikum väljanägemine, nii et tundub, et nupp on tõesti 5 piksliga alla surutud. Muud aktiivse oleku muutused on taustavärvi ja varjude muutused. Pange tähele, et ma olen vähendanud varjude y-nihet, et anda sellele "pressitud" välimus. Siin on esitamisnupu aktiivse oleku kood: See täiendab meie otsinguvälja. Oleme kasutanud üsna palju uusi CSS3 funktsioone. Siin on selle otsinguvälja täielik CSS ja HTML. Loodan, et teile meeldis see õpetus. Võite proovida neid funktsioone ja ärge unustage oma mõtteid jagada. Toimetaja märkus: See postitus on kirjutatud Bharani M Hongkiat.com jaoks. Bharani on India / New Delhi disainer / arendaja.#main. See ID sisaldab stiile, mis määravad sisendvälja ja otsingunupu ümber suure valge kasti. See selle sees. Vormil on tekstisisestusvälja ja search nuppu. Siin on, kuidas vorm näeb välja ilma igasuguste stiilideta: 
CSS3 otsinguvälja
2. Piirduskasti loomine
#main. Allpool näidatud koodist leiate, et kasti laius on 400 pikslit ja kõrgus 50 px. #main laius: 400px; kõrgus: 50 px; taust: # f2f2f2; polster: 6px 10px; piir: 1px tahke # b5b5b5; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; kast-vari: sisetähis 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
raadius deklaratsioon ja kast-vari deklaratsiooni. Ümardatud nurkade loomiseks oleme kasutanud CSS3 piiri-raadiusdeklaratsiooni, "-moz-" ja "-webkit-" brauseri eesliiteid, et tagada, et see toimib gekko ja veebipõhiste brauserite puhul. Lahtri varjulised deklaratsioonid võivad tunduda natuke segaduses, kuid tegelikult on see väga lihtne. kast-vari: sisetähis 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Eelvaade
3. Sisendvälja kujundamine
sisend [type = "text"] float: vasakul; laius: 230 px; polsterdus: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; piir: 1px tahke # 999999; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; -moz-box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede; -webkit-box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede; box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede;
#main. Oleme kasutanud sama piiri raadiust (5 px). Jällegi on mitu kasti varjundit olnud klubi. box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede;
Eelvaade
4. Saada nupu kujundamine
sisend [type = "Submit"]. tahke float: vasakul; kursor: pointer; laius: 130 px; polsterdus: 8xx 6x; margin-left: 20px; taustavärv: # f8b838; värvus: rgba (134, 79, 11, 0,8); teksti muutmine: suured; fondi kaal: rasvane; piir: 1px tahke # 99631d; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; teksti vari: 0 1px 2xx rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; karp-vari: sisetähis 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-üleminek: taust 0.2s lihtne;
teksti vari. teksti vari: 0 1px 2xx rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9);
teksti vari kolm esimest numbrilist väärtust on vastavalt x-offset, y-offset ja blur. Rgba väärtused näitavad vari värvi. Järgmises deklaratsioonirühmas (eraldatud komaga) antakse y-nihkele väärtus -1. Seda tehakse teksti andmiseks “sisemine vari” mõju. Edastamisnupu hover / fookuse olekus on taustavärvi ja varjude erinevad väärtused. Eelvaade
Nupp "Aktiivne"
sisend [type = "Submit"], tahke: aktiivne taust: # f6a000; positsioon: suhteline; top: 5px; piir: 1px tahke # 702d00; -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; karp-vari: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisetähis 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Täielik (CSS) kood
#main laius: 400px; kõrgus: 50 px; taust: # f2f2f2; polster: 6px 10px; piir: 1px tahke # b5b5b5; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; kast-vari: sisetähis 0 0 3px rgba (255, 255, 255, 0,8), sisend 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; sisend [type = "text"] float: vasakul; laius: 230 px; polsterdus: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; piir: 1px tahke # 999999; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; -moz-box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede; -webkit-box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede; box-shadow: sisend 0 5px 0 #ccc, sisend 0 6px 0 # 989898, sisend 0 13px 0 #dfdede; sisend [type = "Submit"]. tahke float: vasakul; kursor: pointer; laius: 130 px; polsterdus: 8xx 6x; margin-left: 20px; taustavärv: # f8b838; värvus: rgba (134, 79, 11, 0,8); teksti muutmine: suured; fondi kaal: rasvane; piir: 1px tahke # 99631d; -moz-border-radius: 5 px; -webkit-border-radius: 5px; raadius: 5 px; teksti vari: 0 1px 2xx rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; karp-vari: sisetähis 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-üleminek: taust 0.2s lihtne; sisend [type = "Submit"], tahke: hover, sisend [type = "Submit"], tahke: fookus taust: # ffd842; -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,9), sisend 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,9), sisend 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: sisetähis 0 0 3px rgba (255, 255, 255, 0,9), sisetähis 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; sisend [type = "Submit"]. tahke: aktiivne taust: # f6a000; positsioon: suhteline; top: 5px; piir: 1px tahke # 702d00; -moz-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisend 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; karp-vari: sisend 0 0 3px rgba (255, 255, 255, 0,6), sisetähis 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
