Blog

Guillaume Duverger

Développement & graphisme


Accueil » Développement » CSS » Apprendre CSS3

Sommaire
  1. CSS3 : quelles possibilités ?
  2. Propriété background-repeat
    1. Valeur round
    2. Valeur space
  3. Propriété background-size
    1. Valeur contain
    2. Valeur cover
  4. Propriété background-clip
  5. Propriété background-origin
  6. Propriété box sizing
  7. Propriété border-image
  8. Propriété border-radius
  9. Règle @ @font-face
  10. Propriété text-shadow
    1. Ombre portée
    2. Incrustation
  11. Les dégradés CSS
    1. Dégradé linéaire (linear-gradient())
    2. Dégradé radial (radial-gradient())
  12. Transparence et opacité
  13. Animations, transitions
  14. Transformations
  15. Media queries
  16. Filtres CSS
  17. Formes avancées
  18. Aller plus loin
  19. Démonstrations CSS3
  20. Découvrir CSS4

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 les principales nouvelles propriétés...

Propriété background-repeat

Propriété round :

L'image est répétée et étirée au maximum du conteneur sans rognage ni espace comme dans l'exemple ci-dessous :

Exemple background-repeat round

.class{
width: 400px;
height: 200px;
background: url(image) repeat round}

Propriété space :

L'image est répétée de manière égale sans rognage dans le conteneur.

Exemple background-repeat space

.class{
width: 400px;
height: 200px;
background: url(image) repeat space}

Il est également possible de répéter plusieurs arrière-plans :

Exemple multiple background-repeat

.class{
background:url(image) repeat-x,
url(image) repeat-y;
width:300px;
height:200px}

Exemple plusieurs background

Propriété background-size :

La propriété background-size se présente sous cette forme :


body {
background: url( 
"dossier/votre-image.jpg" 
) no-repeat bottom right;
background-size:valeur valeur
} /*expression raccourcie*/

body { 

background-image: url( 
"dossier/votre-image.jpg" 
) 100% 100% no-repeat;
background-size:valeur valeur

} 

/*expression recommandée*/

Ci-dessous, un exemple concret :

Voici une image :

Logo CSS

Nous souhaitons l'insérer dans un conteneur mais avec une taille plus petite.

Après utilisation de la propriété background-size, l'image d'origine est bien redimensionnée dans le conteneur.

Exemple background-size

Le code ci-dessous :



.class{ 

background: url(image) no-repeat 100% 100%;
background-size: valeur valeur

} 


Pour effectuer cette redimension, nous avons le choix avec une longueur (en px, rem, em...), un pourcentage ou encore avec les deux valeurs ci-dessous :

-contain : permet à l'image de remplir toute la surface sans subir de déformation, mais l'image sera tronquée.

-cover : spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement.

Exemple avec cover

Propriété background-clip

Cette propriété permet de définir les limites de l'arrière-plan à l'intérieur d'un bloc.

Elle comprend ces valeurs :

  1. border-box : L'arrière plan s'étend jusqu'à la limite de chaque bord.
  2. padding-box : Aucun arrière-plan sera présent en-dessous de la bordure ; l'extrême limite sera celle de l'espacement.
  3. content-box : L'arrière-plan se limite au contenu.
  4. text (CSS Backgrounds and Borders Module Level 4)

Exemple d'utilisation de background-clip :

Exemple background-clip CSS3

Propriété background-origin

La propriété background-origin positionne le point d'origine de l'image d'arrière plan avec l'une des trois valeurs suivantes :

  1. border-box : La position de l'arrière-plan est relative au bord : l'image peut donc se positionner derrière les bords.
  2. padding-box : La position de l'arrière plan est relative à la marge interne.
  3. content-box : La position de l'arrière plan est relative au contenu.

Un exemple pour mieux comprendre :

Exemple background-origin CSS3

Propriété box-sizing

La propriété box-sizing, qui fait partie du CSS Basic User Interface Module Level 3, permet de modifier le modèle de boîte CSS.

Elle comprend les valeurs suivantes :

  1. content-box
  2. border-box

Propriété border-image

La propriété border-image permet de définir une image sur la bordure d'un élément. Il s'agit d'un raccourci regroupant ces différentes propriétés :

  1. border-image-source : définit l'image dans la bordure.
  2. border-image-width : définit la largeur l'image dans la bordure.
  3. border-image-repeat : définit la répétition de l'image dans la bordure.
  4. border-image-slice : permet de découper l'image dans la bordure en régions.
  5. border-image-outset : définit l'espace de l'image qui dépasse de la bordure.

