Radošā CSS3 meklēšanas lodziņa izveide
CSS3 ir nākamās paaudzes stila lapas valoda. Tā ievieš daudz jaunas un aizraujošas funkcijas, piemēram, ēnas, animācijas, pārejas, robežu rādiusus utt. Lai gan specifikācijas vēl nav pabeigtas, daudzi pārlūkprogrammu ražotāji jau ir sākuši atbalstīt daudzas jaunas funkcijas.
Šajā apmācībā mēs izpētīsim dažas no šīm funkcijām, piemēram, teksta ēna, robežu rādiuss, kastes ēnas un pārejas, lai izveidotu šūpošanas meklēšanas lauku.
Šīs meklēšanas lauka Photoshop versiju izveidoja Alvin Thong, un to var lejupielādēt no šejienes. Esmu mēģinājis atjaunot šo meklēšanas lauku, izmantojot tīru CSS3. Jāatzīmē, ka ne visas pārlūkprogrammas atbalsta CSS3 funkcijas un, lai izmēģinātu šo pamācību, jāizmanto viena no mūsdienu pārlūkprogrammām, kas atbalsta CSS 3 funkcijas.
Vai esat gatavs? Sāksim!
1. HTML5 Doctype
Mēs sāksim ar HTML atzīmi. Tas ir ļoti vienkāršs pēc HTML5 doctype un mums ir a ar ID sauc #wrapper iekšā . Tas tiek darīts, lai definētu satura lodziņa platumu un saskaņotu to ar lapas centru.
Tam seko a Tālāk ir norādīts, kā šis kods izskatās: Lai izveidotu lielo lodziņu ap veidlapu, mēs pievienosim stilus Svarīgs kods šeit ir Paskaidrojums: Šeit atslēgvārdu ielikšana norāda, vai ēna būs kastes iekšpusē. Pirmie divi nullei norāda x-nobīdes un y-nobīdes, un 3px norāda uz izplūšanu. Tālāk ir krāsu deklarācija. Es šeit izmantoju rgba vērtības; rgba apzīmē sarkano zaļo zilo un alfa (dūmainību). Tādējādi 4 vērtības iekavās norāda sarkano, zaļo, zilo un tā alfa (dūmainības) daudzumu. Jūs pamanīsiet, ka 5 ēnu deklarāciju kopas ir apvienotas kopā. To var izdarīt, atdalot tos ar komatu. Pirmās divas ēnas definē balto "iekšējo mirdzumu" efektu, un nākamā deklarācija dod kastei savu cieto / lielo izskatu. Spēlējiet apkārt ar šīm vērtībām, lai saprastu, kā tā darbojas. Tagad, kad kaste ir pabeigta, dodieties uz ievades lauka veidošanu. Ievades laukam deklarētie stili ir diezgan līdzīgi tiem, kas atdoti lielajam lodziņam Paskaidrojums: Jūs ievērosiet, ka šoreiz ēnu izplūšana ir saglabāta 0, lai iegūtu asu ēnu, un tiek izmantots vertikāls 5px nobīde. Secīgajās deklarācijās izplūdums ir saglabāts 0px, bet krāsa un y-nobīde ir mainīta. Atkal, spēlējiet apkārt ar šīm vērtībām, lai iegūtu dažādus rezultātus. Stimulēsim meklēšanas pogu. Izņemot krāsas, meklēšanas pogai galvenokārt ir tādi paši stili kā ārējam lodziņam. Uz pogas ir izmantoti līdzīgi robežu rādījumi un kastes ēnas. Jaunā iezīme ir ieviesta Paskaidrojums: Iekš Pogas aktīvajam stāvoklim ir nedaudz vairāk izmaiņu. Šajā gadījumā man ir dota poga absolūtā un “top” 5px vērtība. Tas tika darīts, lai piešķirtu tai dabiskāku izskatu, tā, ka tā uzskata, ka poga ir faktiski nospiesta par 5 pikseļiem. Citas izmaiņas aktīvajā stāvoklī ir fona krāsas un ēnu izmaiņas. Ievērojiet, ka esmu samazinājis ēnu y-nobīdes, lai dotu tai izspiestu izskatu. Šeit ir iesniegšanas pogas aktīvā stāvokļa kods: Tas papildina meklēšanas lauku. Mēs esam izmantojuši diezgan daudz jaunu CSS3 funkciju. Šeit ir pilns šīs meklēšanas lauka CSS un HTML. Ceru, ka jums patika šī apmācība. Jūtieties brīvi eksperimentēt ar šīm funkcijām un neaizmirstiet dalīties savās domās. Redaktora piezīme: Šo ziņu raksta Bharani M par Hongkiat.com. Bharani ir dizainers / attīstītājs no Ņūdeli, Indijā.#main. Šajā ID ir stili, kas nosaka lielo balto lodziņu ap ievades lauku un meklēšanas pogu. Tas iekšpusē. Veidlapā ir teksta ievades lauku un search poga. Lūk, kā veidlapa izskatās bez jebkādiem stiliem, kas tam piemēroti: 
CSS3 meklēšanas lauks
2. Ierobežojošā lodziņa izveide
#main. No zemāk redzamā koda jūs pamanīsiet, ka lodziņam ir piešķirts 400x platums un 50px augstums. #main platums: 400px; augstums: 50px; fons: # f2f2f2; polsterējums: 6px 10px; robeža: 1px cietais # b5b5b5; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; kastes ēna: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
robežu rādiuss deklarācija un kastes ēna deklarāciju. Lai izveidotu noapaļotus stūri, mēs esam izmantojuši CSS3 robežu rādiusa deklarāciju, "-moz-" un "-webkit-" pārlūkprogrammas prefiksu, lai nodrošinātu, ka tas darbojas pārlūkprogrammās, kas balstītas uz gekko un webkit. Kastes ēnu deklarācijas var izskatīties mazliet mulsinošas, bet patiesībā tas ir ļoti vienkāršs. kastes ēna: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Priekšskatījums
3. Ievades lauka veidošana
ievade [type = "text"] float: pa kreisi; platums: 230px; polsterējums: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; robeža: 1px cietais # 999999; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; -moz-box-shadow: ielikt 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede; -webkit-box-shadow: ielikt 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede; box-shadow: ieliktnis 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede;
#main. Mēs esam izmantojuši to pašu robežu rādiusu (5px). Atkal, vairākas kastes ēnas ir bijušas kluba. box-shadow: ieliktnis 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede;
Priekšskatījums
4. Iesniegšanas pogas noformēšana
ievade [type = "Submit"]. cietais float: left; kursors: rādītājs; platums: 130px; polsterējums: 8px 6px; margas pa kreisi: 20px; fona krāsa: # f8b838; krāsa: rgba (134, 79, 11, 0,8); teksta pārveidošana: lielie burti; font-weight: bold; robeža: 1px cietais # 99631d; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; teksta ēna: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: ieliktnis 0 0 3px rgba (255, 255, 255, 0,6), ieliktnis 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # kopija; -webkit pāreja: fons 0.2s vieglumu;
teksta ēna. teksta ēna: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
teksta ēna pirmās trīs skaitliskās vērtības ir attiecīgi x-offset, y-offset un blur. Rgba vērtības norāda ēnu krāsu. Nākamajā deklarāciju kopā (atdalot ar komatu), y-nobīdei tiek piešķirta vērtība -1. Tas tiek darīts, lai dotu tekstu a “iekšējā ēna” efektu. Iesniegšanas pogas lidojuma / fokusa stāvoklim ir dažādas fona krāsas un ēnu vērtības. Priekšskatījums
"Aktīvā" stāvokļa poga
ievade [type = "Submit"]. cietais: aktīvais fons: # f6a000; pozīcija: relatīvais; tops: 5px; robeža: 1px cietais # 702d00; -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: ieliktnis 0 0 3px rgba (255, 255, 255, 0,6), ieliktnis 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # kopija;
Pilns (CSS) kods
#main platums: 400px; augstums: 50px; fons: # f2f2f2; polsterējums: 6px 10px; robeža: 1px cietais # b5b5b5; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; kastes ēna: ielikt 0 0 3px rgba (255, 255, 255, 0,8), ielikt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; ievade [type = "text"] float: pa kreisi; platums: 230px; polsterējums: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; robeža: 1px cietais # 999999; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; -moz-box-shadow: ielikt 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede; -webkit-box-shadow: ielikt 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede; box-shadow: ieliktnis 0 5px 0 #ccc, ielikt 0 6px 0 # 989898, ielikt 0 13px 0 #dfdede; ievade [type = "Submit"]. cietais float: left; kursors: rādītājs; platums: 130px; polsterējums: 8px 6px; margas pa kreisi: 20px; fona krāsa: # f8b838; krāsa: rgba (134, 79, 11, 0,8); teksta pārveidošana: lielie burti; font-weight: bold; robeža: 1px cietais # 99631d; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; teksta ēna: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: ieliktnis 0 0 3px rgba (255, 255, 255, 0,6), ieliktnis 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # 593a11, 0 13px 0 # kopija; -webkit pāreja: fons 0.2s vieglumu; ievade [type = "Submit"] .. cietais: lidināties, ievadi [type = "Submit"]. cietais: fokuss fons: # ffd842; -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,9), ielikt 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,9), ielikt 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: ieliktnis 0 0 3px rgba (255, 255, 255, 0,9), ielikt 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # kopija; ievade [type = "Submit"]. cietais: aktīvais fons: # f6a000; pozīcija: relatīvais; tops: 5px; robeža: 1px cietais # 702d00; -moz-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: ielikt 0 0 3px rgba (255, 255, 255, 0,6), ielikt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: ieliktnis 0 0 3px rgba (255, 255, 255, 0,6), ieliktnis 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # kopija;
