CSS3 : colonnes multiples

Créer de multiples colonnes, comme dans un journal, était possible avant le CSS3 mais il fallait utiliser le mode flottant et diviser le contenu en plusieurs morceaux, et ce n’était pas compatible avec du contenu dynamique.

Avec les colonnes CSS3 tout devient simple et le navigateur gère lui-même le contenu sur plusieurs colonnes. Le seul souci est que la prise en charge n’est pas encore vraiment satisfaisante :

Mais ça ne nous empêche pas de commencer à l’utiliser !

Le nombre de colonnes

La première propriété essentielle est celle du nombre de colonnes column-count. La valeur par défaut est auto qui signifie une seule colonne (autrement dit elle ne sert à rien…).

Par exemple si on veut 3 colonnes on va écrire ceci (JSFiddle) :

div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Pour une fois je signale les préfixes parce que sinon ça ne fonctionnera pas sur les principaux navigateurs.

Le texte va ainsi se répartir harmonieusement sur trois colonnes :

L’écart entre les colonnes

Par défaut on a un petit écart entre les colonnes (en général 1em). On peut agir sur ce paramètre avec la propriété column-gap (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;
}

Cette fois on a un écart plus important entre les colonnes :

La largeur des colonnes

La largeur des colonnes découle automatiquement de la place disponible. Si on veut 3 colonnes et que la largeur disponible diminue on va obtenir ce genre de résultat :

Ce n’est pas forcément souhaitable pour la lisibilité. Avec la propriété column-width on peut imposer une largeur minimale (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
}

Dans ce cas de figure si on ne dispose pas de suffisamment d’espace le nombre de colonnes se réduit automatiquement :

Un trait de séparation

Par défaut entre les colonnes on a un espace vide. Avec la propriété column-rule on peut spécifier qu’on désire un trait. On peut choisir le type de trait, l’épaisseur et la couleur. Voici un exemple (JSFiddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule-style: dashed;
  -moz-column-rule-style: dashed;
  column-rule-style: dashed;
  -webkit-column-rule-width: .2em;
  -moz-column-rule-width: .2em;
  column-rule-width: .2em;
  -webkit-column-rule-color: blue;
  -moz-column-rule-color: blue;
  column-rule-color: blue;
}

Avec ce résultat :

Vous pouvez simplifier la syntaxe en regroupant les règles :

-webkit-column-rule: .2em dashed blue;
-moz-column-rule: .2em dashed blue;
column-rule: .2em dashed blue;

Occuper plusieurs colonnes

Il peut arriver de vouloir qu’un titre (ou autre) s’étale sur plusieurs colonnes, pour réaliser cela on dispose de la propriété column-span. Elle ne fonctionne malheureusement pas encore sur Firefox, ce qui en limite l’intérêt. Voici un exemple (JSFIddle) :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
div h2 {
  -webkit-column-span: all;
  column-span: all;
}

Avec ce résultat :

Le remplissage des colonnes

On a vu ci-dessus que le remplissage des colonnes se fait en sorte que le contenu soit équilibré. Si on désire un remplissage séquentiel on doit utiliser la propriété column-fill. Par défaut sa valeur est balance, c’est-à-dire un équilibre entre les colonnes. Si on utilise la valeur auto alors le remplissage devient séquentiel (on remplit complètement la première colonne, puis la seconde, etc…)

Voici un exemple (JSFiddle) :

div {
  height: 270px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-fill: auto;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
}

J’ai limité la hauteur avec une règle height à 270px. J’obtiens ce résultat :

On peut aussi se demander que devient le contenu qui ne rentre pas dans les colonnes imposées (overflow). Voici un exemple :

div {
  height: 150px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

Comme la hauteur est limitée le contenu excédentaire se place à droite et je me retrouve avec un ascenceur horizontal (c’est pas un ascenceur d’ailleurs !) :

Les ressources

Les ressources pour ces colonnes pultiples ne sont pas encore très nombreuses.

La spécification W3C est une bonne base.

Il y a une page MDN en français mais pas très complète.

Cette page en anglais est très bien illustrée d’exemples.

Les générateurs

Les générateurs aussi ne sont pas très nombreux, voici les 2 qui me semblent les plus intéressants :




CSS3 : animations

Avec les transformations on peut réaliser des animations d’éléments mais les possibilités sont limitées. On peut définir le départ et l’arrivée mais on a aucun contrôle sur les étapes intermédiaires. Les animations quant à elles autorisent ces contrôles intermédiaires et permettent de réaliser des choses beaucoup plus élaborées. C’est ce qu’on va voir dans cet article.

Je me suis d’ailleurs un peu amusé à créer un support d’exercice pour détendre son cou, ce qui est très utile lorsqu’on passe de nombreuses heures devant un écran !

Pour créer une animation CSS on doit :

  • créer et nommer l’animation (avec @keyframes)
  • attacher cette animation à un élément (avec animation-name)

Notre première animation

On commence par créer une animation :

@keyframes taille {
    from {width: 100px;}
    to {width: 200px;}
}

On utilise la règle @keyframes et on nomme l’animation taille.

Il existe quelques règles avec le signe @ (nommées at-rules) qui permettent d’encapsuler plusieurs règles pour le processeur CSS du navigateur, par exemple @media, @page

On va changer la largeur (width) de (from) 100px à (to) 200px.

On attache ensuite cette animation à un élément :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
}

