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.
5 måter å kjøre Desktop & Mobile Apps hvor som helst
Tenk deg at du trenger en programvare som Office, GIMP eller Notepad ++, men vil ikke installere en ny app, eller datamaskinen din har ikke minst spesifikasjoner for denne programvaren. I slike situasjoner kan du bruke bestemte tjenester til å kjøre skrivebords- eller mobilapper i nettleseren uten å laste ned eller installere dem på enheten.Dis
(Tekniske og design tips)
Web Design Museum viser deg webdesign trender fra fortiden
Vi glemmer ofte hvor primitive nettet pleide å være . Dating tilbake til slutten av 90-tallet og tidlig på 2000-tallet kom folk bare på nettet, og selv da brukte mange ikke nettet veldig ofte.I dag kan de fleste ikke forestille seg livet uten Internett. Og på grunn av det voksende publikum har webdesign sett mange fremskritt til det bedre.Webd
(Tekniske og design tips)
no.hideout-lastation.com