Opprette en Rocking CSS3 Search Box
CSS3 er neste generasjons stilarksspråk. Det introduserer mange nye og spennende funksjoner som skygger, animasjoner, overganger, grensestråle etc. Selv om spesifikasjonene ikke er ferdigstilt ennå, har mange nettlesere allerede startet å støtte mange av de nye funksjonene.
I denne opplæringen vil vi utforske noen av disse funksjonene som text-shadow, border-radius, box-skygger og overganger for å lage et søkefelt for gyngende.
Photoshop-versjonen av dette søkefeltet ble opprettet av Alvin Thong og kan lastes ned herfra. Jeg har forsøkt å gjenskape dette søkefeltet ved hjelp av ren CSS3. Det skal bemerkes at Ikke alle nettlesere støtter CSS3-funksjoner og å prøve ut denne opplæringen, bør du bruke en av de moderne nettleserne som støtter CSS 3-funksjoner.
Klar? La oss komme i gang!
1. HTML5 Doctype
Vi starter med HTML-oppslaget. Det er veldig enkelt, etter HTML5 doktype og erklæring, vi har a med en ID kalt #wrapper innsiden . Dette gjøres enkelt for å definere bredden på innholdsruten og justere den til midten av siden.
Dette etterfølges av en Slik ser koden ut: For å lage den store boksen rundt skjemaet, vil vi legge til stiler til Det viktige koden her er Forklaring: Her angir søkeordinnsatsen om skyggen vil være inne i boksen. De to første nullene angir x-offset og y-offset og 3px indikerer uskarphet. Neste er fargedeklarasjonen. Jeg har brukt rgba verdier her; rgba står for rødgrønn blå og alfa (opasitet). Dermed angir de 4 verdiene inne i parentes mengden rød, grønn, blå og alfa (opasitet). Du vil legge merke til at 5 sett med skyggedeklarasjoner har blitt klumpet sammen. Dette kan gjøres ved å skille dem med komma. De to første skyggene definerer den hvite "indre glød" -effekten og de neste erklæringene gir boksen sitt solide / klumpete utseende. Spill rundt med disse verdiene for å forstå hvordan det fungerer. Nå som boksen er ferdig, kan vi fortsette å stylere inntastingsfeltet. Stilene som er deklarert for inngangsfeltet, er ganske lik de dekkede for den store boksen Forklaring: Du vil legge merke til at denne gangen har skyggeløsningen blitt holdt på 0 for å oppnå en skarp skygge og en vertikal offset på 5px blir brukt. I de påfølgende erklæringene har uskarpheten blitt holdt på 0px, men fargen og y-offset er endret. Igjen, lek med disse verdiene for å oppnå forskjellige resultater. La oss utforme søkeknappen. Bortsett fra fargene har søkeknappen for det meste de samme stilene som den ytre boksen. Lignende radiusradius og bokseskygger har blitt brukt på knappen. Den nye funksjonen introdusert er Forklaring: I Den aktive tilstanden til knappen har litt flere endringer. I dette har jeg gitt knappen en absolutt posisjon og en "topp" verdi på 5px. Dette har blitt gjort for å gi det et mer naturlig utseende, slik at det føles at knappen faktisk har blitt trykket ned med 5 piksler. Andre endringer i den aktive tilstanden er for bakgrunnsfarge og skygger. Legg merke til at jeg har redusert y-offset av skyggene for å gi det et "presset ned" utseende. Her er koden for den aktive tilstanden til send-knappen: Dette fullfører vårt søkefelt. Vi har brukt ganske mange av de nye CSS3-funksjonene. Her er den komplette CSS og HTML av dette søkefeltet. Håper du likte denne opplæringen. Prøv å eksperimentere med disse funksjonene og ikke glem å dele tankene dine. Redaktørens notat: Dette innlegget er skrevet av Bharani M for Hongkiat.com. Bharani er en designer / utvikler fra New Delhi, India.#hoved. Denne ID-en inneholder stilene som definerer den store hvite boksen rundt inntastingsfeltet og søkeknappen. Dette erklært i den. Skjemaet har tekstfelt og search-knappen. Her ser du hvordan skjemaet ser ut uten noen stiler som er brukt på det: 
CSS3 søkefelt
2. Opprette grenseboksen
#hoved. Fra koden som vises nedenfor, vil du legge merke til at esken har fått en bredde på 400px og en høyde på 50px. #main width: 400px; høyde: 50px; bakgrunn: # f2f2f2; polstring: 6px 10px; grense: 1px solid # b5b5b5; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,8), innsett 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,8), innsett 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,8), innsett 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 å opprette avrundede hjørner har vi brukt CSS3-grenseradio-deklarasjonen, "-moz- og" -webkit- "nettleserprefikser har blitt brukt for å sikre at dette fungerer i gecko- og webkitbaserte nettlesere. Boksskyggedeklarasjonene kan se litt forvirrende ut, men det er faktisk veldig enkelt. boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,8), innsett 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Forhåndsvisning
3. Stil innfeltfeltet
input [type = "text"] float: left; bredde: 230px; polstring: 15px 5px 5px 5px; margin-topp: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede; boks-skygge: innspill 0 5px 0 #ccc, innspill 0 6px 0 # 989898, innspill 0 13px 0 #dfdede;
#hoved. Vi har brukt samme grense radius (5px). Igjen har flere boksskygger blitt klumpet. boks-skygge: innspill 0 5px 0 #ccc, innspill 0 6px 0 # 989898, innspill 0 13px 0 #dfdede;
Forhåndsvisning
4. Styling the Submit-knappen
input [type = "submit"]. solid float: left; markør: pointer; bredde: 130px; polstring: 8px 6px; margin-venstre: 20px; bakgrunnsfarge: # f8b838; farge: rgba (134, 79, 11, 0,8); tekst-transformer: store bokstaver; font-weight: bold; grense: 1px solid # 99631d; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-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), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: bakgrunn 0.2s utelukkelse;
text-shadow. tekstskygge: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
text-shadow de tre første tallverdiene er x-offset, y-offset og henholdsvis uskarphet. Rgba-verdiene indikerer skyggenfarge. I det neste settet av deklarasjon (separert med et komma) blir y-offset gitt til en verdi på -1. Dette er gjort for å gi teksten en “indre skygge” effekt. Hovgeren / fokustilstanden til Submit-knappen har forskjellige verdier av bakgrunnsfarge og skygger. Forhåndsvisning
"Aktiv" tilstand for knapp
input [type = "submit"]. solid: aktiv bakgrunn: # f6a000; posisjon: relativ; topp: 5px; border: 1px solid # 702d00; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Den komplette (CSS) koden
#main width: 400px; høyde: 50px; bakgrunn: # f2f2f2; polstring: 6px 10px; grense: 1px solid # b5b5b5; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,8), innsett 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,8), innsett 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,8), innsett 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-topp: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede; boks-skygge: innspill 0 5px 0 #ccc, innspill 0 6px 0 # 989898, innspill 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; markør: pointer; bredde: 130px; polstring: 8px 6px; margin-venstre: 20px; bakgrunnsfarge: # f8b838; farge: rgba (134, 79, 11, 0,8); tekst-transformer: store bokstaver; font-weight: bold; grense: 1px solid # 99631d; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-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), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: bakgrunn 0.2s utelukkelse; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: fokus bakgrunn: # ffd842; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,9), innsett 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,9), innsett 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0.9), innsett 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 bakgrunn: # f6a000; posisjon: relativ; topp: 5px; border: 1px solid # 702d00; -moz-box-shadow: input 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-boks-skygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; boksskygge: innsett 0 0 3px rgba (255, 255, 255, 0,6), innsett 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