On utilise :

  • animation-name : pour désigner l’animation utilisée
  • animation-duration : pour définir la durée de l’animation (par défaut c’est 0)

Vous avez ça en action ici.

Plusieurs étapes

L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une nouvelle version de l’animation :

@keyframes taille {
    0% {width: 100px;}
    50% {width: 200px;}
    100% {width: 100px;}
}

On a 3 étapes :

  • le départ (0%) avec une largeur de 100px
  • la moitié (50%) avec une largeur de 200px
  • l’arrivée (100%) avec une largeur de 100px

Vous avez ça en action ici.

Plusieurs propriétés

On peut aussi changer plusieurs propriétés :

@keyframes taille {
    0% {width: 50px; background-color: red}
    25% {width: 100px; background-color: yellow}
    50% {width: 150px; background-color: green}
    75% {width: 200px; background-color: blue}
}

Là on a 4 étapes avec une largeur qui augmente et la couleur de fond qui change de façon fluide.

Vous avez ça en action ici.

Démarrage différé

Dans les exemple ci-dessus l’animation commence dès le chargement, ce qui n’est pas toujours souhaitable. On dispose de la propriété animation-delay pour différer le départ de la durée voulue.

En poursuivant notre exemple ça pourrait donner ce code :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-delay: 2s;
}

Vous avez ça en action ici.

Nombre d’exécutions

Par défaut une animation est exécutée une seule fois, si on en veut plus il faut utiliser la propriété animation-iteration-count. Toujours avec notre exemple :

div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-iteration-count: 2;
}

Cette fois l’animation est exécutée 2 fois. En action ici.

Si on veut un nombre d’exécutions infini au lieu de mettre une valeur on entre infinite.

Sens de l’animation

Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à aller dans l’autre sens en utilisant la propriété animation-direction. On dispose de deux valeurs :

  • reverse : on va dans le sens inverse
  • alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir au moins deux exécutions)
div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Ici on a un nombre d’exécutions infini et un mode alterné.

En action ici.

Progression de l’animation

On peut modifier l’animation avec la propriété animation-timing-function et ces valeurs :

  • ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut)
  • linear : même vitesse du début à la fin
  • ease-in : début lent
  • ease-out : fin lente
  • ease-in-out : début et fin lents
  • cubic-bezier(n,n,n,n) : là on peut tout définir avec une courbe de Bezier

On a vu ça dans l’article précédent pour les transformations, c’est le même principe.

Vous avez une page de démonstration ici.

Le style avant et après l’animation

Le style avant et après l’animation est défini par défaut par les règles de l’élément. On a la possibilité de changer ce comportement en utilisant la propriété animation-fill-mode. On dispose de ces valeurs :

  • none : comportement par défaut (en gros ça sert à rien)
  • forwards : on garde les valeurs calculées lors de la dernière étape
  • backwards : on garde les valeurs calculées lors de la première étape

L’interprétation peut être délicate selon les répétitions et sens des animations. Vous pouvez trouver une bonne analyse sur cette page.

Par exemple avec ce code :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    width: 200px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

Au départ et pendant le délai de démarrage la largeur sera de 50px qui correspond à la première étape parce qu’on a utilisé la valeur backwards pour animation-fill-mode.

En action ici.

Action sur une animation

Pour l’instant on n’a pas vu de possibilité d’intervention sur une animation. On dispose de la propriété animation-play-state qui permet une interaction avec ces valeurs :

  • running : valeur par défaut de l’animation en action
  • paused : animation en pause

Voici le code d’un exemple où on met l’animation en pause en survolant l’élément :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
div:hover {
    animation-play-state: paused;
}

En action ici.

On peut faire exactement l’inverse et mettre l’animation en action seulement au survol :

@keyframes taille {
    0% {width: 50px}
    100% {width: 200px}
}
div {
    height: 100px;
    background-color: blue;
    animation-name: taille;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-play-state: paused;
}
div:hover {
    animation-play-state: running;
}

En action ici.

On peut aussi gérer une animation avec Javascript, vous avez un exemple ici.

Ressources pour les animations

La meilleure ressource est celle de MDN.

Les spécifications W3C sont ici.

Une bonne introduction en français.

