Accueil » Développement » CSS » Apprendre CSS3

Sommaire
  1. CSS3 : quelles possibilités ?
  2. Border-radius
  3. Text-shadow
  4. Dégradés
  5. Transparence et opacité
  6. Animations, transitions
  7. Transformations
  8. Media queries
  9. Filtres CSS
  10. Formes avancées
  11. Aller plus loin
  12. Démonstrations CSS3

CSS3 : quelles possibilités ?

Au commencement... il y avait CSS (Level 1). Si vous n'avez aucune ou peu de notions en CSS, un conseil : partez de zéro pour une meilleure compréhension de l'évolution de CSS.

En effet, depuis la première version, des avancées remarquables ont été réalisées. On peut donc se demander ce qu'apporte cette troisième version ?

Sachez tout d'abord que celle-ci n'est pas terminée (on parle de statut de recommandation W3C) et n'est pas entièrement supportée par tous les navigateurs, Internet Explorer en particulier (versions inférieures à IE10).

Contrairement à CSS1 et CSS2.1 (une nouvelle révision est en cours) qui se présentaient en un seul document, le troisième niveau de CSS se compose en une série de modules. Certains sont terminés, d'autres en cours ou en train d'être révisés. Il se peut même que certains modules du quatrième niveau soient finalisés avant certains du niveau inférieur.

CSS3 n'est pas un langage à proprement parler. Le CSS actuel que nous utilisons repose sur le deuxième niveau.

Concrètement, que peut-on faire de plus avec CSS3 ? Voyons cela dans le détail...

Border-radius (coins arrondis)

Exemple 1 :

.class{height:80px;width:80px;background:black;border-radius:5px}

Vous obtenez un carré noir avec chaque coin arrondi de 5 pixels :

Exemple 2 :

.class{height:80px;width:80px;background:blue;border-radius:50%}

Vous obtenez un rond bleu :

Text-shadow (pour les ombres portées ou incrustations)

Exemple 1 : Ombre portée