Un exemple avec la fonction linear-gradient() :

Exemple border-image CSS3

.bordure {
border: 20px solid;
border-image: linear-gradient(
to left,couleur,couleur
) 10;
padding: 20px

}

Un autre exemple avec une image :

Exemple border-image CSS3

.bordure {
border-image: url(
'https://upload.wikimedia.org/wikipedia/commons/0/04/Frame.svg'
) 80 80; 
 
border-style: inset;
border-width: 60px;
display: block;
height: auto;
margin: 0 auto

}

Border-radius (coins arrondis)

Apparaissant dans le module de niveau trois CSS Backgrounds and Borders, la propriété border-radius est une propriété raccourcie qui permet de définir quatre propriétés :

  1. border-top-left-radius : bord haut à gauche
  2. border-top-right-radius : bord haut à droite
  3. border-bottom-right-radius : bord bas à droite
  4. border-bottom-left-radius : bord bas à gauche

Cette propriété peut être définie avec une, deux ou quatre valeurs avec des unités de longeur ou des pourcentages.

Exemple 1 :

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

Vous obtenez un carré violet avec chaque coin arrondi de 5 pixels. L'exemple montre également des déclinaisons avec les propriétés associées :

Exemple propriété border-radius CSS3
Exemple 2 :

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

Vous obtenez un rond violet :

Exemple propriété border-radius CSS3

La règle @ @font-face

La propriété font-family peut être associée à la règle @font-face. Si vous souhaitez mettre en place une police de caractères plus originale, voici comment s'y prendre :

Rendez-vous sur Google fonts ou sur Fontsquirrel. Vous choisissez une police. Pour l'exemple, nous prendrons la police Lato.

Sur Google Fonts, vous récupérez le lien où se trouve la police. Il doit ressembler à ceci :


<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Soit vous mettez ce code directement dans votre document (entre <head> et </head>), soit vous récupérez la CSS associée et vous l'intégrez à votre propre feuille CSS. Pour récupérer la police de caractères, ouvrez un onglet dans votre navigateur et prenez dans le code Google cette partie :


http://fonts.googleapis.com/css?family=Lato

Vous devriez voir ceci :


/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), 
local('Lato-Regular'), 
url(http://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, 
  U+1E00-1EFF, 
  U+20A0-20AB, 
  U+20AD-20CF, 
  U+2C60-2C7F, 
  U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), 
  local('Lato-Regular'), 
  url(http://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, 
  U+0131, 
  U+0152-0153, 
  U+02C6, 
  U+02DA, 
  U+02DC, 
  U+2000-206F, 
  U+2074, 
  U+20AC, 
  U+2212, 
  U+2215;
}

Copiez puis collez ce code dans votre feuille de style. Avec cette méthode, inutile de mettre le lien dans l'entête de votre document.

Sur FontSquirrel, il vous suffit de choisir une police et de la télécharger. Vous avez également la possibilité d'uploader une fonte en .ttf et vous obtiendrez différents formats (.eot, .svg, .woff) ceci pour la compatibilité entre navigateurs.

Text-shadow (ombres portées et incrustations) :

La propriété text-shadow, spécificité CSS3, permet de créer des ombres sur un texte. Elle regroupe quatre valeurs :

  1. offset-x : Décalage vers la droite
  2. offset-y : Décalage vers le bas
  3. blur : Valeur du flou
  4. color : Couleur
Ombre portée
Exemple ombre portée CSS3


.class{

text-shadow: 2px 2px 2px #2f6486

}

Ombre inscrustée
Exemple ombre portée CSS3


.class{

text-shadow: 0 -1px 0 #3b82ae

}

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, du texte... Mine de rien, il s'agit d'une petite révolution pour les développeurs, trop limité auparavant.

Dégradé linéaire :

Pour créer un dégradé linéaire en CSS, il suffit de déclarer la propriété background ou background-image, puis la fonction linear-gradient().

Contrairement à une image, un dégradé n'a pas de taille, si ce n'est celle du conteneur dans lequel il sera appliqué.

Ensuite, il nous faut renseigner la direction que va prendre le dégradé. Par défaut, il s'agit de to bottom, ce qui signifie que la direction partira du haut pour aller vers le bas. On peut désigner la direction soit par un angle, soit avec les mots-clés top, left, right et bottom.

