Annonse
CSS3 (kombinert med kraften fra HTML5) støttes raskt av alle de store nettleserne (les - alt annet enn Internet Explorer), så jeg tenkte at nå ville være et godt tidspunkt å se noen av de kule CSS-effektene vi kan oppnå ved å bruke kraften i nettleseren din og litt CSS-kode. Du bør kunne se alle effektene som er demonstrert i denne artikkelen hvis du bruker den siste nettleseren Chrome, Safari eller Firefox.
Først - Hva er CSS?
Hvis du leser denne artikkelen fordi du er fascinert, men ikke aner hva CSS betyr, la meg forklare det raskt. CSS er kodespråket som brukes til å dekorere nettsider. Det står for Cascading Style Shei, og legger i utgangspunktet bare stil og stil på et nettsted. Nettsteder er absolutt lesbare uten CSS, men de er fæle akkurat som alle nettsteder var tilbake i 1995. Mens HTML-filer beskriver strukturen og tekstinnholdet på en side, får CSS dem til å vises på den måten designeren har ment og bestemme alt fra sideoppsett, tekststørrelse og farger, og nå en rekke fancy effekter med introduksjonen av CSS3.
I det siste ville det å ha oppnådd samme type effekter som de som er beskrevet i denne artikkelen, betydd å laste ned voluminøs CSS eller enda større grafikk. Nå kan CSS bare beskrive nettleseren din hvordan den vil at siden skal se ut, og nettleseren vil håndtere behandlingen. Det liker at jeg gir deg planene om å bygge ditt eget hus i stedet for å selge deg hele huset - det er betydelig billigere!
Avrundede hjørner
Internett har gradvis blitt "rundere", men nå er dette solidert i CSS3. Ta en titt på ruten rundt dette avsnittet. Det er ikke et bilde - prøv å høyreklikke på det for å se. Ren CSS!
Koden for avrundede hjørner er veldig enkel:
.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-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 hardt ut av seg selv, men en enkel liten skygge hjelper virkelig ting. Sjekk skyggen jeg har brukt på dette avsnittet.
Her er koden for noen tekstskygger:
.box_textshadow {text-skygge: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }
gradienter
Ingen flere flate farger eller bakgrunnsgradientbilder, nå kan du opprette en kul gradient med bare CSS. Dessverre trenger du noen få linjer på grunn av gjeldende 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, # hvit); / * 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, # hvit); / * 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, # hvit); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: lineær gradient (topp, # 3f9fe3, # hvit); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }
rotasjon
Det er vanskelig å forestille seg en bruk av dette når det gjelder tekst, men det kan legge til noen fine designelementer når du for eksempel bruker bilder. Legg merke til at selv om dette avsnittet er rotert, kan du fremdeles velge og samhandle med det, da det forblir vanlig tekst.
Her koden for å rotere noe:
.box_rotate {-moz-transform: rotate (7,5deg); / * FF3.5 + * / -o-transform: rotere (7,5deg); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotere (7,5deg); / * IE9 * / transform: rotere (7,5deg); filter: progid: DXImageTransform. Microsoft. Matrise (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, dimensjonering Metode = 'auto expand'); zoom: 1; }
animasjon
Å ja, jeg reddet de beste til sist. CSS3 introduserer forskjellige former for animasjon for et hvilket som helst antall kule CSS-effekter beskrevet. I dette avsnittet har jeg definert overgangseiendommen som listet nedenfor, samt en enkel bakgrunnsfarge og rotasjon når du holder musepekeren over den. Hvis du ikke allerede er det, kan du holde musepekeren over dette avsnittet med tekst nå for å se effekten i handling. Du kan animere stort sett hva som helst!
Du trenger overgangskoden som denne til ethvert element du vil endre. Du må også bruke noen pseudo CSS-klasser (for eksempel: svev for å endre egenskapene du vil animere, for eksempel farge, størrelse eller rotasjon)
.box_transition {-moz-overgang: alle 0,5s lettvint; / * FF4 + * / -o-overgang: alle 0,5s letthet ut; / * Opera 10.5+ * / -webkit-overgang: alle 0.5-ere lettere; / * Saf3.2 +, Chrome * / -ms-overgang: alle 0,5-er enkle; / * IE10? * / overgang: alle 0,5s lettvint; }
Uforlikeligheter med tvers av nettlesere
Selv om de fleste moderne nettlesere støtter all CSS3 på noen måter, trenger noen fortsatt noen litt annen kode eller hacks for å få det til å fungere med sin spesielle implementering av standarden. I koden over, for eksempel, vil du se mange forekomster av -moz- eller -webkit foran noen av CSS-egenskapene, som angår enten nettlesere som er basert på Mozilla eller Webkit. Det kan være vondt å skrive disse ekstra linjene, så sjekk ut css3 generator å skrive dem for deg.
Konklusjon
Internett kommer til å bli mye mer spennende med de nye CSS3- og HTML5-utvidelsene. Gitt, vi kommer til å se nok en sprute av blinkende tekst og et høyt forhold mellom whiz-bang og ekte innhold (akkurat som vi gjorde da animerte GIF ble først "oppdaget"), men på lang sikt lærer vi hvordan du bruker verktøyene i CSS3 for å gjøre mer interessant nett grensesnitt. Og hei, du kan alltid slå av alt!
Hvis du selv er designer eller webutvikler, må du bare huske at CSS3 aldri burde være det eneste alternativet. Hvis nettstedet ditt ikke fungerer uten CSS3, har du ikke brukt det riktig. CSS bør brukes til å forbedre opplevelsen, ikke programfunksjonaliteten.
James har en BSc i kunstig intelligens, og er CompTIA A + og Network + sertifisert. Han er hovedutvikler av MakeUseOf, og bruker fritiden sin på å spille VR paintball og brettspill. Han har bygd pc-er siden han var liten.