Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » CSS » Apprendre CSS3

Sommaire
  1. CSS3 : c'est quoi ?
  2. CSS Backgrounds and Borders Module Level 3 :
    1. Propriété background-repeat
      1. Valeur round
      2. Valeur space
    2. Propriété background-size
      1. Valeur contain
      2. Valeur cover
    3. Propriété background-clip
    4. Propriété background-origin
    5. Propriété border-image
    6. Propriété border-radius
    7. Propriété box-shadow
  3. CSS Fonts Module Level 3 :
    1. Règle @ @font-face
    2. Propriété font-feature-settings
    3. Règle @ @font-feature-values
  4. CSS Text Decoration Module Level 3 :
    1. Propriété text-decoration
    2. Propriété text-shadow
      1. Ombre portée
      2. Incrustation
  5. CSS Basic User Interface Module Level 3 :
    1. Propriété box-sizing
    2. Propriété resize
    3. Propriété text-overflow
    4. Propriété caret-color
  6. CSS Images Module Level 3 :
    1. Les dégradés CSS
      1. Dégradé linéaire (fonction linear-gradient())
      2. Dégradé radial (fonction radial-gradient())
    2. Propriété object-fit
    3. Propriété object-position
  7. CSS Cascading and Inheritance Level 3
    1. Valeur inherit
    2. Valeur initial
    3. Valeur unset
  8. CSS Color Module Level 3 :
    1. Propriété color
    2. Propriété opacity
  9. Aller plus loin
Télécharger ce cours en pdf

CSS3 : c'est quoi ?

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.

L'avantage de ces modules est de permettre de répartir des fonctionnalités. Plus besoin d'attendre la sortie d'une version entière pour pouvoir utiliser ces fonctionnalités. De plus, le niveau dans lequel se trouve un module ne correspond en rien avec une quelconque version de CSS.

CSS3 (au même titre que CSS4) n'est pas un langage à proprement parler. Le CSS actuel que nous utilisons repose sur le deuxième niveau.

Pour donner quelques exemples, la propriété wrap-flow fait partie de CSS Exclusions Level 1. La propriété background-blend-mode, quant à elle, est intégrée dans le module Compositing and Blending Level 1, la propriété offset dans le module motion path... ou encore la désormais très célèbre valeur grid qui est apparue dans le module CSS Grid Layout.

Concrètement, que peut-on faire de plus avec CSS3 ? Voyons les principales nouvelles propriétés selon leur module...

👉 CSS Backgrounds and Borders Module Level 3

Propriété background-repeat
Valeur 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

}


Valeur 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 :

  • border-box : L'arrière plan s'étend jusqu'à la limite de chaque bord.
  • padding-box : Aucun arrière-plan sera présent en-dessous de la bordure ; l'extrême limite sera celle de l'espacement.
  • content-box : L'arrière-plan se limite au contenu.
  • 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 :

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

Un exemple pour mieux comprendre :

Exemple background-origin CSS3
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 :

  • border-image-source : définit l'image dans la bordure.
  • border-image-width : définit la largeur l'image dans la bordure.
  • border-image-repeat : définit la répétition de l'image dans la bordure.
  • border-image-slice : permet de découper l'image dans la bordure en régions.
  • 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

}



Propriété border-radius (coins arrondis) :

La propriété border-radius est une propriété raccourcie qui permet de définir quatre propriétés :

  • border-top-left-radius : bord haut à gauche
  • border-top-right-radius : bord haut à droite
  • border-bottom-right-radius : bord bas à droite
  • 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 :
Exemple propriété border-radius CSS3

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.


.class{

height: 80px;
width: 80px;
background: purple;
border-radius: 5px

}

Exemple 2 :

Vous obtenez un rond violet :

Exemple propriété border-radius CSS3

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


Propriété box-shadow :

La propriété box-shadow permet d'appliquer une ombre interne ou externe à un élément. Celle-ci est d'abord définie avec deux valeurs qui représentent le décalage de l'ombre sur l'élément, puis d'une troisième valeur qui va indiquer le rayon du flou de l'ombre et enfin avec le nom (ou code) de la couleur de l'ombre (si elle est omise, elle prendra la couleur de l'élément parent).

Exemple propriété box-shadow

👉 CSS Fonts Module Level 3

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.


Propriété font-feature-settings :

Le format le plus répandu en matière de polices de caractères reste encore le format TrueType (.ttf). Le format OpenType a été conçu dans le but d'améliorer le format TrueType (plus de glyphes, codage basé sur Unicode...).

La propriété font-feature-settings permet de contrôler les paramètres typographiques d'une police qui supporte le format OpenType comme par exemple les ligatures, les petites majuscules, le crénage...

Exemple propriété font-feature-settings
	

.class{

font-family: "Exo-Regular";
font-size: 3rem

	}
	
.class span{

font-feature-settings:"smcp" 1;
color: #7A5FFF

}

}

Plus d'informations dans cet article (EN).

Cette propriété a été dépréciée. Elle est en brouillon de travail dans le niveau quatre du même module.


Règle @ @font-feature-values :

La règle@ @font-feature-values permet d'utiliser un nom personnalisé dans une règle. C'est la propriété font-variant-alternates qui va se charger d'effectuer des réglages propres au format OpenType.

Il existe différents types de glyphes alternatifs qui vont être définis avec la propriété font-variant-alternates :

  • @stylistic via la fonction du même nom : stylistic()
  • @styleset via la fonction du même nom : styleset()
  • @character-variant via la fonction du même nom : character-variant()
  • @swash via la fonction du même nom : swash()
  • @ornament via la fonction du même nom : ornament()
  • @annotation via la fonction du même nom : annotation()

On déclare la règle @ @font-feature-values comme ceci :

	

