Skapa en Rocking CSS3 sökruta
CSS3 är nästa generations stilarksspråk. Det introducerar många nya och spännande funktioner som skuggor, animationer, övergångar, gränser etc. Även om specifikationerna inte har slutförts ännu har många webbläsare redan börjat stödja många av de nya funktionerna.
I denna handledning kommer vi att utforska några av dessa funktioner som text-shadow, border-radius, box-skuggor och övergångar för att skapa ett gungande sökfält.
Photoshop-versionen av detta sökfält skapades av Alvin Thong och kan hämtas härifrån. Jag har försökt att återskapa detta sökfält med ren CSS3. Det ska noteras att inte alla webbläsare stöder CSS3-funktioner och för att prova den här handledningen bör du använda en av de moderna webbläsare som stöder CSS 3-funktioner.
Redo? Låt oss börja!
1. HTML5 Doctype
Vi börjar med HTML-märkningen. Det är väldigt enkelt, efter HTML5 doctype och deklaration, vi har en med ett ID kallat #omslag inuti . Detta görs enkelt för att definiera bredden på innehållsrutan och justera den till mitten av sidan.
Detta följs av a Så här ser koden ut: För att skapa den stora rutan runt formuläret lägger vi till stilar till Den viktiga delen av koden här är Förklaring: Här anger sökordsinställningen om skuggan kommer att vara inuti lådan. De två första nollarna anger x-offset och y-offset och 3px indikerar oskärpa. Nästa är färgdeklarationen. Jag har använt rgba värden här; rgba står för röd grönblå och alfa (opacitet). Således anger de fyra värdena inom parentes mängden rött, grönt, blått och dess alfa (opacitet). Du kommer att märka att 5 uppsättningar av skuggförklaringar har klubbats ihop. Detta kan göras genom att separera dem med ett komma. De två första skuggorna definierar den vita "inre glöd" -effekten och de närmaste deklarationerna ger lådan sitt solida / klumpiga utseende. Spela runt med dessa värden för att förstå hur det fungerar. Nu när lådan är klar kan vi fortsätta att ställa in inmatningsfältet. De stilar som deklarerats för inmatningsfältet är ungefär som de som är avskräckta för den stora låda Förklaring: Du kommer att märka att den här gången har skuggrosörningen hållits vid 0 för att få en skarp skugga och en vertikal offset på 5px används. I de successiva deklarationerna har oskärpet hållits vid 0px men färgen och y-offset har ändrats. Återigen, leka med dessa värden för att få olika resultat. Låt oss utforma sökknappen. Bortsett från färgerna har sökknappen oftast samma stilar som den yttre rutan. Liknande gränslinjer och boxskuggor har använts på knappen. Den nya funktionen som introduceras är Förklaring: I Knappens aktiva läge har lite fler ändringar. I detta har jag givit knappen en absolut position och ett "topp" -värde på 5px. Detta har gjorts för att ge det en mer naturlig look, så att den känner att knappen faktiskt har tryckts ner med 5 pixlar. Andra ändringar i det aktiva läget är bakgrundsfärg och skuggor. Lägg märke till att jag har reducerat skuggans y-offset för att ge det ett "nedtryckt" utseende. Här är koden för det aktiva läget för Skicka-knappen: Detta fyller i vårt sökfält. Vi har använt ett flertal av de nya CSS3-funktionerna. Här är den fullständiga CSS och HTML i det här sökfältet. Hoppas du njöt av denna handledning. Gärna experimentera med dessa funktioner och glöm inte att dela med dig av dina tankar. Redaktörens anteckning: Det här inlägget är skrivet av Bharani M för Hongkiat.com. Bharani är en designer / utvecklare från New Delhi, Indien.#main. Detta ID innehåller de stilar som definierar den stora vita rutan runt inmatningsfältet och sökknappen. Detta deklareras inuti den. Formen har textinmatningsfältet och search-knappen. Så här ser formuläret ut utan några stilar som tillämpas på det: 
CSS3 sökfält
2. Skapa gränsen
#main. Från koden som visas nedan märker du att lådan har fått en bredd på 400px och en höjd på 50px. #main width: 400px; höjd: 50px; bakgrund: # f2f2f2; vaddering: 6px 10px; gräns: 1px fast # b5b5b5; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-skugga: inmatning 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-radius deklarationen och box-shadow deklaration. För att skapa avrundade hörn har vi använt CSS3 gränsenradiusdeklarationen, "-moz-" och "-webkit-" webbläsarprefix har använts för att säkerställa att detta fungerar i webbläsare med webb-och webbkit. Boxskuggdeklarationerna kan se lite förvirrande ut, men det är faktiskt väldigt enkelt. box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Förhandsvisning
3. Stil inmatningsfältet
input [typ = "text"] float: left; bredd: 230px; vaddering: 15px 5px 5px 5px; marginal-topp: 5px; marginal-vänster: 3px; gränsen: 1px fast # 999999; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; -moz-box-skugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-skugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; boxskugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
#main. Vi har använt samma gränsenradie (5px). Återigen har flera boxskuggor varit klubbade. boxskugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
Förhandsvisning
4. Styling the Submit-knappen
input [typ = "submit"]. solid float: left; markör: pekare; bredd: 130px; vaddering: 8px 6px; marginal-vänster: 20px; bakgrundsfärg: # f8b838; färg: rgba (134, 79, 11, 0,8); text-transform: stor bokstav; font-weight: bold; gränsen: 1px solid # 99631d; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; textskugga: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-övergång: bakgrund 0.2s uthyrning;
text-shadow. textskugga: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9);
text-shadow de första tre numeriska värdena är x-offset, y-offset respektive oskärpa. Rgba-värdena indikerar skuggfärgen. I nästa uppsättning deklaration (separerad av ett kommatecken) ges y-offset ett värde på -1. Detta görs för att ge texten en “inre skugga” effekt. Huvud- / fokusläget för Skicka-knappen har olika värden för bakgrundsfärg och skuggor. Förhandsvisning
"Aktiv" status för knapp
input [typ = "submit"]. solid: aktiv bakgrund: # f6a000; position: relativ; topp: 5px; gräns: 1px fast # 702d00; -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Den fullständiga (CSS) -koden
#main width: 400px; höjd: 50px; bakgrund: # f2f2f2; vaddering: 6px 10px; gräns: 1px fast # b5b5b5; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-skugga: inmatning 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; inmatning [typ = "text"] float: left; bredd: 230px; vaddering: 15px 5px 5px 5px; marginal-topp: 5px; marginal-vänster: 3px; gränsen: 1px fast # 999999; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; -moz-box-skugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-skugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; boxskugga: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; input [typ = "submit"]. solid float: left; markör: pekare; bredd: 130px; vaddering: 8px 6px; marginal-vänster: 20px; bakgrundsfärg: # f8b838; färg: rgba (134, 79, 11, 0,8); text-transform: stor bokstav; font-weight: bold; gränsen: 1px solid # 99631d; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; textskugga: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-övergång: bakgrund 0.2s uthyrning; inmatning [typ = "submit"]. solid: sväng, inmatning [typ = "submit"]. solid: fokus bakgrund: # ffd842; -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,9), inset 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,9), inset 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [typ = "submit"]. solid: aktiv bakgrund: # f6a000; position: relativ; topp: 5px; gräns: 1px fast # 702d00; -moz-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-skugga: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