Une page qui montre de nombreuses possibilités et constitue une bonne source d’inspiration.

Exemples d’animations

Il existe une multitude d’exemples d’animations ! Par exemple ce petit sous-marin :

Ou cet oiseau sympathique et apathique :

Ou cet impressionnant système solaire :

Les générateurs

On trouve aussi des générateurs :

Ils proposent quelques démos.




CSS3 : transformations et transitions

Le CSS3 permet d’effectuer des transformations comme des translations ou des rotations de n’importe quel élément de la page. D’autre part avec les transitions la page peut devenir et s’animer selon les actions de l’utilisateur dont la plus fréquente est le passage du curseur de la souris. Je vous propose dans cet article d’explorer ces possibilités.

Les transformations

Pour les transformations on a la propriété transform. Ca ne fonctionne qu’avec les éléments de type boîte mais on peut facilement étendre l’action aux autres éléments avec inline-block.

Translation

Une translation est un déplacement horizontal ou vertical ou selon une direction quelconque. On dispose de ces fonctions :

  • translateX(n) : translation de n sur l’axe x
  • translateY(n) : translation de n sur l’axe y
  • translate(x, y) : translation vers le point de coordonnées x et y

Et pour la 3D :

  • translateZ(n) : translation de n sur l’axe z
  • translate3d(x,y,z) : translation vers le point de coordonnées x, y, z

Voici une représentation de cette translation sur l’axe x (JSFiddle) :

Je pense que c’est simple et intuitif. Vous pouvez jouer avec cette fonction sur cette page. Vous avez aussi cette page identique pour l’axe y.

Pour effectuer une translation vers un point quelconque c’est aussi simple (JSFiddle) :

Ici on effectue une translation de 40px sur l’axe x et de 70 px sur l’axe y. Il existe aussi une page pour jouer avec cette fonction.

Perspective

Si on fait une translation sur l’axe z on ne va rien voir de spécial parce que la vue est en 2D. Pour avoir un effet il faut changer la perspective et il existe une propriété pour ça : perspective. C’est comme si on éloignait l’élément de la vue, du coup on acquiert une profondeur et alors une translation sur l’axe z devient visible (JSFiddle) :

On pourrait éloigner l’objet avec une valeur négative. La perspective doit être précisée dans le parent !

Il est aussi possible de modifier l’origine de la vue avec perspective-origin. On doit préciser les valeurs de x et y (par défaut on a 50% et 50%) :

Vous pouvez jouer avec ces éléments de perspective sur cette page :

Comme ces notions ne sont pas faciles à visualiser je vous conseille les excellentes illustrations du W3C.

Dimensionnement (scale)

Un dimensionnement est un changement de la taille d’un élément. On dispose de ces fonctions :

  • scaleX(n) : changement de la dimension de n sur l’axe x
  • scaleY(n) : changement de la dimension de n sur l’axe y
  • scale(x, y) : changement de la dimension de x et y

Et pour la 3D :

  • scaleZ(n) : changement de la dimension de n sur l’axe z
  • scale3d(x,y,z) : changement de la dimension de x, y et z

Voici une représentation de cette transformation sur l’axe x (JSFiddle) :

Je pense que c’est simple et intuitif. Vous pouvez jouer avec cette fonction sur cette page. Vous avez aussi cette page identique pour l’axe y.

Pour effectuer une modification de taille simultanément sur les deux axes c’est aussi simple (JSFiddle) :

Il existe aussi une page pour jouer avec cette fonction.

Rotation

Une rotation est une… rotation d’un certain angle autour d’un centre. On dispose de ces fonctions :

  • rotateZ(n) : changement de la dimension de n sur l’axe z
  • rotate(n) : rotation de n sur l’axe z (équivalent à rotateZ)

Et pour la 3D :

  • rotateX(n) : rotation de n sur l’axe x
  • rotateY(n) : rotation de n sur l’axe y
  • rotate3d(x,y,z, angle) : rotation 3D

Voici une représentation d’une rotation sur l’axe z (JSFiddle) :

Vous pouvez jouer avec cette fonction sur cette page.

Si on utilise l’axe x ou y alors on fait une rotation 3D (JSFiddle) :

Si vous avez du mal à lire (on se demande bien pourquoi !) au dessus on a une rotation sur l’axe x de 160 degrés et au-dessous une rotation sur l’axe y de 15 degrés.

Mais là on est en 2 dimensions et ça reste plat. Pour passer en 3 dimensions il faut ajouter de la perspective, par exemple le cas ci-dessus en mettant un perspective: 150px; dans le contenant donne quelque chose de plus réaliste :

Par défaut l’axe est placé au centre de l’élément. Si on veut changer ce comportement par défaut il faut utiliser la propriété transform-origin. Pour bien visualiser cela rien de tel qu’une démonstration en ligne :

Dommage que le centre de rotation ne soit pas visualisé dans l’animation mais c’est plutôt parlant.

On peut aussi décaler l’origine d’une perspective avec perspective-origin. En reprenant encore le cas ci-dessus avec perspective-origin: 20% 20%; dans le contenant on obtient cet aspect :

Biais (skew)

Le biais (skew) est plus facile à montrer qu’à expliquer donc je ne m’y risque pas !

On dispose de ces fonctions :

  • skewX(angle) : déforme sur l’axe x de l’angle
  • skewY(angle) : déforme sur l’axe y de l’angle
  • skewY(angle x, angle y) : déforme sur les axes y et y

Voici une représentation sur l’axe x et sur l’axe y (JSFiddle) :

Vous pouvez jouer avec cette fonction sur cette page pour l’axe x et celle-ci pour l’axe y.

Voici un exemple avec la fonction skew :

Vous pouvez aussi jouer avec cette fonction sur cette page.

Ressources pour les transformations

On trouve des générateurs :

Un avantage de ces générateurs est qu’ils donnent le code avec les préfixes pour les différents navigateurs.

On trouve aussi des tutoriels et documentations :

Les transitions

Les transformations c’est bien mais elles trouvent tout leur intérêt dès qu’on les anime. Il n’y a pas si longtemps que ça la seule façon de créer des animations était d’utiliser Javascript. Avec CSS3 ce temps est révolu et on peut faire beaucoup de choses avec seulement des règles CSS.

En gros les transitions permettent de faire changer progressivement les valeurs des propriétés CSS. Par exemple on passe le curseur de la souris au-dessus d’un bouton et celui-ci change progressivement de couleur.

Les transitions sont déclarées en même temps que les règles auxquelles elles se réfèrent. Le navigateur sait ensuite ce qu’il a à faire.

Transition sur une propriété

Prenons un exemple simple de survol. On part d’une boite de 100px par 100px et on veut au survol que la hauteur passe progressivement à 120px. Comment réaliser cela ? On doit :

  • déclarer la propriété de départ de façon classique
  • déclarer la propriété comme devant être transitionnée avec la durée de l’effet
  • déclarer dans la règle finale la nouvelle valeur de la propriété

Ca va être plus clair avec l’exemple !

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: height 1s;
}
div:hover {
    height: 120px;
}

Au départ on a la boîte de 100px sur 100px, bleue et on déclare qu’on veut une transition sur la hauteur qui doit durer 1 seconde.

Au survol (hover) on définit la hauteur finale de 120px.

Vous avez l’exemple actif en JSFiddle.

Transition sur plusieurs propriétés

On n’est pas limité à une propriété, on pourrait changer par exemple la largeur en même temps que la hauteur :

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: height 1s, width 2s;
}
div:hover {
    height: 120px;
    width: 80px;
}

Vous avez l’exemple actif en JSFiddle.

Progression de la transition

On peut modifier la transformation avec la propriété transition-timing-function et ces valeurs :

  • ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut)
  • linear : même vitesse du début à la fin
  • ease-in : début lent
  • ease-out : fin lente
  • ease-in-out : début et fin lents
  • cubic-bezier(n,n,n,n) : là on peut tout définir avec une courbe de Bezier

Vous pouvez tester toutes ces possibilités sur cette page.

En ce qui concerne les courbes de Bezier je vous conseille cet excellent générateur :

On peut ainsi obtenir exactement le comportement qu’on désire ! Je vous ai mis un exemple ici.

Les propriétés

La propriété transition est un raccourci pour les 4 propriétés suivantes :

  • transition-property : la ou les propriétés touchées par la transition
  • transition-duration : durée de la transition
  • transition-timing-function : progression de la transition (par défaut ease)
  • transition-delay : délai pour le départ de la transition

Transition d’une transformation

On peut évidemment appliquer une transition sur les transformations qu’on a vues ci-dessus. On pourrait par exemple ajouter une rotation au changement de la largeur vu ci-dessus :

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 2s, transform 2s;
}
div:hover {
    width: 200px;
    transform: rotate(180deg);
}

Vous avez ça en action ici.

Exemples intéressants de transitions

Il est toujours intéressant d’avoir des exemples de réalisations. Je me suis un peu amusé dans cet exemple. Je vous en propose d’autres qui me semblent valoir la visite :

Ressources pour les transitions

Il y a une page MDN très bien faite.

Pour la spécification W3C c’est par ici.

Il y a un bon tutoriel sur Alsacreation.

Et évidemment comme d’habitude il faut des préfixes pour certains navigateurs  mais comme je vous l’ai déjà dit, automatisez cette tâche ! Par exemple avec gulp-autoprefixer.




CSS3 : dégradés et fonds

