5 Cool CSS3-effekter du vil se mer av

CSS3 (kombinert med kraften i HTML5) støttes raskt av alle de store nettleserne (les - alt unntatt Internet Explorer), så jeg trodde nå være en god tid til å se noen av de kule CSS-effektene vi kan oppnå ved hjelp av kraften av nettleseren din og en liten CSS-kode. Du bør kunne se alle effektene som vises i denne artikkelen hvis du bruker den nyeste Chrome-, Safari- eller Firefox-nettleseren.

Først - Hva er CSS?

Hvis du leser denne artikkelen fordi du er fascinert, men har ingen anelse om hva CSS betyr, la oss forklare meg fort. CSS er kodingsspråket som brukes til å dekorere nettsider. Det står for Cascading Style Sheit, og legger i utgangspunktet bare stil og stil til et nettsted. Nettsteder er sikkert lesbare uten deres CSS, men de er heslige akkurat som alle nettsteder var tilbake i 1995. Mens HTML-filer beskriver strukturen og tekstinnholdet på en side, viser CSS dem på måten designeren hadde til hensikt, og bestemmer alt fra sidelayout, tekststørrelse og farger, og nå en rekke fancy effekter med introduksjonen av CSS3.

Tidligere har oppnådd samme slags effekter som de som er beskrevet i denne artikkelen, betydd å laste ned store CSS eller enda større grafikk. Nå kan CSS bare beskrive til nettleseren din hvordan den vil se siden, og nettleseren vil håndtere behandlingen. Det som meg gir deg planene om å bygge ditt eget hus i stedet for å selge hele huset - det er betydelig billigere!

Avrundede hjørner

Internett har etter hvert blitt "rundere", men nå er dette størknet i CSS3. Ta en titt på boksen rundt dette avsnittet. Det er ikke et bilde - prøv å høyreklikke på den for å se. Ren CSS!

Koden for avrundede hjørner er veldig enkelt:

.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-grense-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Tekstskygge

Tekst kan noen ganger se veldig hard ut, men en enkel liten skygge hjelper virkelig ting. Sjekk ut skyggen jeg har brukt på dette avsnittet.

Her er koden for noen tekstskygger:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

gradienter

Ingen flere flade farger eller bakgrunnsgradientbilder, nå kan du lage en kul gradient ved hjelp av CSS. Dessverre trenger du noen få linjer på grunn av nåværende inkompatibilitetsproblemer mellom nettlesere, men du kan bruke verktøyet som jeg vil beskrive senere for å generere disse automatisk.

Her er koden for CSS-gradienter:

.box_gradient bakgrunnsfarge: # 3f9fe3; bakgrunnsbilde: -moz-lineær-gradient (topp, # 3f9fe3, #white); / * FF3.6 * / bakgrunn: -moz-lineær gradient (topp, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / bakgrunnsbilde: -ms-lineær-gradient (topp, # 3f9fe3, #white); / * IE10 * / bakgrunnsbilde: -o-lineær-gradient (topp, # 3f9fe3, #white); / * Opera 11.10+ * / bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 3f9fe3), til (#white)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (topp, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: lineær gradient (topp, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

rotasjon

Det er vanskelig å forestille seg en bruk for dette når det gjelder tekst, men det kan legge til noen fine designelementer når du bruker bilder, for eksempel. Igjen, legg merke til at selv om dette avsnittet har blitt rotert, kan du likevel velge og samhandle med det som det forblir vanlig tekst.

Her koden for å rotere noe:

 .box_rotate -moz-transform: roter (7.5deg); / * FF3.5 + * / -o-transform: roter (7.5deg); / * Opera 10.5 * / -webkit-transform: roter (7.5deg); / * Saf3.1 +, Chrome * / -ms-transformer: roter (7.5deg); / * IE9 * / transform: roter (7.5deg); filter: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = "auto expand"); zoom: 1;  

animasjon

Å ja, jeg reddet det beste 'til sist. CSS3 introduserer ulike former for animasjon for et hvilket som helst antall av de kule CSS-effektene som er beskrevet. I dette avsnittet har jeg definert overgangseiendommen som nevnt nedenfor, samt en enkel bakgrunnsfarge og rotasjon når du svinger over den. Hvis du ikke allerede er, svinger du over dette avsnittet med tekst for å se effekten i handling. Du kan animere stort sett alt!

Du trenger overgangskoden som dette til noe element du vil endre. Du må også bruke noen pseudo CSS klasser (for eksempel: svever for å endre noen egenskaper du vil animere, for eksempel farge, størrelse eller rotasjon)

 .box_transition -moz-overgang: alle 0.5s utelukkelse; / * FF4 + * / -o-overgang: alle 0,5 s utelukkelse; / * Opera 10.5+ * / -webkit-overgang: alle 0.5s utelukkelse; / * Saf3.2 +, Chrome * / -ms-overgang: alle 0.5s utelukkelse; / * IE10? * / overgang: alle 0,5 s utelukkelse;  

Cross Browser Uforlikeligheter

Selv om de fleste moderne nettlesere støtter alle CSS3 på noen måter, trenger noen fremdeles noe litt annerledes kode eller hack for å få det til å fungere med deres spesielle implementering av standarden. I koden ovenfor for eksempel ser du mange forekomster av -moz- eller -webkit-foregående noen av CSS-egenskapene, som forholder seg til enten Mozilla-baserte eller Webkit-baserte nettlesere. Skrive disse ekstra linjene kan være en smerte skjønt, så sjekk ut css3 generatoren for å skrive dem for deg.

Konklusjon

Nettverket kommer til å bli mye mer spennende med de nye CSS3- og HTML5-utvidelsene. Gitt, vi kommer til å se en annen spurt av blinkende tekst og et høyt forhold til whiz-bang til ekte innhold (akkurat som vi gjorde da animerte GIF var først “oppdaget”), men i det lange løp vil vi lære å bruke verktøyene til CSS3 for å gjøre mer interessante webgrensesnitt. Og hei, du kan alltid slå alt av!

Hvis du selv er designer eller webutvikler, husk bare at CSS3 aldri burde være det eneste alternativet. Hvis nettstedet ditt ikke fungerer uten CSS3, har du ikke brukt det riktig. CSS skal brukes til å forbedre opplevelsen, ikke programfunksjonalitet.

Utforsk mer om: HTML, HTML5, Programmering, Webutvikling.