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.
10 tips for å forbedre smarttelefonfotografering
Kameratelefonen har endret ideen om tradisjonell fotografering, for det meste fordi det er lettere å bære rundt en kameratelefon som passer i lommen din enn det er å slepe rundt den mye mer omfattende DSLR. Dette fenomenet har ført til en tilstrømning av bilderedigering og bilderedigeringsprogrammer, og har sannsynligvis hatt en hånd i å endre hvordan profesjonelle fotografer og fotojournalister jobber.De fle
(Tekniske og design tips)
5 designers hemmeligheter for å starte din karriere rett
Freelancing er en reise for hver av oss, og vi lærer og vokser fra feilene og feilene vi gjør på jobben. Å lære av våre feil er et viktig skritt i reisen til suksess.Ta min erfaring for eksempel. Jeg jobber frilans på siden, bare søker etter prosjekter når jeg trenger litt ekstra penger. I et slikt tilfelle kom en klient til meg for å hjelpe meg med et prosjekt. Jeg kast
(Tekniske og design tips)
no.hideout-lastation.com