@font-feature-values nomPolice {
		
		
  @styleset {
  
    ...
  }
  }
  

Plus d'informations dans cet article(EN).

👉 CSS Text Decoration Module Level 3

Propriété text-decoration :

Dans le troisième niveau, la propriété text-decoration devient une propriété raccourcie regroupant les propriétés suivantes :

  • text-decoration-color : définit la couleur de la ligne qui décore le texte.
  • text-decoration-line : définit la position de la ligne. Accepte les valeurs suivantes :
    • none : aucun soulignement.
    • underline : texte sousligné.
    • overline : texte surligné.
    • line-through : texte barré.
  • text-decoration-style : définit le style de la ligne. Accepte les valeurs suivantes :
    • solid : trait en dur.
    • double : double trait.
    • dotted : trait en forme de rond.
    • dashed : trait en forme de tirets.
    • wavy : trait en forme de "vague".
Exemple propriété text-decoration CSS3

.class{

font-size: 2rem;
text-decoration: underline dotted #7A5FFF;

/* équivaut à : */

text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: #7A5FFF

}


Propriété 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 :

  • offset-x : Décalage vers la droite
  • offset-y : Décalage vers le bas
  • blur : Valeur du flou
  • 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

}

👉 CSS Basic User Interface Module Level 3

Propriété box-sizing :

La propriété box-sizing permet de modifier le modèle de boîte CSS.

Elle comprend les valeurs suivantes :

  • content-box : par défaut.
  • border-box : la bordure est inclue dans la dimension du bloc.

Propriété resize :

La propriété resize permet de contrôler le redimensionnement ainsi que la direction de la redimension d'un élément. Elle prend les valeurs suivantes :

  • none : l'utilisateur ne peut pas redimensionner l'élément.
  • horizontal : l'utilisateur peut redimensionner l'élément horizontalement mais pas verticalement.
  • vertical : l'utilisateur peut redimensionner l'élément verticalement mais pas horizontalement.
  • both : l'utilisateur peut redimensionner l'élément horizontalement et verticalement.

💡 D'ordinaire, on utilise cette propriété sur l'élément HTML textarea dans un formulaire de façon a empêcher l'utilisateur d'étendre le champ texte, qui aura pour conséquence de casser la structure de la page, au-delà de l'aspect purement visuel.

Les valeurs block et inline ont été ajoutées à cette valeur dans CSS Logical Properties and Values Level 1.


Propriété text-overflow :

La propriété text-overflow permet de déterminer comment un texte qui sort de sa boite va être rogné. Le rognage peut prendre différentes formes avec les valeurs suivantes :

  • clip (par défaut)
  • ellipsis

💡 Pour que cette propriété produise un effet sur un élément, il faut impérativement déclarer les propriétés white-space et overflow avec respectivement les valeurs nowrap et hidden. On indique ainsi que la boite n'est pas visible et que le texte ne fait pas de retour à la ligne.

Ci-dessous, un exemple avec la valeur ellipsis :

Exemple text-overflow


.ex-text-overflow {

width: 600px;
padding: 2px 5px;
/* Nécessaires pour text-overflow */
white-space: nowrap;
overflow: hidden;
text-overflow: " [...]";

}

💡 Les valeurs fade et <string> ainsi que la fonction fade() ont été ajoutées dans le niveau quatre.


Propriété caret-color :

La propriété CSS caret-color permet de définir la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.

Exemple caret-color



.class {

caret-color: orange;

}


Un exemple animé de cette propriété.

👉 CSS Images Module Level 3

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. Un exemple ci-dessous :



<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

}



Propriété object-fit :

La propriété CSS object-fit permet de définir la façon dont le contenu d'un élément remplacé doit s'adapter à son élément parent, dont il faut indiquer la largeur ainsi que la hauteur...

En savoir plus
Propriété object-position :

La propriété object-position détermine le positionnement de l'élément remplacé qui se trouve dans sa boite. Dans le cas où le contenu de l'élément remplacé ne couvre pas l'ensemble de la boite, on verra alors l'arrière-plan de l'élément...

En savoir plus

👉 CSS Values and Units Module Level 3

Valeur inherit

Avec cette valeur, un élément enfant va hériter des propriétés de son élément parent, ou plus exactement des propriétés qui ne s'héritent pas par défaut (comme margin, padding, background, border...).

Valeur initial :

La valeur initial va permettre de casser la notion d'héritage d'un élément et de réinitialiser les propriétés telles que définies par la spécification.

Voyons un exemple pour différencier les deux valeurs inherit et initial :

Exemple différence valeur initial et valeur inherit



<div class="class">
<div class="inherit">
<h1>valeur inherit</h1>
<p>Les styles sont hérités de l'élément parent (entouré par une bordure).</p>
</div>
</div>

<div class="class"> 
<div class="initial">
<h1>valeur initial<h1>
<p>Les styles sont réinitialisés. L'agent utilisateur (le navigateur) va appliquer ses propres styles.</p>
</div>
</div>
 	





.class {
border: 1px solid #ddd;
color: #7A5FFF;
font-family:raleway;
font-size: 1.125rem;
padding: 1.25rem;
font-weight:bold;

}

	
.inherit {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.initial {
  color: initial;
  font-family: initial;
  font-size: initial;
  font-weight: initial;
}

.initial h1 {
  color: initial;
}



Vous pouvez ainsi constater que la couleur, la police, la police et la graisse ne sont héritées avec la valeur initial.


Valeur unset :

Il s'agit d'un mélange des valeurs initial et inherit. Dans le cas où il n'y a pas d'héritage, la valeur unset se comporte comme la valeur inherit. Si héritage il y a, la valeur unset se comporte comme initial.

👉 CSS Color Module Level 3

Propriété color :

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

}

Propriété opacity :


.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

👉 Aller plus loin :

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

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.