5 seje CSS3-effekter, du ser mere af

Reklame

CSS3 (kombineret med kraften i HTML5) understøttes hurtigt af alle de store browsere (læse - alt andet end Internet Explorer), så jeg tænkte nu, det ville være et godt tidspunkt at se nogle af de seje CSS-effekter, vi kan opnå, ved hjælp af din browsers kraft og lidt CSS-kode. Du skal være i stand til at se alle effekterne, der er demonstreret i denne artikel, hvis du bruger den nyeste Chrome, Safari eller Firefox browser.

Først - Hvad er CSS?

Hvis du læser denne artikel, fordi du er fascineret, men ikke har nogen idé om, hvad CSS betyder, så lad os forklare det hurtigt. CSS er det kodesprog, der bruges til at dekorere websider. Det står for Cascading Style Sheet, og føjer dybest set bare stil og flair til et websted. Hjemmesider kan bestemt læses uden deres CSS, men de er afskyelige, ligesom alle websteder var tilbage i 1995. Mens HTML-filer beskriver strukturen og det tekstlige indhold på en side, får CSS dem til at vises på den måde, designeren har bestemt, og bestem alt fra sidelayout, tekststørrelse og farver og nu et antal smarte effekter med introduktionen af CSS3.

I fortiden ville opnåelse af samme slags effekter som dem, der er beskrevet i denne artikel, have betydet, at man downloadede voluminøs CSS eller endnu større grafik. Nu kan CSS bare beskrive til din browser, hvordan den ønsker, at siden skal se ud, og browseren vil håndtere behandlingen. Det er som om jeg giver dig planerne om at bygge dit eget hus i stedet for at sælge dig hele huset - det er betydeligt billigere!

Rundede hjørner

Koden til afrundede hjørner er virkelig let:

.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

Her er koden for nogle tekstskygger:

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

farveforløb

Her er koden for CSS-gradienter:

.box_gradient {baggrund-farve: # 3f9fe3; baggrund-billede: -moz-lineær gradient (top, # 3f9fe3, #white); / * FF3.6 * / baggrund: -moz-lineær gradient (top, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / baggrund-billede: -ms-lineær gradient (top, # 3f9fe3, #white); / * IE10 * / baggrund-billede: -o-lineær gradient (øverst, # 3f9fe3, # hvid); / * Opera 11.10+ * / baggrund-billede: -webkit-gradient (lineær, venstre top, venstre bund, fra (# 3f9fe3), til (#white)); / * Saf4 +, Chrome * / baggrund-billede: -webkit-lineær gradient (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / baggrund-billede: lineær gradient (top, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# hvid'); / * IE6 – IE9 * / }

Rotation

Her koden til at rotere noget:

.box_rotate {-moz-transform: rotere (7,5deg); / * FF3.5 + * / -o-transformation: rotere (7,5deg); / * Opera 10.5 * / -webkit-transformation: rotere (7,5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotere (7,5deg); / * IE9 * / transform: rotere (7,5deg); filter: progid: DXImageTransform. Microsoft. Matrix (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, størrelse Metode = 'autoudvidelse'); zoom: 1; }

Animation

Du har brug for overgangskoden som denne til ethvert element, du vil ændre. Du bliver også nødt til at bruge nogle pseudo CSS-klasser (såsom: hover for at ændre de egenskaber, du vil animere, f.eks. Farve, størrelse eller rotation)

.box_transition {-moz-overgang: alle 0,5s let-out; / * FF4 + * / -o-overgang: alle 0,5'ers let-out; / * Opera 10.5+ * / -webkit-overgang: alle 0.5'erne lette ud; / * Saf3.2 +, Chrome * / -ms-overgang: alle 0,5s lette ud; / * IE10? * / overgang: alle 0,5'ers let-out; } 

Krydsbrowser-uforeneligheder

Selvom de fleste moderne browsere understøtter alt CSS3 på nogle måder, kræver nogle stadig nogle lidt forskellige kode eller hacks for at få det til at fungere med deres særlige implementering af standarden. I koden ovenfor kan du f.eks. Se mange tilfælde af -moz- eller -webkit - forud for nogle af CSS-egenskaberne, som vedrører enten Mozilla-baserede eller Webkit-baserede browsere. Det kan dog være en smerte at skrive disse ekstra linjer, så tjek css3 generator at skrive dem til dig.

Konklusion

Internettet bliver meget mere spændende med de nye CSS3- og HTML5-udvidelser. Indrømmet, vi vil se en anden spredt af blinkende tekst og et stort forhold mellem whiz-bang og rigtigt indhold (ligesom vi gjorde da animerede GIF'er blev først "opdaget") men på lang sigt lærer vi hvordan man bruger værktøjerne i CSS3 til at gøre mere interessant web grænseflader. Og hey, du kan altid slå det hele fra!

Hvis du selv er designer eller webudvikler, skal du bare huske, at CSS3 aldrig burde være den eneste mulighed. Hvis dit websted ikke fungerer uden CSS3, har du ikke brugt det korrekt. CSS skal bruges til at forbedre oplevelsen og ikke programfunktionaliteten.