Après avoir vu les arrondis et ombres dans le précédent article je vous propose à présent de voir les dégradés et les fonds. Le CSS3 permet la création d’esthétiques dégradés linéaires ou radiaux. D’autre part il est possible d’avoir de multiples fonds, ce qui autorise une grande créativité.

Les dégradés linéaires

Un dégradé linéaire est un changement progressif de couleur qui suit une ligne droite, par exemple de gauche à droite, ou l’inverse, ou de haut en bas, ou de n’importe quel point à n’importe quel autre point. On trouve cela dans tous les logiciels de création graphique, comme Gimp par exemple.

Il suffit de déterminer la couleur de départ, la couleur d’arrivée, et les éventuelles couleurs intermédiaires et le navigateur crée le dégradé pour nous en ajoutant les couleurs entre ces repères avec une progression douce.

Avec deux couleurs

La propriété à utiliser est background avec un linear-gradiant, voici un premier exemple (JSFiddle) :

On définit la couleur de départ (vert) et la couleur d’arrivée (cyan). Par défaut le dégradé est vertical de haut en bas.

Pour changer la direction on a le choix de la syntaxe, elle peut être explicite :

  • to top
  • to right
  • to bottom
  • to left

Et on peut les associer : to top right, to bottom left…

Mais on peut aussi spécifier un angle en degrés (avec 0deg on pointe vers le haut) et on tourne dans le sens des aiguilles d’une montre (même si  les montres n’ont plus d’aiguilles aujourd’hui) :

Vous pouvez utiliser des angles négatifs, ça tourne alors dans l’autre sens !

Avec plus de deux couleurs

Il est possible d’insérer une (ou plusieurs) couleur(s) intermédiaire(s) :

On peut par exemple reproduire les couleurs du prisme :

Par défaut une couleur intermédiaire se positionne entre ses encadrantes, avec une valeur en pourcentage on peut la localiser où on veut :

La transparence

Si on utilise la transparence pour les couleurs alors le dégradé en tient compte :

La répétition

On peut aussi répéter un dégradé :

Les dégradés radiaux

Ce qu’on a vu pour les dégradés linéaires est valable pour les dégradés radiaux (JSFiddle) :

Par défaut le dégradé est circulaire et centré. Si on veut une ellipse il faut le préciser :

On peut changer la position du centre du dégradé (on peut aussi utiliser des valeurs numériques) :

On peut aussi définir sa dimension :

On dispose de ces mot-clés pour la dimension :

  • closest-side : le bord du dégradé arrive aux bords les plus proches de la boîte :

 

  • farthest-side : le bord du dégradé arrive aux bords les plus éloignés de la boîte :

  • closest-corner : le bord du dégradé arrive au coin le plus proche de la boîte :

  • farthest-corner : le bord du dégradé arrive au coin le plus éloigné de la boîte :

Avec plus de deux couleurs

Il est possible d’insérer une (ou plusieurs) couleur(s) intermédiaire(s) :

La transparence

Si on utilise la transparence pour les couleurs alors le dégradé en tient compte :

La répétition

On peut aussi répéter un dégradé radial :

Les préfixes

Pour simplifier les choses les navigateurs ne digèrent pas tous la syntaxe de base. Il faut donc utiliser les préfixes(moz, webkit, ms et o). Le plus simple est d’automatiser ça par exemple avec gulp-autoprefixer. Il y a également des préfixeurs en ligne :

Ressources pour les dégradés

La principale ressource est la spécification du W3C.

J’aime bien également les pages MDN.

Mais le plus intéressant est sans conteste les générateurs, il en existe de nombreux, en voici deux intéressants :

Le fond

Avec le CSS3 on dispose de nouveaux réglages pour le fond (background). On peut même définir plusieurs fonds avec la propriété background-image.

Avec le CSS2 on avait déjà ces propriétés pour le fond :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

En pouvant d’ailleurs regrouper toutes les valeurs avec background en une seule ligne.

Le CSS3 introduit de nouvelles propriétés :

  • background-size
  • background-origin
  • background-clip

La taille

On peut donc maintenant régler la taille avec background-size.

Prenons l’exemple d’une image de fleur un peu encombrante (JSFiddle) :

J’aimerais la réduire pour l’adapter au contenant (JSFiddle):

Ici j’ai mis une seule valeur, on peut en mettre deux pour définir largeur et hauteur.

On dispose aussi de contain et cover au lieu des valeurs numériques.

Avec contain la fleur s’étend tant qu’elle peut en restant entière :

Avec cover elle s’étend tant qu’elle peut dans la plus grande dimension mais elle n’est plus entière :

C’est pratique si on veut par exemple une image qui couvre entièrement le fond d’une page.

Pour mémoire l’image en background se répète par défaut, dans les exemples j’utilise la propriété no-repeat.

La position

