CSS3 va aduce câteva facilităţi extraordinare


Recunosc că nu am urmărit CSS3 prea mult. Pentru că nu este încă realitate oficială. Dar pe de altă parte diverse navigatoare încep să suporte unele specificaţii, aşa că – fie că ne dăm seama, fie că nu – deja mai multe situri folosesc unele elemente CSS3, având grijă să nu afecteze vizual în navigatoarele mai “vechi”. Firefox (3.6 în speţă) şi Chrome (nu perfect) se descurcă cel mai bine la acest capitol. Un articol de ieri mi-a atras atenţia: CSS3 Techniques You Should Know. M-au incitat unele efecte aşa că m-am gândit să le verific personal. Aşa s-a născut o mică pagină ce o puteţi încărca de aici.

imagine

Încărcată în Firefox 3.6 arată ca mai sus. În Chrome (ultima versiune, 5) textul nu e pus pe coloane iar gradientul nu se vede. În schimb în IE8 nici măcar umbra textului nu se vede. Va veni însă ziua când toate navigatoarele vor suporta specificaţiile (finale) ale standardului CSS3. Dar să vedem care sunt elementele de surpriză mai sus:

  • textul pus pe trei coloane e un div (nu sunt trei div-uri, nu este tabel… vedeţi în sursă ca să vă convingeţi)
  • gradientul nu e imagine (din nou 100% CSS3)
  • textul cu umbră e tot text normal (selectaţi-l), doar că evident “împodobit” cu CSS3.

La div-ul pentru textul pe trei coloane am scris doar atât:

[CSS]#multiColumns {
-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;
}[/CSS]

Evident că punând în loc de 3 să zicem 5 obţinem cinci coloane. Da, atât de uşor! Bravo CSS3. Nici gradientul nu e mai greu de obţinut:

[CSS]#gradient {
height: 120px;
background-color:#2e3192;
background: -moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#069), to(#036));
}[/CSS]

Dacă veţi parcurge articolul indicat la început veţi găsi şi alte lucruri interesante legate de CSS3. Dacă v-am deschis cumva apetitul pentru CSS3 atunci vă recomand nişte articole de pe SmashingMagazine: de anul trecut un cheat sheet în PDF; The New Hotness: Using CSS3 Visual Effects (25 ianuarie 2010); 50 Brilliant CSS3/JavaScript Coding Techniques (1 februarie 2010); Push Your Web Design Into The Future With CSS3 (8 ianuarie 2010); Stronger, Better, Faster Design with CSS3 (16 decembrie 2009); Pushing Your Buttons With Practical CSS3 (2 decembrie 2009); Take Your Design To The Next Level With CSS3 (15 iunie 2009). Din alte surse poate vă interesează 47 Amazing CSS3 Animation Demos şi 10 Amazing Examples of Innovative CSS3 Animation.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (4 evaluări, media: 4,75 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *