Nouveautés CSS3 : du neuf dans vos designs

Certes, le sujet n’est pas nouveau. Mais avec les spécifications HTML5 maintenant arrêtés, après avoir fait précédemment dans ces pages un tour sur les nouvelles API HTML5, il peut être pas mal de s’arrêter pour faire une synthèse sur les nouveautés CSS3.
Embarquement pour la découverte de toutes les nouveautés offertes par CSS3.

Les médias queries

Vous avez sans doute entendu parler de Responsive Design, ou l’art d’adapter un site web en fonction de la résolution de l’appareil visitant le site web ? Par exemple si vous allez sur ce site 3200 tigres avec votre ordinateur et que vous vous amusez à réduire la taille de la fenêtre, vous verrez que comme par magie la structure du site évolue (le nombre de colonnes change, l’image apparaît ou non en fonction de la taille…). Et bien ce sont les médias queries CSS3 qui vont permettre ce genre de choses, en conditionnant vos instructions CSS par la résolution et la taille disponible. Cela passe par l’utilisation de l’instruction @media suivie du type, d’opérateurs logiques et de conditions.

Plus qu’un long discours, je vous propose quelques exemples de sites responsive (ce blog est un autre exemple) ainsi qu’un premier tutoriel en français et un deuxième en anglais. Une des nouveautés CSS3 majeures, notamment pour accompagner l’essor de la mobilité.

Les nouveaux sélecteurs

Vous connaissez déjà un certain nombre de sélecteurs CSS (par exemple #id pour un id du dom, .classe pour une classe…), mais CSS3 apporte beaucoup de nouveautés de ce côté là, notamment via les pseudo-classes et les pseudos-éléments. Vous allez pouvoir par exemple :

  • appliquer un style uniquement sur les lignes impaires d’un tableau (oublié la méthode à l’ancienne de la variable compteur en php et de l’affectation de la classe en fonction) ou sur la première ligne.
  • travailler sur les éléments sans enfant, ou travailler sur un enfant bien précis.
  • travailler sur les éléments contenant une certaine chaîne de caractères.
  • appliquer un style sur la première lettre d’une chaîne
  • ……..

C’est sans doute une des grandes avancées de CSS3 au vue de tout ce que cela peut apporter comme possibilités.
Un tuto complet : http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/
U
n récapitulatif sur les sélecteurs CSS, dont les nouveaux : http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre

Les arrière-plans multiples et les dégradés

Arrière-plans multiples
Il est maintenant possible d’avoir dans une boîte ou un élément plusieurs images à l’arrière plan. Les propriétés background-image et background-position permettent d’avoir plusieurs éléments comme dans cet exemple.
Des nouvelles propriétés font également leur apparition, comme background-sizebackground-clip ou background-origin. Vous pourrez trouver la syntaxe et l’utilité de ces propriétés sur cette documentation.
Vous pourrez par exemple en suivant ce tutoriel créer une image de fond extensible pour votre site.

Pendant que nous sommes dans les arrière-plans, petite parenthèse pour parler de l’effet parallaxe qui peut être obtenu avec plusieurs arrière-plans, du CSS et un peu de Javascript comme dans ce tutoriel. L’effet obtenu peut être carrément fun comme sur ce site en cliquant sur les petites flèches oranges au centre.

Dégradés
Toujours au chapitre des nouveautés CSS3 et des arrière-plans, vous avez maintenant la possibilité de jouer avec les dégradés via la propriété linear-gradient. Là encore vous allez pouvoir économiser des images.
Un tuto : http://babylon-design.com/bonnes-pratiques-degrades-css3/
U
n générateur : http://www.display-inline.fr/projects/css-gradient/#direction=bottom-right&startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc

Les transitions CSS

Toute une suite de propriétés permettant de faire des animations en CSS a vu le jour, avec transition-propertytransition-durationtransition-timing-function et transition-delay. Comme vous l’aurez compris, cela permet de définir une transition, avec sa durée, son délai de déclenchement et le déroulé de la transition (linéaire ou avec effets d’accélération ou de ralentissement). En combinant tout cela, vous allez pouvoir arriver à des animations complexes.

Quelques exemples d’animations : http://css3.bradshawenterprises.com/transitions/
U
n tuto complet : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
U
n ensemble de transitions CSS prêt à l’emploi : http://daneden.me/animate/
U
n article très complet sur le sujet également : http://www.adobe.com/devnet/html5/articles/using-css3-transitions-a-comprehensive-guide.html

Les polices non-standards

Le temps où il fallait choisir entre Arial et Helvetica comme police de site web est maintenant (enfin) révolu. Le propriété @font-face permet de définir une police externe que l’on pourra trouver à une url donnée. On peut le classer au rang des nouveautés CSS3, même si cette propriété était apparue en CSS2. En effet, elle avait été ensuite enlevée dans CSS2.1 faute de maturité suffisante.

La revoici donc, par contre, pour être sûr du rendu sur tous les navigateurs, il vous faudra les différents formats d’une police. Toutes les explications sont à lire sur cette page et vous pourrez trouver aussi un site dédié. Et si vous ne connaissez pas, vous pourrez trouver sur Google Web Fonts toute une série de polices qui sont hébergées sur les serveurs de Google et que vous pouvez utiliser du coup sans l’héberger sur votre site. Pour chacune de ces polices, vous aurez une jauge vous indiquant l’impact de la police sur le temps de chargement de vos pages.

Les effets de texte

Il est maintenant possible d’affecter des effets à du texte, notamment via la propriété text-shadow qui permet d’ajouter une ombre portée. Plusieurs paramètres existent, permettant de régler les positions de l’ombre (h-pos, v-pos), son floutage (blur) et sa couleur (color).
Un exemple :

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}

Alors, dis comme cela ça ne fait peut être pas rêver, mais en jouant un peu avec les possibilités offertes et avec un peu d’imagination cela peut déjà donner des rendus intéressants.

Un premier exemple avec la simulation avec text-shadow d’une lampe torche sur un texte :
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box2.html
8 exemples d’effets sur du texte, où vous pourrez trouver également une utilisation de la propriété « transform: rotate » pour des rotations de texte :
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
Pour des exemples détaillés sur les possibilités offertes, vous pouvez vous rendre sur le site du W3C ou sur cet  article chez Alsacreations.
A noter que vous pouvez aussi ajouter des effets d’ombre à vos boîtes via box-shadow.

Le multi colonnage

CSS3 permet enfin de gérer facilement des colonnes en CSS, ce qui avant relevait du challenge. C’est donc une des nouveautés CSS3 bienvenue, et qui évitera sans doute quelques crises de nerfs. Des nouvelles propriétés ont vu le jour (column-count, column-width, column-gap, column-rule) facilitant grandement la gestion des colonnes.

La syntaxe précise : http://www.w3schools.com/css3/css3_multiple_columns.asp
E
t si vous voulez encore plus vous faciliter la vie, vous pouvez utiliser un des framework CSS présenté dans cet article qui utilisent le multi-colonnage au travers de la notion de grille CSS.

Les transformations 3D

Il est possible de jouer en CSS3 sur les effets de perspective pour créer l’illusion d’une profondeur. Cela peut se faire via la propriété éponyme perspective, ou via transform: perspective.
Pour mieux comprendre les possibilités offertes, je vous invite à lire ce tutoriel ou bien encore celui-ci.
Toujours dans l’idée de 3d, vous avez également la fonction rotate3d qui va vous permettre d’animer vos boîtes dans l’espace.

La gestion de la transparence

Il est maintenant possible de jouer sur la transparence via la fonction Rgba, qui ajoute à la fonction Rgb la notion « alpha » gérant la transparence.
Un tuto : http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

Les coins arrondis

Fini les tableaux html avec un fond de couleur et des images à chaque coin pour faire des coins arrondis. Une des premières nouveautés CSS3 est la propriété border-radius qui permet d’arrondir les angles de vos boîtes.
Un tuto : http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html
E
t même un générateur : http://border-radius.com/

Quelques liens pour finir sur les nouveautés CSS3

Histoire que vous puissiez voir des applications concrètes de ce qu’il est possible de faire en CSS3, voici quelques exemples trouvés sur le net :

Dessiner des formes en CSS3 :
http://www.skeeg.info/comment-dessiner-des-formes-en-css3/

Des exemples CSS3 :
http://slodive.com/web-development/best-css3-animation-demos-tutorials/

Créer un slideshow :
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

47 exemples d’animations :
http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Un tutoriel complet utilisant les nouveautés CSS3 pour designer un site :
http://www.siteduzero.com/informatique/tutoriels/stylisez-votre-site-avec-css3