Avec le CSS2 on peut positionner une image de fond avec background-position. On peut dire par exemple qu’on la veut en haut à droite.

Avec le CSS3 s’ajoute la propriété background-origin qui permet aussi de positionner l’image avec ces 3 possibilités :

  • border-box : l’image part du coin (j’ai représenté le padding en noir) , (JSFiddle) :

  • padding-box : l’image part du coin du padding (valeur par défaut)

  • content-box : l’image part coin du contenu :

Evidemment ces propriétés se combinent avec background-position :

La surface de peinture

On sait qu’avec la propriété background on peut donner une couleur au fond et cette couleur occupe tout l’espace.

Le CSS3 nous donne la possibilité de limiter avec background-clip la peinture du fond au padding ou au contenu. On retrouve les trois valeurs qu’on a vues ci-dessus pour la position :

  • border-box : la peinture occupe tout l’espace, c’est la valeur par défaut et en fait elle ne sert à rien.
  • padding-box : la peinture se limite aux bords du padding (JSFiddle) :

  • content-box : la peinture se limite au contenu :

Des fonds multiples

Avec CSS3 on peut aussi définir plusieurs images de fond. On utilise tout ce qu’on a vu ci-dessus en séparant les valeurs avec des virgules. Voici un exemple avec 3 images (JSFiddle) :

Avec ce code :

  background-size: 100px;
  background-image: url(img1), url(img2), url(img3);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat;

Les ressources

On a évidemment la spécification W3C.

On a aussi la page MDN et la page du W3 school.

Il existe de multiples ressources disséminées un peu partout et évidemment pas de générateur pour tout ça.




CSS3 : coins arrondis, ombres et couleurs

Je vous propose de poursuivre l’exploration des possibilités du CSS3 avec pour cet article la possibilité d’arrondir les coins des boîtes, de générer d’élégantes ombres et de gérer finement les couleurs.

Les couleurs

Le CSS3 nous apporte de nouvelles façons de définir les couleurs.

Classiquement on peut définir les couleurs :

  • par leur nom, par exemple red, yellow, brown (vous avez la liste complète ici ou directement dans la spécification W3C)
  • par le code hexadécimal, par exemple #22651f, ou en abrégé dans le genre #b52, on définit ainsi les couleurs primaires additives dans l’ordre rouge-vert-bleu
  • par la fonction rgb(), avec les valeurs de rouge-vert-bleu de 0 à 255 ou en pourcentage, par exemple rgb(50,240,30) ou rgb(50%,10%,90%)

Tout ça est déjà bien mais le CSS3 nous apporte aussi : HSL, HSLA et RGBA. Voyons cela de plus près…

RGBA

Le RGBA est comme le RGB mais avec une quatrième valeur pour l’alpha, autrement dit la transparence. Les valeurs autorisées vont de 0 (totalement transparent) à 1 (totalement opaque).

Voici un rendu simple de cette transparence (JSFiddle) :

HSL and HSLA

Le HSL est un système différent pour définir une couleur, on n’a plus les primaires comme avec le RGB mais :

  • la teinte (H) : une valeur entre 0 et 359 (0 => rouge, 60 => jaune, 120 => vert, 180 => cyan, 240 => bleu, 300 => magenta)
  • la coloration (S), on parle aussi de saturation, c’est un pourcentage. A 100% on a la couleur totale, et à mesure qu’on descend en pourcentage la couleur devient « délavée »
  • la luminosité (L), aussi un pourcentage avec comme repère la valeur moyenne 50%, au-dessus ça devient plus lumineux et en dessous plus sombre.

On prétend que ce système est plus intuitif que le RGB parce qu’il se rapproche du fonctionnement de l’oeil.

Plutôt que de vous faire un grand discours le mieux est d’aller s’amuser avec un générateur en ligne (certainement le plus joli disponible) :

Vous allez ainsi comprendre rapidement et visuellement à quoi correspondent les trois paramètres avec en prime l’équivalent en RGB.

Le HSLA est la version avec en plus la transparence.

Opacity

Il existe également la règle opacity indépendamment des règles de couleur vue ci-dessus.

A priori l’effet est le même qu’avec le paramètre de transparence de RGBA et HSLA (JSFiddle):

Mais avec opacity la transprence se transmet aux enfants, ce qui n’est pas le cas avec les fonctions. On peut le voir facilement en reprenant l’exemple ci-dessus en ajoutant un simple texte :

Des coins arrondis

Fonctionnement

Des coins arrondis sont bien plus jolis que des angles aigus. Avec le CSS3 les créer est très facile avec de simples règles comme on va le voir.

La syntaxe de base est celle-ci :

border-radius: 15px;

Voici un exemple avec cette règle (JSFiddle) :

La valeur correspond tout simplement au rayon du quart de cercle dessiné. Ici le rayon est de 15 pixels.

