Paradis For Designere Og Utviklere

Opprette en Rocking CSS3 Search Box

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

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 ferdig ennå, har mange nettlesere allerede begynt å støtte mange av de nye funksjonene.

I denne opplæringen vil vi undersøke noen av disse funksjonene som text-shadow, border-radius, box-shadows og overganger for å lage et søkefelt for rocking.

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 for å 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 som heter #wrapper inne . Dette gjøres enkelt for å definere bredden på innholdsruten og justere den til midten av siden.

Dette etterfølges av en

med en ID kalt #main . Denne ID-en inneholder stilene som definerer den store hvite boksen rundt inntastingsfeltet og søkeknappen. Dette

har en

erklært i den. Skjemaet har tekstfelt og s earch-knappen. Her ser du hvordan skjemaet ser ut uten noen stiler som er brukt på det:

Slik ser koden ut:

 CSS3 søkefelt  CSS3 søkefelt

2. Opprette grenseboksen

For å lage den store boksen rundt skjemaet, vil vi legge til stiler til

med ID #main . Fra koden som vises nedenfor, vil du legge merke til at boksen 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; }

Det viktige koden her er border-radius radiusdeklarasjonen og boksskyggedeklarasjonen. For å opprette avrundede hjørner har vi brukt CSS3-grensesnittdeklarasjonen, "-moz-" og "-webkit-" nettleserprefiksene har blitt brukt til å sikre at dette fungerer i gecko- og webkitbaserte nettlesere. Bokskyggedeklarasjonene 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;

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). Således 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.

Forhåndsvisning

3. Stil innfeltfeltet

Nå som boksen er ferdig, kan vi fortsette å utforme inngangsfeltet.

 input [type = "text"] {float: left; bredde: 230px; polstring: 15px 5px 5px 5px; margin-topp: 5px; margin-venstre: 3px; grense: 1px solid # 999999; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-box-shadow: input 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innstikk 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innstikk 0 13px 0 #dfdede; boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede; }

Stilene deklarert for inntastingsfeltet, er ganske lik de dekkede for den store boksen #main . Vi har brukt samme grense radius (5px). Igjen har flere boksskygger blitt klumpet.

 boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 0 13px 0 #dfdede;

Forklaring: Du vil merke 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 etterfø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.

Forhåndsvisning

4. Styling the Submit-knappen

La oss utforme søkeknappen.

 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; }

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 som presenteres er text-shadow .

 tekstskygge: 0 1px 2px rgba (255, 255, 255, 0, 7), 0 -1px 0 rgba (64, 38, 5, 0, 9);

Forklaring: I text-shadow er de tre første tallverdiene x-offset, y-offset og henholdsvis uskarphet. Rgba-verdiene indikerer skyggenfarge. I det neste settet av deklarasjon (adskilt av 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

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 "nedtrykket" utseende. Her er koden for den aktive tilstanden til send-knappen:

 input [type = "submit"]. solid: aktiv {bakgrunn: # f6a000; stilling: relativ; topp: 5px; grense: 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

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.

 #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-venstre: 3px; grense: 1px solid # 999999; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; -moz-box-shadow: input 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innstikk 0 13px 0 #dfdede; -webkit-boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innstikk 0 13px 0 #dfdede; boks-skygge: innsett 0 5px 0 #ccc, innsett 0 6px 0 # 989898, innsett 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; stilling: relativ; topp: 5px; grense: 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; }

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.

Komme i gang med JavaScript-løfter

Asynkron kode er nyttig for å utføre oppgaver som er tidkrevende, men selvfølgelig er det ikke blottet for ulemper . Async-koden bruker tilbakeringingsfunksjoner til å behandle sine resultater, men tilbakeringingsfunksjoner kan ikke returnere verdier som typiske JavaScript-funksjoner kan.Dermed tar de ikke bare vår evne til å kontrollere utførelsen av funksjonen, men gjør også feilhåndtering litt av et problem. Dette er

(Tekniske og design tips)

70 verste Photoshop-feil i tidsskrifter og annonser

I dag og eld, hvem elsker ikke Photoshop? Med det kan du manipulere ethvert bilde du vil ha, men du vil. Legg inn, fjern, trim litt her og der; Hvis du vet hvordan du bruker Photoshop, vet du hvordan du virkelig skal redigere et bilde. Så det er ingen overraskelse at det regnes som den sveitsiske hærkniven for designere, slik at de kan hugge seg bort ved eventuelle feil.M

(Tekniske og design tips)

Interessante Artikler

Bla gjennom eventuelle underreddits-bilder med denne kule appen

Hjelp Søk etter MH370 gjennom Tomnod Satellittbilder

Slik administrerer du gen X, Y og Z på arbeidsplassen [Infographic]

En introduksjon til atomdesign for webdesignere