5 Coola CSS3-effekter du får se mer av

CSS3 (kombinerad med kraften i HTML5) stöds snabbt av alla större webbläsare (läs - allt utom Internet Explorer), så jag tänkte nu vara en bra tid att se några av de snygga CSS-effekterna vi kan uppnå med hjälp av kraften av din webbläsare och en liten CSS-kod. Du bör kunna se alla effekter som visas i den här artikeln om du använder den senaste Chrome-, Safari- eller Firefox-webbläsaren.

Först - Vad är CSS?

Om du läser den här artikeln eftersom du är fascinerad men ingen aning om vad CSS betyder, låt oss förklara mig snabbt. CSS är det kodningsspråk som används för att dekorera webbsidor. Det står för Cascading STyle Sheter, och lägger i grund och botten bara stil och känsla till en webbplats. Webbplatser är säkert läsbara utan deras CSS, men de är grymma precis som alla webbplatser var tillbaka 1995. Även om HTML-filer beskriver strukturen och textinnehållet på en sida, visar CSS dem på sätt utformaren tänkt och bestämmer allt från sidlayout, textstorlek och färger, och nu ett antal fina effekter med introduktionen av CSS3.

I det förflutna skulle ha uppnått samma slags effekter som de som beskrivs i denna artikel ha inneburit att ladda ner skrymmande CSS eller till och med större grafik. Nu kan CSS bara beskriva för din webbläsare hur det skulle vara att sidan ska se ut, och webbläsaren hanterar behandlingen. Det är som att jag ger dig planer på 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 solidifieras detta i CSS3. Ta en titt på rutan som omger denna paragraf. Det är inte en bild - försök högerklicka på den för att se. Ren CSS!

Koden för avrundade hörn är väldigt lätt:

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

Textskugga

Text kan ibland se väldigt hård ut, men en enkel liten skugga hjälper verkligen saker. Kolla in skuggan jag har tillämpat på denna paragraf.

Här är koden för några textskuggor:

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

gradienter

Inga fler platta färger eller bakgrundsgradientbilder, nu kan du skapa en cool gradient med endast 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-gradienter:

.box_gradient bakgrundsfärg: # 3f9fe3; bakgrundsbild: -moz-linjär-gradient (topp, # 3f9fe3, #white); / * FF3.6 * / bakgrund: -moz-linjär gradient (topp, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / bakgrundsbild: -ms-linjär-gradient (topp, # 3f9fe3, #white); / * IE10 * / bakgrundsbild: -o-linjär-gradient (topp, # 3f9fe3, #white); / * Opera 11.10+ * / bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, från (# 3f9fe3), till (#white)); / * Saf4 +, Chrome * / bakgrundsbild: -webkit-linjär-gradient (topp, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: Linjär-gradient (topp, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

Rotation

Det är svårt att föreställa sig en användning för detta när det gäller text, men det kan till exempel lägga till några fina designelement när man använder bilder. Återigen märker att även om denna paragraf har roterats, kan du fortfarande välja och interagera med det eftersom det fortfarande är vanlig text.

Här koden att rotera något:

 .box_rotate -moz-transform: rotera (7.5deg); / * FF3.5 + * / -o-transform: rotera (7.5deg); / * Opera 10.5 * / -webkit-transform: rotera (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotera (7.5deg); / * IE9 * / transform: rotera (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;  

Animering

Åh ja, jag räddade det bästa "till sist. CSS3 introducerar olika former av animering för valfritt antal av de kalla CSS-effekterna som beskrivs. I den här paragrafen har jag definierat övergångsegenskapen enligt nedan, liksom en enkel bakgrundsfärg och rotation när du svävar över den. Om du inte redan är, svänger du över det här stycket av text nu för att se effekten i åtgärd. Du kan animera ganska mycket vad som helst!

Du behöver övergångskoden som den här till något element du vill ändra. Du måste också använda några pseudo-CSS-klasser (till exempel: svep för att ändra egenskaper som du vill animera, till exempel färg, storlek eller rotation)

 .box_transition -moz-transition: all 0.5s easy-out; / * FF4 + * / -o-övergång: alla 0.5s uthyrning; / * Opera 10.5+ * / -webkit-övergång: alla 0.5s uthyrning; / * Saf3.2 +, Chrome * / -ms-övergång: alla 0.5s uthyrning; / * IE10? * / övergång: alla 0.5s uthyrning  

Cross Browser Inkompatibiliteter

Även om de flesta moderna webbläsare stöder alla CSS3 på vissa sätt behöver vissa fortfarande lite annorlunda kod eller hackar för att få det att fungera med deras specifika implementering av standarden. I koden ovan till exempel ser du många instanser av -moz- eller -webkit-förutse några av CSS-egenskaperna, som relaterar till antingen Mozilla-baserade eller Webkit-baserade webbläsare. Att skriva dessa extra linjer kan vara en smärta, men kolla in css3-generatorn för att skriva dem för dig.

Slutsats

Webben kommer att bli mycket mer spännande med de nya CSS3- och HTML5-tilläggen. Beviljas, vi kommer att se en ny spurt av blinkande text och ett högt förhållande av whiz-bang till riktigt innehåll (precis som vi gjorde när animerade GIF-filer var först “upptäckt”) men i det långa loppet lär vi oss att använda verktygen i CSS3 för att göra mer intressanta webbgränssnitt. Och hej, du kan alltid stänga av det hela!

Om du själv är en designer eller webbutvecklare, kom 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 ska användas för att förbättra upplevelsen, inte programfunktionalitet.

Utforska mer om: HTML, HTML5, Programmering, Webbutveckling.