La règle est bien reconnue par les navigateurs actuels :

Lorsqu’on saisit une seule valeur on agit sur les 4 coins. On peut se demander ce qui se passe quand on entre plusieurs valeurs. Voici ce que ça donne (JSFiddle) :

En résumé :

  • avec 2 valeurs : la première agit sur les coins haut gauche et bas droit, la seconde sur les deux autres
  • avec 3 valeurs : la première agit sur le coin haut droit, la seconde sur les coins haut droit et bas gauche, la dernière sur le coin bas droit
  • avec 4 valeurs : elles agissent dans l’ordre : haut gauche, haut droit, bas droit, bas gauche

Mais la règle border-radius est une version abrégée de 4 autres règles.

On peut facilement obtenir une boîte circulaire :

Ce qui peut être pratique pour des photos ou des icônes.

La règle unique :

border-radius: 2em;

est un résumé de :

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

Ces 4 règles permettent une plus grande précision en autorisant le dessin d’ellipses. On va ainsi définir non pas le rayon du cercle mais les deux rayons de l’ellipse. Voici un exemple (JSFiddle) :

La première valeur correspond au rayon horizontal et la seconde au rayon vertical.

Mais il est aussi possible d’obtenir cette action elliptique avec le simple border-radius, c’est juste un peu moins explicite (JSFiddle):

Il suffit d’ajouter un slash, les valeurs à gauche correspondent aux rayons horizontaux, celles de droite aux rayons verticaux.

S’il en manque on applique les mêmes règles déjà vues ci-dessus.

Ressources

On trouve de nombreuses ressources pour ces coins arrondis.

Pour les spécifications officielles c’est ici.

Il existe des générateurs :

La page de MDN Mozilla qui reste une source de référence incontournable.

Une galerie intéressante.

Des ombres

Fonctionnement

Les boîtes

Le CSS3 permet de créer des ombres de boîte avec la règle box-shadow. On peut fixer :

  • la couleur
  • la dimension
  • le flou
  • le décalage

Voici un exemple (JSFiddle) :

Voyons les valeurs utilisées :

  1. décalage horizontal de 4px
  2. décalage vertical de 8px

Ce sont les valeurs obligatoires, les autres sont toutes optionnelles.

Par défaut les décalages se font à droite et vers le bas, mais avec des valeurs négatives on inverse le décalage :

On peut régler la couleur (JSFiddle) :

On peut aussi ajouter du flou en réglant son épaisseur (JSFiddle), ici de 5px :

Si les bords sont arrondis évidemment l’ombre l’est aussi :

On peut aussi régler la dimension de l’ombre (JSFiddle), en plus ou en moins :

Enfin on peut avoir l’ombre à l’intérieur (inset) :

Et rien n’empêche de mettre en place plusieurs ombrages :

La règle est bien supportée par les navigateurs :

Les texte

Le CSS3 permet de créer des ombres de texte avec la règle text-shadow. On peut fixer :

  • la couleur
  • la dimension
  • le flou
  • le décalage

Voici un exemple (JSFiddle) :

Voyons les valeurs utilisées :

  • décalage horizontal de 3px
  • décalage vertical de 3px

Ce sont les valeurs obligatoires, les autres sont toutes optionnelles.

Par défaut les décalages se font à droite et vers le bas, mais avec des valeurs négatives on inverse le décalage :

On peut régler la couleur :

On peut aussi ajouter du flou en réglant son épaisseur (ici 2px) :

On peut créer plusieurs ombres (JSFiddle) :

Les effets peuvent ainsi devenir intéressants !

Ressources

Boîtes

On trouve de nombreuses ressources pour ces ombres de boîtes.

On a bien sur la spécification du W3C.

Une page de démos variées et une autre.

Un article de MDN.

Il existe aussi des générateurs pour les boîtes, en voici quelques-uns :

Texte

On a aussi des ressources pour les ombres de texte :

Un article de MDN.

La spécification du W3C.

Learn How To Create Different CSS Box Shadow Effects.

Des exemples du W3C en français !

Des galeries d’exemples :

Des générateurs :

Exemples

Avec ces ombres on peut obtenir des effets séduisants, comme celui-ci issu de ce site :

Ou tous ces effets de ce site :

J’espère dans cet article vous avoir donné envie de tester tout ça si ce n’est déjà fait !




CSS3 : les sélecteurs

J’inaugure la catégorie CSS3 en commençant par un article sur les sélecteurs. Pourquoi les sélecteurs ? Parce qu’ils constituent le coeur du CSS. Si on ne les avait pas pour cibler des éléments des pages HTML on serait bien en peine pour appliquer des règles de style ou pour agir avec Javascript.

