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.

14 Best Bitcoin Wallets For Sikker Bitcoin Storage

Her er noe hver bitcoin-eier burde vite: sikkerheten til dine bitcoins er i siste instans ditt ansvar.Kombinere digital sikkerhetskunnskap og sikker lagring av bitcoin er viktig hvis du ikke vil ha kontoer din hacked og bitcoins drenert. Husk - bitcoin-transaksjoner er ikke reversible . For å sende eller bruke bitcoins må man ha tilgang til både offentlige og private nøkler. Pr

(Tekniske og design tips)

20 Web Design Industry Vilkår for Clueless Client

I webdesignindustrien bruker vi mange insiderbetingelser . Dette gjør det ikke bare vanskelig å komme i gang for nykommere, særlig klienter som ikke er involvert i designbransjen, men det kan noen ganger være en utfordring å formidle deres mening riktig.I denne ordlisten har vi samlet 20 ofte brukte webdesignbetingelser og lagt en kort forklaring til hver, slik at alle raskt kan se på dem i tilfelle usikkerhet. Hvis

(Tekniske og design tips)

Interessante Artikler

8 Trusted Bitcoin Exchanges å kjøpe BTCs trygt - Best of

Å håndtere online innholds tyveri (personlig erfaring)

Del Wi-Fi med gjesten din ved hjelp av Raspberry Pi

Konverter Android-enhet til en faksmaskin med disse to verktøyene