Enfin, pour achever notre dégradé, nous devons insérer le point de départ ainsi que le point d'arrivée sur l'axe (ou ligne de dégradé) avec des couleurs.

Exemple dégradé linéaire CSS3

NB : il est tout à fait possible d'écrire autant de points d'arrêt que l'on souhaite.



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

}

.class{
background: linear-gradient(45deg,#50b6f6 30%,#235472 30%)

}

Dégradé radial :

En ce qui concerne le dégradé radial, nous allons utiliser la fonction radial-gradient(). Ensuite, nous aurons besoin de déclarer le point de départ et le point d'arrivée (comme pour le dégradé linéaire).

Nous pourrions également déclarer le centre du dégradé qui, par défaut est center, mais cela n'est pas nécessaire. Il en va de même avec la forme et la taille de celle-ci (respectivement par défaut, ellipse et closest-side).

Par contre, vous pouvez donner la valeur circle à la forme. La taille de la forme, quant à elle, peut être exprimée avec les mots-clés suivants :

  • - closest-side : vers le coté le plus proche
  • - closest-corner : vers le coin le plus proche
  • - farthest-corner : vers le coin le plus éloigné
  • - farthest-side : vers le coté le plus éloigné
Exemple dégradé radial CSS3


.class{

background: radial-gradient(#50b6f6,#235472)

}


Tout comme il est possible de répéter une image avec la propriété background-repeat, il est facile de répéter un dégradé linéaire ou radial.

Exemple répétition dégradé CSS3


.lineaire{

height: 100px;
width: 300px;
background-image: 
repeating-linear-gradient(
45deg,
#7A5FFF,
#7A5FFF 10px,
#01ff89 10px,
#01ff89 20px)

}

.radial {

height: 100px;
width: 300px;
background:
repeating-radial-gradient(
circle at 50% 50%, 
#7A5FFF,
#01ff89 10%)

}

Notez bien que ces deux fonctions ne sont pas animables. Cependant, il existe des solutions pour contourner cette restriction (sans passer par JavaScript, ni SVG), comme jouer avec les pseudo-éléments ::before et ::after.

Passez la souris

<a href="#" class="anim-gradient">votre texte</a>


.anim-gradient {

background-image:
linear-gradient(
45deg,#7A5FFF,
#01ff89);
position: relative;
z-index: 1;
border-radius: .25rem;
color: white;
display: flex;
justify-content: center;
max-width: 12rem;
margin: 1rem auto;
padding: 1rem;
text-decoration: none

}
	
.anim-gradient:before{

border-radius: inherit;
background-image:
linear-gradient(-45deg,
#7A5FFF,
#01ff89);
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity .3s ease-in-out
}

.anim-gradient:hover:before {

opacity: 1

}


Transparence et opacité

Transparence :

Le module CSS Color Module Level 3 a introduit la notion de transparence pour les valeurs correspondant à une couleur (comme les propriétés background, color, border-color ...), en utilisant la fonction rgb() ou la fonction hsl().

Contrairement à la propriété opacity (voir plus bas), les fonctions rgba() et hsla() appliquent une transparence, par le biais d'un canal alpha, uniquement à la couleur d'une propriété et non pas à l'ensemble d'une déclaration.



.class{

background: rgba(0, 0, 0, .5) /*transparence de 50%*/

}

.class{

background: hsla(0, 0%, 0%, .5) /*transparence de 50%*/

}

.class{

background: rgba(0, 0, 0, 0)

}/*correspond à noir transparent*/
 

NB : il est possible de rendre un texte (fond ou bordure) transparent via la valeur transparent qui correspond à rgba(0, 0, 0, 0) ou hsla(0, 0%, 0%, 0).

Passez le curseur de votre souris sur ce texte


.class{

color: transparent

}

Opacité :


.class{

background-color: black;
opacity: .5

}


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

Exemple propriété opacity CSS3

Animations CSS, transitions CSS

Auparavant, il fallait passer par JavaScript (même si c'est encore le cas dans beaucoup de 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{

to{

transform:translatex(100%)

}

}

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.

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

Transformation CSS

Voici un cube avec transformation CSS3

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)

}

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.

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)
}

Article sur 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 a.singlediv.

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 :

Dégradés :

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

Animations :

Article sur les performances des animations

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

Transformations :

transformations 3D en CSS3 (W3C).

3d transforms (anglais)

Exemple d'un cube en rotation

Autres :

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

L'indispensable site MDN.