C’est un domaine qui a connu une lente évolution. Au départ on disposait seulement de sélecteurs pour les identifiant, les classes ou les types. Puis la collection s’est progressivement étendue. Avec le CSS3 on peut atteindre facilement n’importe quel élément.

Les sélecteurs du CSS3 sont maintenant pris en charge par la majorité des navigateurs modernes, même IE9 !

Plutôt que de rédiger un article long et laborieux j’ai préféré faire court tout en proposant en complément une page d’illustration dynamique. D’ailleurs si vous trouvez des bugs dans cette page merci de me les signaler pour que je les corrige.

Quant à la spécification officielle elle est ici.

Les sélecteurs relationnels

Les sélecteurs relationnels ciblent les éléments en fonction de leurs relation avec les autres éléments. Il en existe 4 :

  • relation descendante (E F) : on cible tous les descendants F de E, quelle que soit la profondeur hiérarchique
  • relation enfant (E > F) : on cible tous les descendants directs F de E
  • relation descendante (E + F) : on cible tous les F qui suivent directement E avec le même parent
  • relation descendante (E ~ F) : on cible tous les F qui suivent E avec le même parent

Les sélecteurs d’attributs

  • E[attr] : on cible tous les E qui ont l’attribut attr
  • E[attr=valeur] : on cible tous les E qui ont l’attribut attr égal à valeur
  • E[attr^=valeur] : on cible tous les E qui ont l’attribut attr qui commence par valeur
  • E[attr$=valeur] : on cible tous les E qui ont l’attribut attr qui finit par valeur
  • E[attr~=valeur] : on cible tous les E qui ont l’attribut attr qui comprend valeur entre deux espaces
  • E[attr*=valeur] : on cible tous les E qui ont l’attribut attr qui comprend valeur n’importe où

Les pseudo-classes

En dehors des pseudo-classes classiques (:hover, :focus, :visited, :link…) on en a quelques autres intéressants :

  • :enabled : on cible les éléments de formulaire qui n’ont pas l’attribut disabled appliqué
  • :disabled : on cible les éléments de formulaire qui ont l’attribut disabled appliqué
  • :checked : on cible les éléments de formulaire les boutons radio ou cases à cocher sélectionnés
  • :valid : on cible les éléments de formulaire valides (selon leur type, leur valeur, leurs attributs…)
  • :valid : on cible les éléments de formulaire non valides (selon leur type, leur valeur, leurs attributs…)
  • :required : on cible les éléments de formulaire qui ont l’attribut required appliqué
  • :optional : on cible les éléments de formulaire qui n’ont pas l’attribut required appliqué
  • :in-range : on cible les éléments de formulaire avec une plage de valeur respectée
  • :in-range : on cible les éléments de formulaire avec une plage de valeur non respectée

Les pseudo-classes structurelles

Avec les pseudo-classes structurelles on peut trouver les éléments selon leur localisation :

  • E:nth-child(n) : on cible les éléments E qui sont l’enfant n de leur parent
  • E:nth-last-child(n) : on cible les éléments E qui sont l’enfant n de leur parent en partant de la fin
  • E:nth-of-type(n) : on cible les éléments E qui sont l’enfant n de leur type de leur parent
  • E:nth-of-type(odd) : on cible les éléments E impairs de leur parent
  • E:nth-of-type(even) : on cible les éléments E pair de leur parent
  • E:nth-of-type(xn) : on cible les éléments E qui sont l’enfant modulo n de leur parent (on peut aussi avoir xn + 1)
  • E:nth-last-of-type(n) : on cible les éléments E qui sont l’enfant n de leur type de leur parent en partant de la fin
  • E:first-child : on cible les éléments E qui sont le premier enfant de leur parent
  • E:last-child : on cible les éléments E qui sont le dernier enfant de leur parent
  • E:first-of-type : on cible les éléments E qui sont le premier enfant de leur type de leur parent
  • E:last-of-type : on cible les éléments E qui sont le dernier enfant de leur type de leur parent
  • E:only-child : on cible les éléments E qui sont le seul enfant de leur parent
  • E:only-of-type : on cible les éléments E qui sont le seul enfant de leur type de leur parent
  • E:not(exception) : on cible les éléments E qui ne correspondent pas à exception

Les pseudo-éléments

Les pseudo-éléments sont un peu particulier. Ils permettent de cibler :

  • du texte présent sur la page mais non localisable avec l’arbre du DOM
  • des éléments présents sur la page mais pas atteignables avec l’arbre du DOM

D’autre part il est possible avec ces pseudo-éléments de générer du contenu (avec ::before et ::after), ce qui est bien pratique dans une optique dynamique.

  • ::first-letter : on cible la première lettre
  • ::first-line : on cible la première ligne de texte
  • ::before : on ajoute du contenu avant
  • ::after : on ajoute du contenu après
  • ::selection : on cible le texte sélectionné par l’utilisateur