Oprettelse af en Rocking CSS3 Search Box
CSS3 er næste generations stilarksprog. Det introducerer en masse nye og spændende funktioner som skygger, animationer, overgange, grænseradius osv. Selvom specifikationerne endnu ikke er færdige, har mange browsereproducenter allerede begyndt at støtte mange af de nye funktioner.
I denne tutorial vil vi udforske nogle af disse funktioner som tekst-skygge, border-radius, box-skygger og overgange til at skabe et gyngende søgefelt.
Photoshop-versionen af dette søgefelt blev oprettet af Alvin Thong og kan downloades herfra. Jeg har forsøgt at genskabe dette søgefelt ved hjælp af ren CSS3. Det skal bemærkes, at Ikke alle browsere understøtter CSS3-funktioner og for at prøve denne tutorial bør du bruge en af de moderne browsere, der understøtter CSS 3-funktioner.
Parat? Lad os komme igang!
1. HTML5 Doctype
Vi starter med HTML-markeringen. Det er meget simpelt, efter HTML5 doktype og erklæring, vi har en med et id kaldet #wrapper inde . Dette gøres simpelthen for at definere bredden af indholds boksen og justere den til midten af siden.
Dette efterfølges af en Sådan ser koden ud: For at skabe den store boks omkring formularen tilføjer vi stilarter til Det vigtige stykke kode her er Forklaring: Her angiver søgeordets indsæt, om skyggen vil være inde i boksen. De to første nul angiver x-offset og y-offset og 3px angiver uskarpheden. Næste er farven deklarationen. Jeg har brugt rgba værdier her; rgba står for rødgrøn blå og alfa (opacitet). Således angiver de 4 værdier inde i parentes mængden af rød, grøn, blå og dens alfa (opacitet). Du vil bemærke, at 5 sæt skyggeerklæringer er blevet samlet sammen. Dette kan gøres ved at adskille dem med et komma. De to første skygger definerer den hvide "indre glød" -effekt, og de næste der erklæringer giver boksen sit solide / klare udseende. Spil rundt med disse værdier for at forstå, hvordan det virker. Nu da kassen er færdig, kan vi gå videre til at stylere inputfeltet. De stilarter, der er angivet for indtastningsfeltet, svarer stort set til dem, der er decared til den store boks Forklaring: Du vil bemærke, at denne gang har skyggeudslippet været holdt på 0 for at opnå en skarp skygge, og der anvendes en lodret offset på 5px. I de successive erklæringer er bluret blevet holdt ved 0px, men farven og y-offset er blevet ændret. Igen skal du lege med disse værdier for at opnå forskellige resultater. Lad os stilke søgeknappen. Bortset fra farverne har søgeknappen stort set de samme stilarter som den ydre boks. Tilsvarende knap-radius og bokseskygger er blevet brugt på knappen. Den nye funktion introduceret er Forklaring: I Knappenes aktive tilstand har lidt flere ændringer. I dette har jeg givet knappen en absolut position og en "top" -værdi på 5px. Dette er gjort for at give det et mere naturligt udseende, så det føles, at knappen faktisk er blevet skubbet ned med 5 pixels. Andre ændringer i den aktive tilstand er baggrundsfarve og skygger. Bemærk, at jeg har reduceret y-offset af skyggerne for at give det et "presset ned" udseende. Her er koden for den aktive tilstand på send-knappen: Dette supplerer vores søgefelt. Vi har brugt ganske få af de nye CSS3-funktioner. Her er den komplette CSS og HTML af dette søgefelt. Håber du nød denne tutorial. Du er velkommen til at eksperimentere med disse funktioner, og glem ikke at dele dine tanker. Redaktørens note: Dette indlæg er skrevet af Bharani M til Hongkiat.com. Bharani er designer / udvikler fra New Delhi, Indien.#main. Dette ID indeholder de stilarter, der definerer den store hvide boks omkring indtastningsfeltet og søgeknappen. Dette erklæret inde i den. Formen har tekstindtastningsfelt og search-knap. Sådan ser formularen ud uden nogen stilarter, der er anvendt på den: 
CSS3 søgefelt
2. Oprettelse af grænsekassen
#main. Fra koden vist nedenfor vil du bemærke, at kassen er blevet givet en bredde på 400px og en højde på 50px. #main width: 400px; højde: 50px; baggrund: # f2f2f2; polstring: 6px 10px; grænse: 1px fast # b5b5b5; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-skygge: input 0 0 3px rgba (255, 255, 255, 0,8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: input 0 0 3px rgba (255, 255, 255, 0.8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-radius erklæring og box-shadow erklæring. For at skabe afrundede hjørner har vi brugt CSS3 grænseregistreringsdeklarationen, "-moz- og" -webkit- "browser præfikser er blevet brugt til at sikre, at dette virker i gecko og webkitbaserede browsere. Skyggeerklæringerne kan se lidt forvirrende ud, men det er faktisk meget simpelt. box-shadow: input 0 0 3px rgba (255, 255, 255, 0.8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Eksempel
3. Styling af indtastningsfeltet
input [type = "text"] float: left; bredde: 230px; polstring: 15px 5px 5px 5px; margin-top: 5px; margin-venstre: 3px; grænse: 1px fast # 999999; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; -moz-box-shadow: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede; -webkit-boks-skygge: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede; box-skygge: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede;
#main. Vi har brugt samme grænseradius (5px). Igen er flere box-skygger blevet klubbet. box-skygge: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede;
Eksempel
4. Styling the Submit-knappen
input [type = "submit"]. solid float: left; markør: pointer; bredde: 130px; polstring: 8px 6px; margin-venstre: 20px; baggrundsfarve: # f8b838; farve: rgba (134, 79, 11, 0,8); tekst-transformer: store bogstaver; font-weight: bold; grænse: 1px solid # 99631d; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; tekstskygge: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skygge: input 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: input 0 0 3px rgba (255, 255, 255, 0.6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: baggrund 0.2s udmåling;
tekst-skygge. tekstskygge: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
tekst-skygge de første tre numeriske værdier er x-offset, y-offset og henholdsvis uskarpheden. Rgba værdierne angiver skyggefarven. I det næste sæt af erklæring (adskilt af et komma) er y-offset angivet med en værdi på -1. Dette gøres for at give teksten en “indre skygge” effekt. Indstillingsknappens sving / fokus-tilstand har forskellige værdier af baggrundsfarve og skygger. Eksempel
"Aktiv" tilstand til knap
input [type = "submit"]. solid: aktiv baggrund: # f6a000; stilling: relativ; top: 5px; grænse: 1px solid # 702d00; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0.6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-boks-skygge: indsæt 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; boksskygge: indsæt 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Den komplette (CSS) kode
#main width: 400px; højde: 50px; baggrund: # f2f2f2; polstring: 6px 10px; grænse: 1px fast # b5b5b5; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-skygge: input 0 0 3px rgba (255, 255, 255, 0,8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: input 0 0 3px rgba (255, 255, 255, 0.8), indsæt 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; bredde: 230px; polstring: 15px 5px 5px 5px; margin-top: 5px; margin-venstre: 3px; grænse: 1px fast # 999999; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; -moz-box-shadow: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede; -webkit-boks-skygge: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede; box-skygge: indsæt 0 5px 0 #ccc, indsæt 0 6px 0 # 989898, indsæt 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; markør: pointer; bredde: 130px; polstring: 8px 6px; margin-venstre: 20px; baggrundsfarve: # f8b838; farve: rgba (134, 79, 11, 0,8); tekst-transformer: store bogstaver; font-weight: bold; grænse: 1px solid # 99631d; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; grænse-radius: 5px; tekstskygge: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skygge: input 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: input 0 0 3px rgba (255, 255, 255, 0.6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: baggrund 0.2s udmåling; input [type = "submit"]. solid: svæveord, input [type = "submit"]. solid: fokus baggrund: # ffd842; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0.9), indsæt 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-skygge: input 0 0 3px rgba (255, 255, 255, 0.9), indsæt 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: input 0 0 3px rgba (255, 255, 255, 0.9), indsæt 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: aktiv baggrund: # f6a000; stilling: relativ; top: 5px; grænse: 1px solid # 702d00; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0.6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-boks-skygge: indsæt 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; boksskygge: indsæt 0 0 3px rgba (255, 255, 255, 0,6), indsæt 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