.class{text-shadow:2px 2px 2px #2f6486}

Ombre portée
Exemple 2 : Ombre inscrustée

.class{text-shadow:0 -1px 0 #3b82ae}

Ombre inscrustée

Dégradés linéaire et radial

Le CSS3 offre la possibilité de réaliser de superbes dégradés sur un background, une forme...

Dégradé linéaire :

.class{background:linear-gradient(to bottom,#50b6f6,#235472)}

Dégradé radial :

.class{background:radial-gradient(ellipse,#50b6f6,#235472)}

Transparence et opacité

Transparence :

.class{background:rgba(0,0,0,.5)}
.class{background:hsla(0,0%,0%,.5)}

On obtient un bloc avec une transparence de 50%. La couleur de départ étant noir.

Opacité :


.class{background:black;opacity:.5}

On obtient un bloc avec une transparence de 50%. La couleur de départ étant noir.

NB : il est possible de rendre un texte transparent :

Passez le curseur de votre souris sur ce texte


.class{color:transparent}

Animations CSS, transitions CSS

Auparavant, il fallait passer par JavaScript (même si c'est encore le cas dans certaines situations) pour animer des éléments.

Vous allez constater qu'avec CSS3, on peut désormais créer des animations et des transitions plus ou moins complexes en toute simplicité.

Animations CSS :

.votre_class{animation:votre_animation 3s infinite}
@keyframes votre_animation{from{transform:translatex(-100%)}to{transform:translatex(0)}}

Liste des propriétés que l'on peut animer

Transitions CSS :

On peut appliquer à la propriété transition les propriétés suivantes :

  1. transition-delay : indique le délai du début de la transition (en secondes ou millisecondes).
  2. transition-duration : indique la durée de la transition (en secondes ou millisecondes).
  3. transition-property : on renseigne les propriétés CSS à appliquer à la transition (ex : height, width, color...)
  4. transition-timing-function : indique la manière dont la vitesse varie durant la transition. Cette propriété est associée avec des mots-clé et/ou fonctions et valeurs suivantes :
    1. ease (par défaut : rapide au début, lent à la fin)
    2. ease-in (lent au début, rapide vers la fin)
    3. ease-out (rapide au début, plus lent à la fin)
    4. ease-in-out (lent au début et à la fin)
    5. linear (constant)
    6. fonction steps() : indique des intervalles à effectuer lors d'une transition.
      1. step-start : le changement de valeur s’effectue au début de chaque intervalle.
      2. step-end : le changement de valeur s’effectue à la fin de chaque intervalle.
    7. Initial : valeur globale par défaut.
    8. inherit : hérite de cette propriété de son élément parent.
    9. cubic-bezier (courbes de bézier) : les quatre valeurs possibles sont des valeurs numériques compris de 0 à 1. Par exemple le mot-clé ease correspond à cubic-bezier(.17,.67,.83,.67)
Exemples de transitions :

On applique dans l'exemple classique ci-dessous un changement progressif d'arrière-plan (passez votre souris sur le bloc bleu) :


.votre_class{transition:1s linear}/*expression raccourcie*/
.votre_class{transition-property:background-color;transition-duration:1s;transition-timing-function:linear}

Même exemple avec un délai (la transition se déclenche après un délai de 2 secondes) :


.votre_class{transition:2s 1s linear}/*expression raccourcie*/
.votre_class{transition-property:background-color;transition-duration:1s;transition-timing-function:linear;transition-delay:2s}

Autre exemple ci-dessous. On va utiliser la propriété transition pour agrandir un bloc :

Exemple avec la fonction steps() (passez la souris sur les blocs) :

step-start
step-end

Vous pouvez constater qu'il se passe quatre étapes avant la fin de la transition.

Bon à savoir :

Si vous placez vos transitions sur l'état de l'événement plutôt que sur l'état naturel de l'élément, la transition ne se produira que sur l'évènement.

Les transitions peuvent s'appliquer aux pseudo-classes (:hover, :focus, :active, :target, :checked...), aux pseudo-elements ::before et ::after ou encore sur les Media Queries.

Les transitions CSS ne fonctionnent qu'à partir d'IE10.

Media queries

Les media queries permettent d'adapter un site à différentes résolutions d'écran. Vous pouvez également changer l'apparence de votre site selon d'autres critères comme par exemple le type d'écran (terminaux mobiles, télévision, projecteur...), l'orientation de l'écran (portrait ou paysage)...

Infos complémentaires sur Media queries.

Transformation 3D

Voici un cube avec transformation CSS3


.cube{position:absolute;width:320px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}
.gauche,.droite,.bas{position:absolute;width:150px;height:150px}
.gauche{top:24px;left:4px;transform:rotate(-15deg) skew(-15deg,-15deg);background:linear-gradient(to bottom,#4fade8, #22464e)}
.droite{top:24px;left:138px;transform:rotate(15deg) skew(15deg,15deg);background:#4fade8}
.bas{top:140px;left:71px;transform:rotate(-45deg) skew(15deg,15deg);background:linear-gradient(to top, #4fade8, #22464e)}

Ressources complémentaires sur la transformation 3D :

transformations 3D en CSS3 (W3C).

3d transforms (anglais)

Exemple d'un cube en rotation

Filtres CSS

Selon la spécification, il existe trois types de filtres :

  1. Les filtres raccourcis (voir plus bas)
  2. Les filtres SVG
  3. Les shaders : il existe deux types de shader. Les "vertex shaders" (.vs), permettant le déplacement et la déformation des sommets d'un polygone. Les "fragment shaders"(.fs), qui permettent de modifier le rendu des pixels d'un objet.

Il existe 10 filtres CSS reconnus : grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur et drop-shadow.

Actuellement, Chrome supporte parfaitement les filtres CSS, de même que le navigateur Opera depuis la version 26 ainsi que Firefox, depuis la version 35. Vous pouvez vérifier la compatibilité sur Can I Use.

Ci-dessous, le code pour chaque filtre :


/*effet grayscale*/
.grayscale{-webkit-filter:grayscale(100%);filter:url(grayscale.svg#grayscale) /*filtre svg pour Firefox version inferieure a 35*/;filter:grayscale(100%)}

/*effet flou*/
.blur{-webkit-filter:blur(2px);filter:url(flou.svg#blur)/*filtre svg pour Firefox version inferieure a 35*/;filter:blur(2px)}

/*effet sepia*/
.sepia{-webkit-filter:sepia(1);filter: url(sepia.svg#sepia);/*filtre svg pour Firefox version inferieure a 35*/filter:sepia(1)}

/*effet hue-rotate*/
.hue-rotate{-webkit-filter:hue-rotate(90deg);filter:url(hue-rotate.svg#hue-rotate)/*filtre svg pour Firefox version inferieure a 35*/;filter:hue-rotate(90deg)}

/*effet ombre portee*/
.drop-shadow{-webkit-filter:drop-shadow(12px 12px 7px rgba(0,0,0,0.5));filter:url(ombre.svg#ombre)/*filtre svg pour Firefox version inferieure a 35*/;filter:drop-shadow(10px 10px 5px rgba(0,0,0,.8))}

/*effet invert*/
.invert{-webkit-filter:invert(1);filter:url(invert.svg#invert)/*filtre svg pour Firefox version inferieure a 35*/;filter:invert(1)}

/*effet brightness*/
.brightness{-webkit-filter:brightness(.5);filter:url(brightness.svg#brightness)/*filtre svg pour Firefox version inferieure a 35*/;filter:brightness(.5)}

/*effet opacity*/
.opacity{-webkit-filter:opacity(.5);filter:url(opacity.svg#opacity)/*filtre svg pour Firefox version inferieure a 35*/;filter:opacity(50%)}

/*effet contrast*/
.contrast{-webkit-filter:contrast(200%);filter:url(contrast.svg#contrast)/*filtre svg pour Firefox version inferieure a 35*/;filter:contrast(200%)}

/*effet saturate*/
.saturate{-webkit-filter:saturate(.3);filter:url(saturate.svg#saturate)/*filtre svg pour Firefox version inferieure a 35*/;filter:saturate(.3)}

Démonstration des filtres CSS

Formes avancées

Ce qu'il y a de plus appréciable avec le CSS3, c'est le fait de pouvoir réaliser des formes complexes (et animées) afin d'obtenir une image que l'on aurait pu créer sur un logiciel dédié.

Il n'y a pas si longtemps, il était possible de faire émoticônes en CSS3. Entre-temps, il y a eu cette démonstration, très connue. Au passage, vous pouvez aller découvrir le blog (en anglais) du concepteur de cette animation.

On a pu voir également le logo d'Opera, Spiderman en action ou Mister T.

Dans un genre plus minimaliste, vous pourrez trouver des formes sur one-div. Le site propose des icônes comme par exemple un oeil, une loupe, un réveil... Très simple d'utilisation, vous pouvez copier le code pour le réutiliser sur votre site.

Voir aussi cette démonstration d'un chat sur ce blog.

Aller plus loin :

Outre les ressources CSS3 sur ce blog, voici quelques liens qui vont grandement vous faciliter la tâche :

Créez des animations complexes en ligne : animations CSS3.

Très pratique pour réaliser des dégradés en CSS : colorzilla.

Un générateur CSS3 qui regroupe des propriétés telles que : border-radius, text-shadow, transition... css3generator.

L'indispensable site MDN (Mozilla developer Network) : MDN.

Une mine d'informations et de démonstrations : CSS play.

Des ressources pratiquement au jour le jour : Codrops.

Voir aussi la rubrique astuces développement sur ce blog.

Les démos impressionnantes

En savoir plus sur CSS4