Stvaranje Rocking CSS3 okvira za pretraživanje
CSS3 je jezik stila sljedeće generacije. Predstavlja mnogo novih i uzbudljivih značajki kao što su sjene, animacije, prijelazi, radijusi granica itd. Iako specifikacije još nisu dovršene, mnogi proizvođači preglednika već su počeli podržavati mnoge nove značajke..
U ovom vodiču istražit ćemo neke od tih značajki text-shadow, granica-radijus, box-sjene i prijelazi za stvaranje polja za pretraživanje.
Photoshop verziju ovog polja za pretraživanje stvorio je Alvin Thong i može se preuzeti ovdje. Pokušao sam ponovno stvoriti ovo polje za pretraživanje pomoću čistog CSS3. Treba napomenuti da ne podržavaju svi preglednici značajke CSS3 i da biste isprobali ovaj vodič, trebali biste koristiti jedan od modernih preglednika koji podržavaju značajke CSS 3.
Spreman? Započnimo!
1. HTML5 Doctype
Započet ćemo s HTML oznakom. Vrlo je jednostavno, nakon HTML5 doctype i deklaracije, imamo a s ID-om #omot u . To se radi jednostavno za definiranje širine okvira sadržaja i za poravnanje s centrom stranice.
Nakon toga slijedi a Evo kako izgleda kod: Da biste stvorili veliki okvir oko obrasca, dodavat ćemo stilove u Važan dio koda ovdje je Obrazloženje: Ovdje ključna riječ inset određuje hoće li sjena biti unutar okvira. Prva dva nula označavaju x-offset i y-offset, a 3px označava zamućenje. Sljedeća je deklaracija o boji. Ovdje sam koristio vrijednosti rgba; rgba označava crveno zeleno plavo i alfa (neprozirnost). Tako 4 vrijednosti u zagradama označavaju količinu crvene, zelene, plave i njezine alfa (neprozirnosti). Primijetit ćete da je 5 skupova deklaracija u sjeni skupljeno. To se može učiniti razdvajanjem zarezom. Prve dvije sjene definiraju efekt bijelog "unutarnjeg sjaja", a sljedeće deklaracije daje kutiji njegov čvrst / krupan izgled. Igrajte se s tim vrijednostima da biste razumjeli kako funkcionira. Sada kada je okvir dovršen, prijeđimo na styling polja za unos. Stilovi deklarirani za polje za unos prilično su slični onima koji su dekered za veliku kutiju Obrazloženje: Primijetit ćete da je ovaj put zamućenje u sjeni zadržano na 0 kako bi se dobila oštra sjena i koristi se vertikalni ofset od 5px. U uzastopnim izjavama, zamućenje je zadržano na 0px, ali su boja i y-offset promijenjeni. Opet, zaigrajte se s tim vrijednostima kako biste dobili različite rezultate. Postavimo gumb za pretraživanje. Osim boja, gumb za pretraživanje ima uglavnom iste stilove kao i stil vanjskog okvira. Na gumbu su korišteni slični radijusi granica i kutije. Nova značajka uvedena je Obrazloženje: U Aktivno stanje gumba ima malo više promjena. U ovome sam gumb dao poziciju apsolutne i 'top' vrijednosti od 5px. To je učinjeno kako bi se dobio prirodniji izgled, tako da se osjeća da je gumb zapravo pritisnut za 5 piksela. Ostale promjene aktivnog stanja su boje pozadine i sjene. Primijetite da sam smanjio y-offset sjena kako bih mu dao "pritisnut-dolje" izgled. Ovdje je kôd za aktivno stanje gumba za slanje: Time je dovršeno naše polje za pretraživanje. Koristili smo dosta novih CSS3 značajki. Ovdje je cjelokupni CSS i HTML ovog polja za pretraživanje. Nadam se da ste uživali u ovom tutorialu. Slobodno eksperimentirajte s ovim značajkama i ne zaboravite podijeliti svoje misli. Napomena urednika: Ovaj post je napisao / la Bharani M za Hongkiat.com. Bharani je dizajner / programer iz New Delhija, Indija.#glavni. Ovaj ID sadrži stilove koji definiraju veliki bijeli okvir oko polja za unos i gumb za pretraživanje. Ovaj proglašen unutar njega. Obrazac ima polje za unos teksta i search gumb. Ovako izgleda obrazac bez ikakvih stilova na njega: 
CSS3 polje za pretraživanje
2. Stvaranje okvira za ograničavanje
#glavni. Iz donjeg kôda primijetit ćete da je okvir dobio širinu od 400px i visinu od 50px. #main width: 400px; visina: 50px; pozadina: # f2f2f2; obloga: 6px 10px; granica: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
granica-radijus deklaracije i kutija-sjena deklaracija. Za stvaranje zaobljenih kutova, koristili smo CSS3 deklaraciju granice-radijusa, "-moz-" i "-webkit-" prefiksi preglednika koji su korišteni kako bi se osiguralo da to radi u preglednicima na bazi gecko i webkit. Deklaracije kutija u sjeni mogu izgledati pomalo zbunjujuće, ali zapravo su vrlo jednostavne. box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
pregled
3. Stiliziranje polja za unos
input [type = "text"] float: lijevo; širina: 230px; obloga: 15px 5px 5px 5px; margina-gore: 5px; margin-left: 3px; granica: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; -moz-box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede; -webkit-box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede; box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede;
#glavni. Koristili smo isti radijus obruba (5px). Opet, višestruke kutije sjenki su izbačene. box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede;
pregled
4. Stiliziranje gumba za slanje
input [type = "submit"] solid float: lijevo; pokazivač: pokazivač; širina: 130px; obloga: 8px 6px; margin-left: 20px; pozadinska boja: # f8b838; boja: rgba (134, 79, 11, 0.8); transformacija teksta: velika slova; font-weight: bold; granica: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; tekst-sjena: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.6), umetak 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-prijelaz: pozadina 0.2s olakšava se;
text-shadow. tekst-sjena: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow Deklaracija, prve tri numeričke vrijednosti su x-offset, y-offset i zamućenje. Vrijednosti rgba označavaju boju sjene. U sljedećem skupu deklaracije (odvojeno zarezom), y-offset dobiva vrijednost -1. To je učinjeno kako bi se tekstu dao “unutarnja sjena” posljedica. Stanje lebdjenja / fokusa gumba za slanje ima različite vrijednosti boje pozadine i sjena. pregled
"Aktivno" stanje za gumb
input [type = "submit"] solid: active pozadina: # f6a000; pozicija: relativna; vrh: 5px; granica: 1px solid # 702d00; -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Kompletan (CSS) kod
#main width: 400px; visina: 50px; pozadina: # f2f2f2; obloga: 6px 10px; granica: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.8), umetak 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: lijevo; širina: 230px; obloga: 15px 5px 5px 5px; margina-gore: 5px; margin-left: 3px; granica: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; -moz-box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede; -webkit-box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede; box-shadow: umetak 0 5px 0 #ccc, umetak 0 6px 0 # 989898, umetak 0 13px 0 #dfdede; input [type = "submit"] solid float: lijevo; pokazivač: pokazivač; širina: 130px; obloga: 8px 6px; margin-left: 20px; pozadinska boja: # f8b838; boja: rgba (134, 79, 11, 0.8); transformacija teksta: velika slova; font-weight: bold; granica: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; granični polumjer: 5px; tekst-sjena: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.6), umetak 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-prijelaz: pozadina 0.2s olakšava se; input [type = "submit"] solid: hover, input [type = "submit"] solid: focus pozadina: # ffd842; -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.9), umetak 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0.9), umetak 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; kutija-sjena: umetak 0 0 3px rgba (255, 255, 255, 0.9), umetanje 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"] solid: active pozadina: # f6a000; pozicija: relativna; vrh: 5px; granica: 1px solid # 702d00; -moz-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: umetak 0 0 3px rgba (255, 255, 255, 0,6), umetak 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
