Harry James
0 
2319
687
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 ville være et godt tidspunkt at se nogle af de seje CSS-effekter, vi kan opnå ved hjælp af strømmen af din browser og en lille CSS-kode. Du skal være i stand til at se alle de effekter, 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 dybest set føjer stil og flair til et websted. Websteder er bestemt læsbare 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 havde til hensigt, og bestemmer alt fra sidelayout, tekststørrelse og farver og nu en række smarte effekter med introduktionen af CSS3.
I fortiden ville opnåelse af den samme type effekter som dem, der er beskrevet i denne artikel, have betydet at downloade 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
Internettet er gradvist blevet 'rundere', men nu er dette solidificeret i CSS3. Se på boksen omkring dette afsnit. Det er ikke et billede - prøv at højreklikke på det for at se. Ren CSS!
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
Tekst kan undertiden se virkelig hård ud på egen hånd, men en enkel lille skygge hjælper virkelig tingene. Tjek skyggen, jeg har brugt på dette afsnit.
Her er koden for nogle tekstskygger:
.box_textshadow text-skygge: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /farveforløb
Ikke flere flade farver eller baggrundsgradientbilleder, nu kan du kun oprette en cool gradient ved hjælp af CSS. Desværre har du brug for et par linjer på grund af aktuelle problemer med uforligelighed mellem browsere, men du kan bruge det værktøj, som jeg vil beskrive senere til at generere disse automatisk.
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
Det er vanskeligt at forestille sig en anvendelse til dette med hensyn til tekst, men det kan tilføje nogle dejlige designelementer, når du f.eks. Bruger billeder. Bemærk igen, at selvom dette afsnit er roteret, kan du stadig vælge og interagere med det, da det forbliver almindelig tekst.
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, "ekspanderer mod) zoom: 1; Animation
Åh ja, jeg reddede det bedste 'indtil sidst. CSS3 introducerer forskellige former for animation for et hvilket som helst antal af de kølige CSS-effekter, der er beskrevet. På dette afsnit har jeg defineret overgangsejendommen som anført nedenfor, samt en enkel baggrundsfarve og rotation, når du holder musen hen over den. Hvis du ikke allerede er det, skal du holde markøren over dette afsnit af tekst nu for at se effekten i handling. Du kan animere stort set alt!
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; Cross-browser-uforeneligheder
Selvom de fleste moderne browsere understøtter hele 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. At skrive disse ekstra linjer kan dog være en smerte, så tjek css3-generatoren for 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 højt forhold mellem whiz-bang og rigtigt indhold (ligesom vi gjorde, da animerede GIF'er først var “opdaget”) men på lang sigt lærer vi, hvordan man bruger værktøjerne i CSS3 til at gøre mere interessante webgræ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.