Share
CSS3 er en av de kuleste nye webteknologiene tilgjengelig for webutviklere akkurat nå. Ved å bruke noen av de mange funksjonene, er det mulig å reprodusere effekter som du tidligere har gjort i Photoshop, med CSS-kode som er mer vedlikeholdsbar, raskere å laste og hip med de nyeste trendene. Les videre for å lære om kraftverktøyene som er tilgjengelige for deg og hvordan du kan kombinere dem for å produsere de ultimate grafiske effektene.
CSS3 har mange funksjoner, men noen av dem er avgjørende for å lære om du skal reprodusere Photoshop-lignende effekter. Jeg kaller disse mine "kraftverktøy". De inkluderer følgende:
Hver av disse funksjonene kan bidra til å erstatte noen av bildene du kanskje har opprettet i Photostop i fortiden. Ved å gjøre dette gjør du nettstedet ditt mer vedlikeholdbart, siden du kan endre en eiendom bare ved å endre CSS-filen din i stedet for å redigere et bilde i Photoshop. Du lager også nettstedet ditt raskere, siden bilder bruker mye båndbredde. La oss utforske disse funksjonene en etter en.
Nettleserstøtte:
Nå har du sikkert hørt om grensestrekningen en million ganger. Den er super enkel å bruke og støttes over alle moderne nettlesere. Hvis du ikke allerede vet, er grenseradius en måte å skape avrundede hjørner med CSS-ingen bilder er nødvendig! La oss ta en titt på syntaksen.
-webkit-grense-radius: størrelse; -moz-grense-radius: størrelse; border-radius: size;
Det er tre syntakser du må bruke. Den første er for webkitbaserte nettlesere, som Safari og Chrome; den andre er for Mozilla-baserte nettlesere, som Firefox; og sist er den ikke forhåndsdefinerte versjonen, for nettlesere som støtter den, inkludert IE9, Opera og Safari 5.
Ved å bruke en radius på 10 piksler til en div, oppstår følgende effekt:
OK, lett! La oss gå videre til neste kraftverktøy.
Nettleserstøtte:
Boxskygger er en annen godt støttet funksjon. Syntaxen ser slik ut:
-webkit-boks-skygge: offset_x offset_y blur_radius farge; -moz-box-skygge: offset_x offset_y blur_radius farge; boks-skygge: offset_x offset_y blur_radius farge;
Igjen må vi bruke leverandørens prefikser for Webkit og Mozilla. Første og andre parametere i boksskyggeegenskapen er offsetposisjonene fra elementets venstre og toppkoordinater. Innstilling av en positiv verdi til disse egenskapene flytter skyggen til høyre og ned fra elementet, og innstillingen av en negativ verdi beveger skyggen til venstre og opp fra elementet. Blur_radius er mengden av uskarphet du vil legge til i skyggen din (hvor vanskelig eller uklar du vil ha det). Endelig er den siste parameteren fargen du vil ha skyggen til. Å legge en skygge til vår tidligere brukte avrundede div vil skape en fin utseende.
-webkit-boks-skygge: 5px 5px 10px # 555; -moz-boks-skygge: 5px 5px 10px # 555; boks-skygge: 5px 5px 10px # 555;
En annen pen funksjon i CSS-bokseskygger er innsatsordet. Når inntastingsordet er tilstede, blir skyggen gjengitt inne i boksen i stedet for utenfor. Dette kan skape et hyggelig, deprimert utseende spesielt for knapper. Her er hva vår div ville se ut med en innskuddskugga.
-webkit-boks-skygge: 0 0 20px # 333 innsett; -moz-box-shadow: 0 0 20px # 333 innsett; boks-skygge: 0 0 20px # 333 innsett;
Den siste funksjonen i bokseskygger som er verdt å nevne, er muligheten til å ha flere skygger på samme element. Dette er veldig nyttig og kan eliminere å ha ekstra oppslag i HTML-en din, bare for å bruke en ekstra skygge. Alt du trenger å gjøre for å lage flere skygger, er å skille dem med kommaer. Her er et eksempel:
-webkit-boks-skygge: 0 0 20px # 333 innsats, 20px 15px 30px gul, -20px 15px 30px lime, -20px -15px 30px blå, 20px -15px 30px rød; -moz-box-skygge: 0 0 20px # 333 innsats, 20px 15px 30px gul, -20px 15px 30px lime, -20px -15px 30px blå, 20px -15px 30px rød; boks-skygge: 0 0 20px # 333 innsats, 20px 15px 30px gul, -20px 15px 30px lime, -20px -15px 30px blå, 20px -15px 30px rød;
Nettleserstøtte:
Tekstskygger er som bokseskygger, bortsett fra at de er skygger for tekst i stedet for hele elementet. Heldigvis er det ikke noen leverandør prefiks nødvendig for tekstskygge.
tekstskygge: offset_x offset_y blur_radius farge;
Alternativene for tekstskygge er de samme som for bokseskygge, bortsett fra at det ikke er noen innskuddstøtteskygge. Her er en demo som gjør ellers usynlig tekstpop av siden.
farge: #fff / * tekstfarge til hvit * / tekstskygge: 0 0 50px # 333;
Dette skaper følgende effekt:
Som med boksskygger er det mulig å ha flere tekstskygger bare ved å skille dem med kommaer. Her er et eksempel som skaper en flammende tekst-effekt.
tekstskygge: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Tekstskygger kan skape noen fantastiske effekter, og kan komplementere andre effekter veldig pent.
Nettleserstøtte:
Gradienter er en av de mest kraftige funksjonene som er tilgjengelige for deg hvis du vil lage disse fantastiske effektene. Mens full nettleserstøtte fortsatt ikke er der, kan du alltid gi tilbakebetalingstyping til nettlesere uten støtte. Husk: Nettsteder trenger ikke å se på samme i hver nettleser. Det finnes to typer gradienter som du kan opprette: lineære gradienter og radiale gradienter. Som du kanskje forventer, beveger lineære gradienter langs en rett linje og radialgradienter går rundt en sirkel. Gradienter kan brukes hvor som helst du kanskje har brukt et bilde i fortiden, for eksempel for bakgrunnen, grensebildet eller listekulene.
Dessverre for webutviklere er det to forskjellige syntakser: en for Mozilla og en annen for Webkit.
Safari og Chrome bruker begge Webkit-gjengemotoren, slik at de alltid bruker samme syntaks. Deres gradientsyntax er ganske enkel:
-webkit-gradient (, [, ]?, [, ]? [, ] *)
Webkit bruker samme samme syntaks for både lineære og radiale gradienter. Bare endre type parameter for å bytte mellom dem.
Firefox bruker separate syntakser for lineære og radiale gradienter, som begge er svært forskjellige fra deres Webkit-kolleger.
-moz-lineær gradient ([|| ,]? , [, ] *) -moz-radial-gradient ([ || ,]? [ || ,]? , [, ] *)
La oss se på disse syntaksen separat.
For simplicty, her er en Webkits syntaks bare for lineære gradienter.
-webkit-gradient (lineær, start_x start_y, end_x end_y, stopp, stopp ...)
Firefox syntaks ser slik ut.
-moz-lineær-gradient (vinkel start_x start_y, stopp, stopp ...)
I Webkit-syntaksen start_x og start_y parametere angir startposisjonen for gradienten, og end_x og end_y angir sluttposisjonen for gradienten. Du kan bruke noen av de vanlige CSS-dimensjonsverdiene, inkludert prosentandeler, samt søkeordene venstre, topp, bunn, høyre og senter som verdier for disse posisjonsparametrene. Stopp er en måte for deg å spesifisere bestemte farger som skal brukes på bestemte punkter langs gradienten. Du kan ha så mange farger som du vil, men du må ha minst to: en start- og sluttfarge. For ekstra fargestopp, kan du bruke fargestopp () -funksjonen til å gi en posisjon som prosentandel eller desimal mellom 0 og 1, samt en farge. For eksempel: fargestopp (50%, svart) ville skape en svart fargestopp på nøyaktig halvveis gjennom gradienten. I stedet for å skrive 0% og 100% for start- og sluttfargene, finnes bekvemmelighetsfunksjonene fra () og til (). Alt du trenger å gi til er fargene.
Firefox syntaks er mye mindre rett frem, og har mange måter å oppnå det samme målet. Det eneste som er statisk om syntaksen er fargestoppene, som bare er en farge etterfulgt av en posisjon som prosentandel. For start- og sluttposisjonene kan du gå av 0% og 100%, og hvis du forlater stillingen av noen av de andre fargestoppene, fordeles de jevnt i hele gradienten. I motsetning til Webkit-syntaksen, har Firefox syntaks ikke en sluttposisjon, bare en startposisjon og en vinkel. Graden vil løpe ut fra startposisjonen med den angitte vinkelen. Hvis du forlater vinkelen, vil den løpe ut vinkelrett fra det punktet. Hvis du slipper ut startpunktet sammen, vil graden løpe fra topp til bunn. Denne syntaksen er litt forvirrende og litt mindre fleksibel enn Webkits enkle syntaks, så det er best å lære ved eksempel.
Her er et enkelt eksempel på CSS-gradienter i aksjon. Denne graden går fra øverste venstre hjørne til nederste venstre hjørne (med andre ord, fra topp til bunn) og fra rød til hvit.
-Webkit-gradient (lineær, venstre topp, venstre bunn, fra (rød) til (hvit)); -moz-lineær-gradient (rød, hvit)
Setter dette som bakgrunnsegenskapen til en div, får vi følgende resultat:
Ved å legge til en fargestopp og endre vinkelen på graden, kan vi få en annen effekt.
-Webkit-gradient (lineær, venstre topp, høyre bunn, fra (rød), fargestopp (50%, hvit), til (rød)); -moz-lineær-gradient (venstre topp, rød, hvit, rød);
Her er syntaksen for radialgradienter i Webkit.
-webkit-gradient (radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x outer_circle_center_y, outer_circle_radius, stopp, stopp ...)
Firefox syntaks ser slik ut.
-moz-radial-gradient (center_x center_y, formstørrelse, stopp, stopp ...)
Webkit-syntaksen er litt mer komplisert enn den lineære gradientsyntaxen, men de samme prinsippene gjelder fortsatt. Radialgradienter i Webkit har to sirkler: en startsirkel og en sluttkrets. Du angir senter X og Y posisjoner for hver av disse kretsene sammen med deres radius. Til slutt angir du fargen stopper på samme måte som du gjorde for lineære gradienter.
Firefox-syntaxen for radiale gradienter ligner syntaxen for lineære gradienter ved at alle delene unntatt fargestoppene kan utelukkes. Du kan angi senterets X- og Y-posisjoner i gradienten, akkurat som den indre sirkelens koordinater i Webkit-syntaksen, men det er ingen ytre sirkel i Firefox. I stedet kan du angi en form og størrelse på gradienten. Formen kan enten være en sirkel eller en ellipse, den sistnevnte er foreløpig ikke mulig å lage i Webkit. Størrelsen aksepterer mange forskjellige søkeord, men ikke en pikselstørrelse som du kanskje har forventet. Du kan lese om hva hver av disse konstantene gjør på Mozilla Developer Center. For denne opplæringen vil vi bare bruke standardinnstillingene. Igjen, hvis du forlater senteret X og Y posisjoner, antas de å være midtpunktet på objektet du fyller med en gradient. Hvis du slipper ut formen og størrelsen, antas gradienten å være en sirkel som fyller hele boksen.
-webkit-gradient (radial, senter sentrum, 0, senter senter, 50, fra (hvitt) til til (rødt)); -moz-radial-gradient (hvit, rød)
Hvis vi bruker denne gradienten til bakgrunnen for en div, er dette det vi får.
Nettleserstøtte:
Flere bakgrunner gjør det enkelt å lage komplekse effekter i CSS uten å måtte opprette ytterligere markup i HTML-en. Å ha støtte for dette betyr at elementene kan ha flere gradienter og bildebakgrunner sammen med standard bakgrunnsfarge. Det er ingen forskjell i syntaksen med flere bakgrunner fra enkeltbakgrunn - bare komma separere dem og av deg!
Her er et eksempel på en div med en gradientbakgrunn og en fin teksturert effekt ved hjelp av et bilde:
bakgrunn: url (noise.png), -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 999), til (# 333)); bakgrunn: url (noise.png), -moz-lineær gradient (# 999, # 333);
Vi må deklarere det to ganger siden, som vi har lært, er det en annen gradientsyntax for hver nettleser. Dette skaper følgende effekt:
Nå som vi har fem gode kraftverktøy til disposisjon, la oss kombinere dem for å gi en enda mer fantastisk effekt.
Det er så mange forskjellige knapper som du kan velge å designe. For å være enkel, la oss etterligne noe som allerede eksisterer - Mac OS X-knappestilen.
Vi vil starte med HTML-koden vår for denne demoen. Det er egentlig ganske enkelt, bare to DIV og litt tekst.
Knapp
Nå skal vi starte med vår grunnleggende CSS. Først, la oss style panelet.
.panel bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (#bbbcbb) til (# 959695)); bakgrunn: -moz-lineær-gradient (#bbbcbb, # 959695); bakgrunnsfarge: # b7b9b7; bredde: 100px;
Panelet er bare en fin container for vår knapp. Den har en gradient som går fra topp til bunn mellom to fine gråfarger. For de nettleserne som ikke støtter gradienter, gis en tilbakebetaling bakgrunnsfarge.
Nå, la oss se på CSS for den aktuelle knappen.
.knapp display: inline-block; margin: 20px; polstring: 3px 6px; font-familie: 'Lucida Grande', Arial, sans-serif; skriftstørrelse: 13px; -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; grense: 1px solid rgba (0, 0, 0, 0,6); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (#fbfcfb) til (# 9d9e9d)); bakgrunn: -moz-lineær-gradient (#fbfcfb, # 9d9e9d); bakgrunnsfarge: # c0c2c0; tekstskygge: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-boks-skygge: rgba (255, 255, 255, 0.4) 0 1px; -moz-boks-skygge: rgba (255, 255, 255, 0.4) 0 1px; boks-skygge: rgba (255, 255, 255, 0.4) 0 1px; -webkit-bruker-velg: ingen; -moz-user-select: none; markør: standard;
Det er en anstendig mengde kode her, som bruker alle de kraftverktøyene jeg beskrev ovenfor, bortsett fra flere bakgrunner. Det er flere deler til denne koden, som vi tar en etter en. De to første linjene er bare noen enkle oppsettinformasjon. Innstilling av knappen som skal vises: Inline-blokk gjør at den automatisk strekker seg for å passe innholdet, uansett hvor mye tekst du legger inn i knappen. Neste del gir litt skriftinformasjon til knappen. Til slutt, i den tredje delen får vi bruke vårt første kraftverktøy: kantlinje. Når det gjelder vår nydelige knapp, gir vi den en fin 3px radius. Deretter gir vi knappen en ramme. Legg merke til at vi bruker rgba som en farge her. Dette tillater oss å gjøre fargen delvis gjennomsiktig som vi gjør her, og skape en fin gråaktig farge. I den neste delen av koden setter vi opp bakgrunnen til knappen. Vi gir den en gradientbakgrunn og en solid farge for nedfall i nettlesere som ikke støtter gradienter ennå. Deretter bruker vi tekstskygge for å få teksten til å se litt inn i knappen. Igjen bruker vi rgba her for å gi en delvis gjennomsiktig hvit til tekstskyggen. Den penne-ultimate delen av kode skaper en bokseskygge. Nå ser det egentlig ikke ut som en skygge, den ser faktisk ut som en andre kant, men den gir et fint høydepunkt nederst på knappen for å få det til å bli gravert inn i bakgrunnen og komplimenterer grensefarge. Dette er et nyttig triks å vite om du vil ha noe å se ut som det har flere grenser - jeg bruker det mye. Endelig er den siste delen av CSS-koden et fint triks som forhindrer tekstvalg i Webkit-baserte nettlesere og Firefox, og setter markøren til standardpilen i stedet for tekstvalgmarkøren.
Så langt, denne koden gjør at knappen vår ser slik ut:
OK, så ikke så verst ennå! La oss gå videre til knappens trykte utseende.
.knapp: aktiv bakgrunn: # B5B5B5; -webkit-boks-skygge: rgba (255, 255, 255, 0.4) 0 1px, svart 0px 1px 3px-innsett, rgba (0, 0, 0, 0.4) 0px -5px 12px-innsett; -moz-box-skygge: rgba (255, 255, 255, 0.4) 0 1px, svart 0px 1px 3px-innsett, rgba (0, 0, 0, 0.4) 0px -5px 12px-innsett; boksskygge: rgba (255, 255, 255, 0.4) 0 1px, svart 0px 1px 3px-innsett, rgba (0, 0, 0, 0.4) 0px -5px 12px-innsett; tekstskygge: rgba (255, 255, 255, 0.3) 0px 1px;
Når knappen trykkes ned, endrer vi et antall ting. Først setter vi bakgrunnen til en vanlig farge, og fjerner gradienten som vi hadde satt eariler. Dette skyldes at vi vil skape deprimert utseende med en bokseskygge i stedet for en gradient. Den neste tingen vi gjør er satt som skygge- eller ganske flere skygger. Den første skyggen i listen er den samme som vi hadde i normal tilstand: høydepunktet nederst på knappen. Den andre og tredje skyggen er de som gjør at knappen vår blir trykket. Den første av disse er en svart innskuddskygge som settes ned fra topp 1 pixel og har 3 piksler av uskarphet - en ganske mørk skygging. Den siste skyggen er også svart, men en svakt gjennomsiktig svart som er satt opp fra bunnen 5 piksler med 12 piksler uskarphet. Dette skaper det mørkede utseendet på bunnen av knappen når det trykkes på. Den endelige tingen vi må gjøre når denne knappen er trykket ned, er bare å redusere uklarheten til tekstskyggen med en hakk, slik at den ikke skiller seg ut som en sår tommel.
Det er det! Vår knapp er fullført. Her ser du hvordan den nedtrykte versjonen ser ut:
Bytte bilder med CSS3 har mange fordeler. Det gjør jobben din som en webutvikler enklere, siden du ikke trenger å åpne Photoshop hver gang du trenger å gjøre en endring i brukergrensesnittet. Det gjør at webområdet ditt eller webapplikasjonen lastes raskere, siden det ikke trenger å laste ned så mange tunge bilder. Og det gjør at du kan skape en mer rik, interaktiv og ønskelig opplevelse for brukere slik at de vil fortsette å komme tilbake for mer.
Jeg vil forlate deg med litt inspirasjon til ting du kan gjøre med CSS3. Dette er ikke nødvendigvis de mest ekte verdenseksemplene, men de viser hva som er mulig med litt arbeid.
Den første demoen, laget av Jeff Batterton, er en iPhone opprettet med ren CSS3 - ingen bilder brukt. Det er veldig imponerende, ved hjelp av CSS-gradienter, tekstskygger, bokseskygger, overganger og transformasjoner. Dessverre virker det for øyeblikket bare riktig i Webkit-baserte nettlesere som Safari og Chrome. Det kan være din oppgave å gjøre demoarbeidet i Firefox!
En annen demo, kanskje enda mer fantastisk, ble skrevet av Louis Harboe. Det er en rekreasjon av noen av iOS-ikonene i ren CSS, og veldig realistiske rekreasjoner på det! Denne demoen fungerer også bare i Webkit-baserte nettlesere. Hvis du vil lære om hvordan noen av disse ikonene ble reprodusert, kan du gå over til Louis Harboes blogg der han beskriver prosessen.
Jeg håper du har hatt glede av denne artikkelen! Ta gjerne kontakt med meg på Twitter, eller legg tankene dine i kommentarene!
Accentsconagua