Annons
CSS3 (kombinerat med kraften i HTML5) stöds snabbt av alla stora webbläsare (läs - allt utom Internet Explorer), så jag tänkte att det nu skulle vara en bra tid att se några av de coola CSS-effekterna som vi kan uppnå med hjälp av din webbläsare och lite CSS-kod. Du bör kunna se alla effekter som visas i den här artikeln om du använder den senaste webbläsaren Chrome, Safari eller Firefox.
Först - Vad är CSS?
Om du läser den här artikeln eftersom du är intresserad men inte har någon aning om vad CSS betyder, låt mig förklara snabbt. CSS är det kodningsspråk som används för att dekorera webbsidor. Det står för Cascading STyle Sheet, och lägger bara till stil och stil på en webbplats. Webbplatser är säkert läsbara utan deras CSS, men de är hemska precis som alla webbplatser var tillbaka 1995. Medan HTML-filer beskriver strukturen och textinnehållet på en sida gör CSS att de visas på samma sätt som designern avsedd och bestäm allt från sidlayout, textstorlek och färger, och nu ett antal snygga effekter med introduktionen av CSS3.
Tidigare skulle uppnå samma typ av effekter som de som beskrivs i denna artikel ha inneburit nedladdning av skrymmande CSS eller ännu större grafik. Nu kan CSS bara beskriva för din webbläsare hur den vill att sidan ska se ut, och webbläsaren hanterar behandlingen. Det är som att jag ger dig planerna att bygga ditt eget hus istället för att sälja hela huset - det är betydligt billigare!
Rundade hörn
Internet har gradvis blivit "rundare", men nu har detta stärkts i CSS3. Ta en titt på rutan som omger detta avsnitt. Det är inte en bild - försök med att högerklicka på den för att se. Ren CSS!
Koden för rundade hörn är väldigt lätt:
.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 * /}
Text Shadow
Text kan ibland se riktigt hårt ut på egen hand, men en enkel liten skugga hjälper verkligen saker. Kolla in skuggan som jag har tillämpat på det här stycket.
Här är koden för några textskuggor:
.box_textshadow {text-skugga: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }
gradienter
Inga fler plana färger eller bakgrundsgradientbilder, nu kan du skapa en cool gradient med bara CSS. Tyvärr behöver du några rader på grund av aktuella inkompatibilitetsproblem mellan webbläsare, men du kan använda verktyget som jag kommer att beskriva senare för att generera dessa automatiskt.
Här är koden för CSS-lutningar:
.box_gradient {bakgrund-färg: # 3f9fe3; bakgrund-bild: -moz-linjär-gradient (övre, # 3f9fe3, # vit); / * FF3.6 * / bakgrund: -moz-linjär gradient (övre, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (övre, # 3f9fe3, #white); / * IE10 * / bakgrund-bild: -o-linjär gradient (övre, # 3f9fe3, # vit); / * Opera 11.10+ * / background-image: -webkit-gradient (linjär, vänster överst, vänster botten, från (# 3f9fe3), till (#white)); / * Saf4 +, Chrome * / bakgrund-bild: -webkit-linjär-gradient (övre, # 3f9fe3, # vit); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: linjär gradient (övre, # 3f9fe3, # vit); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# vit'); / * IE6 – IE9 * / }
Rotation
Det är svårt att föreställa sig en användning av detta i form av text, men det kan lägga till några trevliga designelement när du till exempel använder bilder. Lägg märke till att även om det här stycket har roterats kan du fortfarande välja och interagera med det eftersom det förblir vanlig text.
Här koden för att rotera något:
.box_rotate {-moz-transform: rotera (7,5 deg); / * FF3,5 + * / -o-transform: rotera (7,5 deg); / * Opera 10.5 * / -webkit-transformation: rotera (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotera (7.5deg); / * IE9 * / transform: rotera (7,5 deg); filter: progid: DXImageTransform. Microsoft. Matrix (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, dimensionering Metod = 'auto expand'); zoom: 1; }
Animering
Åh ja, jag räddade det bästa till sist. CSS3 introducerar olika former av animering för alla antal coola CSS-effekter som beskrivs. I det här stycket har jag definierat övergångsegenskapen enligt listan nedan, samt en enkel bakgrundsfärg och rotation när du håller muspekaren över den. Om du inte redan är det, håll muspekaren över det här stycket i texten nu för att se effekten i handling. Du kan animera ganska mycket vad som helst!
Du behöver övergångskoden så här till alla element du vill ändra. Du kommer också att behöva använda några pseudo CSS-klasser (som: sväva för att ändra alla egenskaper du vill animera, till exempel färg, storlek eller rotation)
.box_transition {-moz-övergång: alla 0,5-s lätthet-out; / * FF4 + * / -o-övergång: alla 0.5-s-lätthet; / * Opera 10.5+ * / -webkit-övergång: alla 0,5-tal underlätta; / * Saf3.2 +, Chrome * / -ms-övergång: alla 0,5-tal underlätta; / * IE10? * / övergången: alla 0,5-s lätthet; }
Inkompatibiliteter mellan webbläsare
Även om de flesta moderna webbläsare stöder alla CSS3 på vissa sätt, kräver vissa fortfarande lite annorlunda kod eller hacks för att det ska fungera med deras specifika implementering av standarden. I koden ovan ser du till exempel många förekomster av -moz- eller -webkit föregående några av CSS-egenskaperna, som avser antingen Mozilla-baserade eller Webkit-baserade webbläsare. Att skriva dessa extra rader kan dock vara en smärta, så kolla in css3 generator att skriva dem åt dig.
Slutsats
Webben kommer att bli mycket mer spännande med de nya CSS3- och HTML5-förlängningarna. Visst kommer vi att se ytterligare en sprut av blinkande text och ett högt förhållande av whiz-bang till verkligt innehåll (precis som vi gjorde när animerade GIF var först "upptäckta") men på lång sikt kommer vi att lära oss att använda verktygen i CSS3 för att göra mer intressant webb gränssnitt. Och hej, du kan alltid stänga av allt!
Om du själv är en designer eller webbutvecklare, kom bara ihåg att CSS3 aldrig borde vara det enda alternativet. Om din webbplats inte fungerar utan CSS3 har du inte använt den korrekt. CSS bör användas för att förbättra upplevelsen, inte programfunktionaliteten.
James har en kandidatexamen i artificiell intelligens och är CompTIA A + och Network + certifierad. Han är ledande utvecklare av MakeUseOf och tillbringar sin fritid med att spela VR-paintball och brädspel. Han har byggt datorer sedan han var liten.
