Les Nouveautés CSS3

Sélecteurs CSS3 Détaillés

1.1 Sélecteurs de base

Sélecteur universel *
Sélecteur d'élément E
Sélecteur d'ID #id
Sélecteur de classe .classe
Sélecteur de groupe select1,selectN

1.2 Sélecteurs hiérarchiques

Sélecteur de descendant E F
Sélecteur d'enfant direct E>F
Sélecteur de frère adjacent E+F
Sélecteur de frère général E~F

1.3 Sélecteurs d'attribut

E[attribut] Sélectionne les éléments E ayant l'attribut spécifié.
E[attribut="valeur"] Sélectionne les éléments E ayant l'attribut avec la valeur exacte.
E[attribut~="valeur"] Sélectionne les éléments E ayant un attribut avec une liste de mots séparés par des espaces, dont l'un correspond à la valeur.
E[attribut^="valeur"] Sélectionne les éléments E dont la valeur d'attribut commence par "valeur".
E[attribut$="valeur"] Sélectionne les éléments E dont la valeur d'attribut se termine par "valeur".
E[attribut*="valeur"] Sélectionne les éléments E dont la valeur d'attribut contient "valeur".
E[attribut|="valeur"] Sélectionne les éléments E dont la valeur d'attribut commence par "valeur" et est suivie d'un trait d'union.

1.4 Sélecteurs de pseudo-classe

Pseudo-classes dynamiques

E:link

  Définit le style des liens non visités.

Note : a:hover doit être placé après a:link et a:visited, et a:active doit être placé après a:hover.

E:visited

  Définit le style des liens déjà visités.

E:hover

  Définit le style lors du survol de l'élément par le curseur.

E:active

  Définit le style lorsque l'élément est activé (entre le clic et le relâchement).

E:focus

  Définit le style lorsque l'élément est en focus.

Pseudo-classe cible

E:target

  Correspond à l'élément E référencé par l'URL.

Pseudo-classes linguistiques

E:lang(fr)

  Correspond aux éléments E utilisant une langue spécifique.

Pseudo-classes d'interface utilisateur

E:checked

  Correspond aux éléments E cochés dans l'interface (pour input type radio et checkbox).

E:enabled

  Correspond aux éléments de formulaire activés.

E:disabled

  Correspond aux éléments de formulaire désactivés.

Pseudo-classes structurelles

E:root

  Correspond à l'élément racine du document (HTML dans les documents HTML).

E:first-child

  Correspond au premier élément enfant E de son parent.

E:last-child

  Correspond au dernier élément enfant E de son parent.

E:only-child

  Correspond à l'unique élément enfant E de son parent.

E:nth-child(n)

  Correspond au nième élément enfant E de son parent.

E:nth-last-child(n)

  Correspond au nième élément enfant E en partant de la fin.

E:first-of-type

  Correspond au premier élément de son type parmi les frères.

E:last-of-type

  Correspond au dernier élément de son type parmi les frères.

E:only-of-type

  Correspond à l'unique élément de son type parmi les frères.

E:nth-of-type(n)

  Correspond au nième élément de son type parmi les frères.

E:nth-last-of-type(n)

  Correspond au nième élément de son type en partant de la fin.

E:empty

  Correspond aux éléments E sans aucun enfant (y compris les nœuds texte).

Pseudo-classe de négation

E:not(s)

  Correspond aux éléments E ne correspondant pas au sélecteur s.

1.5 Sélecteurs de pseudo-élément

E::first-letter

  Définit le style de la première lettre de l'élément E.

E::first-line

  Définit le style de la première ligne de l'élément E.

E::before

  Insère du contenu avant l'élément E, à utiliser avec la propriété content.

E::after

  Insère du contenu après l'élément E, à utiliser avec la propriété content.

E::placeholder

  Définit le style du placeholder de l'élément E.

E::selection

  Définit le style lorsque l'élément E est sélectionné.

Fonctionnalités de base CSS3

2.1 Nouvelles unités de longueur CSS3

rem : Multiple de la taille de police de l'élément racine (html)
vw : Largeur de la fenêtre viewport divisée en 100 unités
vh : Hauteur de la fenêtre viewport divisée en 100 unités
vmax : Correspond à la plus grande dimension entre vw et vh
vmin : Correspond à la plus petite dimension entre vw et vh

2.2 Nouvelles unités de couleur CSS3

RGBA(R,V,B,A) : A représente la transparence alpha, de 0 à 1.
HSL(T,S,L)

T : Teinte (Hue). 0 (ou 360) pour le rouge, 120 pour le vert, 240 pour le bleu. Valeurs : 0 - 360

S : Saturation. Valeurs : 0.0% - 100.0%

L : Luminosité. Valeurs : 0.0% - 100.0%

HSLA(T,S,L,A)

2.3 Dégradés CSS3

Dégradé linéaire

Syntaxe

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

Valeurs

<angle> : Définit la direction du dégradé en degrés.
to left : Dégradé de droite à gauche (équivalent à 270deg)
to right : Dégradé de gauche à droite (équivalent à 90deg)
to top : Dégradé de bas en haut (équivalent à 0deg)
to bottom : Dégradé de haut en bas (équivalent à 180deg, valeur par défaut)
<color-stop> : Définit les couleurs du dégradé :
<color> : La couleur.
<length> : Position du couleur par longueur.
<percentage> : Position de la couleur par pourcentage.

Exemple

degrade-lineaire {
  background: linear-gradient(#ffffff, #333333);
  background: linear-gradient(to bottom, #ffffff, #333333);
  background: linear-gradient(to top, #333333, #ffffff);
  background: linear-gradient(180deg, #ffffff, #333333);
  background: linear-gradient(to bottom, #ffffff 0%, #333333 100%);
}

Dégradé radial

Syntaxe

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

Valeurs

<position> : Définit la position du centre du dégradé.
<shape> : Définit la forme du dégradé (cercle ou ellipse).
<extent-keyword> : Définit la taille du dégradé.
<color-stop> : Définit les couleurs du dégradé.

Exemple

degrade-radial {
  background: radial-gradient(circle, #ff0000, #ffff00, #008800);
  background: radial-gradient(circle at center, #ff0000, #ffff00, #008800);
  background: radial-gradient(circle at 50%, #ff0000, #ffff00, #008800);
  background: radial-gradient(circle farthest-corner, #ff0000, #ffff00, #008800);
}

Nouvelles propriétés de base CSS3

3.1 Propriétés de mise en page

box-sizing : Définit la manière dont la taille de la boîte est calculée

content-box (par défaut) : Largeur et hauteur incluent seulement le contenu border-box : Largeur et hauteur incluent contenu, padding et bordure

.element {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 5px solid #333;
}

resize : Permet à l'utilisateur de redimensionner un élément

none : Ne permet pas le redimensionnement (par défaut) both : Permet de redimensionner en largeur et hauteur horizontal : Permet de redimensionner en largeur vertical : Permet de redimensionner en hauteur

.redimensionnable {
  resize: both;
  overflow: auto;
}

display : Contrôle l'affichage d'un élément

none : Cache l'élément sans conserver l'espace block : Affiche l'élément comme un bloc inline : Affiche l'élément comme une ligne flex : Active le mode flexbox pour la mise en page

.conteneur-flex {
  display: flex;
  justify-content: space-between;
}

3.2 Contours

outline : Dessine un contour autour d'un élément

<'outline-width'> || <'outline-style'> || <'outline-color'>

outline-width : Largeur du contour

: Valeur de longueur medium : Largeur par défaut thin : Fin thick : Épais

outline-style : Style du contour

none : Aucun contour dotted : Pointillé dashed : Tirets solid : Solide double : Double ligne groove : Rainuré ridge : Relief inset : Enfoncé outset : Proéminent

outline-color : Couleur du contour
outline-offset : Décallement du contour par rapport à la bordure

3.3 Couleurs

opacity : Définit l'opacité d'un élément (0 à 1)

.semi-transparent {
  opacity: 0.7;
}

Nouvelles propriétés de bordure et d'arrière-plan CSS3

4.1 Coins arrondis

border-radius : Définit les coins arrondis d'un élément

.coin-arrondi {
  border-radius: 10px;
  /* ou */
  border-radius: 10px 20px 30px 40px;
  /* ou */
  border-radius: 10px / 20px;
}

border-top-left-radius : Coin supérieur gauche
border-top-right-radius : Coin supérieur droit
border-bottom-right-radius : Coin inférieur droit
border-bottom-left-radius : Coin inférieur gauche

4.2 Ombres de boîte

box-shadow : Ajoute des ombres aux éléments

.ombre-simple {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.ombre-interne {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) inset;
}

.ombre-multiple {
  box-shadow:
    0 0 5px 3px rgba(255, 0, 0, 0.6),
    0 0 5px 6px rgba(0, 182, 0, 0.6),
    0 0 5px 10px rgba(255, 255, 0, 0.6);
}

box-reflect : Crée un reflet (webkit uniquement)

.reflet {
  -webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
}

4.3 Nouvelles propriétés d'arrière-plan

background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color

background-origin : Point d'origine de l'image d'arrière-plan

padding-box : À partir de la zone de padding (par défaut) border-box : À partir de la zone de bordure content-box : À partir de la zone de contenu

background-clip : Zone de clipping de l'arrière-plan

padding-box : Découpe à partir de la zone de padding border-box : Découpe à partir de la zone de bordure (par défaut) content-box : Découpe à partir de la zone de contenu text : Découpe selon la forme du texte

background-size : Taille de l'image d'arrière-plan

: Valeur de longueur : Valeur en pourcentage auto : Taille originale cover : Recouvre tout l'élément contain : Contient l'image dans l'élément

Arrière-plans multiples

.multi-fond {
  background: url(image1.jpg) no-repeat scroll 10px 20px/50px 50px content-box padding-box,
              url(image2.jpg) no-repeat scroll 60px 70px/30px 30px content-box padding-box;
}

4.4 Images de bordure

border-image : Utilise une image pour la bordure

.bordure-image {
  border-image: url(image-bordure.png) 30 round;
}

border-image-source : Source de l'image de bordure
border-image-slice : Découpe de l'image de bordure
border-image-width : Largeur de la bordure image
border-image-outset : Extension de la bordure image
border-image-repeat : Répétition de l'image de bordure

stretch : Étire l'image repeat : Répète l'image round : Répète et ajuste l'image space : Répète avec espacement

Transformations, transitions et animations CSS3

5.1 Transformations (transform)

Propriétés associées

transform : Applique une transformation à un élément

none : Aucune transformation 2D : translate(), rotate(), scale(), skew(), matrix() 3D : translate3d(), rotate3d(), scale3d(), perspective()

.transform-2d {
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

.transform-3d {
  transform: rotateX(45deg) rotateY(30deg) translateZ(100px);
}

transform-origin : Point d'origine de la transformation

.origine-transform {
  transform-origin: top left;
}

transform-style : Style de transformation pour les enfants

flat : Aplatissement (par défaut) preserve-3d : Conservation en 3D

perspective : Perspective pour les transformations 3D

.perspective {
  perspective: 800px;
}

perspective-origin : Point d'origine de la perspective
backface-visibility : Visibilité de la face arrière

visible : Visible (par défaut) hidden : Invisible

Transformations 2D

Déplacement

translate(x, y) : Déplacement horizontal et vertical
translateX(x) : Déplacement horizontal
translateY(y) : Déplacement vertical

Mise à l'échelle

scale(x, y) : Échelle horizontale et verticale
scaleX(x) : Échelle horizontale
scaleY(y) : Échelle verticale

Rotation

rotate(angle) : Rotation en degrés

Distorsion

skew(x, y) : Distorsion horizontale et verticale
skewX(x) : Distorsion horizontale
skewY(y) : Distorsion verticale

Matrice

matrix() : Transformation par matrice

Transformations 3D

Déplacement 3D

translate3d(x, y, z) : Déplacement en 3D
translateZ(z) : Déplacement sur l'axe Z

Échelle 3D

scale3d(x, y, z) : Échelle en 3D
scaleZ(z) : Échelle sur l'axe Z

Rotation 3D

rotate3d(x, y, z, angle) : Rotation 3D
rotateX(angle) : Rotation sur l'axe X
rotateY(angle) : Rotation sur l'axe Y
rotateZ(angle) : Rotation sur l'axe Z

Matrice 3D

matrix3d() : Transformation par matrice 4x4

Transformations multiples

.element {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
}

5.2 Transitions (transition)

Propriétés de tranistion

transition : Propriété raccourcie pour les transitions

.transition {
  transition: all 0.5s ease-in-out;
}

transition-property : Propriétés à animer

none : Aucune propriété all : Toutes les propriétés : Propriété spécifique

.transition-propriete {
  transition-property: background-color, transform;
}

transition-duration : Durée de la transition

.duree-transition {
  transition-duration: 1s;
}

transition-timing-function : Fonction de timing

ease : Accélération puis décélération linear : Vitesse constante ease-in : Accélération ease-out : Décélération ease-in-out : Accélération puis décélération cubic-bezier() : Courbe personnalisée steps() : Effet en escalier

.timing-transition {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

transition-delay : Délai avant le début de la transition

.delai-transition {
  transition-delay: 0.3s;
}

Déclenchement des transitions

Pseudo-classes
Média-queries
JavaScript

5.3 Animations

Clés d'animation

Les clés d'animation définissent les étapes d'une animation.

Syntaxe des clés d'animation

@keyframes nom-animation {
  0% { propriete: valeur; }
  25% { propriete: valeur; }
  50% { propriete: valeur; }
  75% { propriete: valeur; }
  100% { propriete: valeur; }
}

Propriétés d'animation

animation : Propriété raccourcie pour les animations

.animation {
  animation: nom-animation 2s infinite alternate;
}

animation-name : Nom de l'animation

.nom-animation {
  animation-name: defilement;
}

animation-duration : Durée de l'animation

.duree-animation {
  animation-duration: 3s;
}

animation-timing-function : Fonction de timing

ease : Accélération puis décélération linear : Vitesse constante ease-in : Accélération ease-out : Décélération ease-in-out : Accélération puis décélération step-start : Début instantané step-end : Fin instantanée steps() : Effet en escalier

.timing-animation {
  animation-timing-function: steps(5, end);
}

animation-delay : Délai avant le début

.delai-animation {
  animation-delay: 1s;
}

animation-iteration-count : Nombre d'itérations

number : Nombre d'itérations infinite : Infini

.iteration-animation {
  animation-iteration-count: 3;
}

animation-direction : Direction de l'animation

normal : Normale (par défaut) reverse : Inverse alternate : Alterne entre normale et inverse alternate-reverse : Alterne entre inverse et normale

.direction-animation {
  animation-direction: alternate;
}

animation-play-state : État de lecture

running : En cours paused : En pause

.etat-animation {
  animation-play-state: paused;
}

animation-fill-mode : Style appliqué en dehors de l'animation

none : Aucun style forawrds : Style final conservé backwards : Style initial appliqué both : Styles initial et final appliqués

.remplissage-animation {
  animation-fill-mode: forwards;
}

Exemple d'animation

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes clignotement {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.element-rotation {
  animation: rotation 2s linear infinite;
}

.element-clignotement {
  animation: clignotement 1.5s ease-in-out infinite;
}

Polices web intégrées CSS3

6.1 Qu'est-ce que @font-face

Permet d'utiliser des polices hébergées sur le serveur, indépendamment des polices système
Le navigateur télécharge les polices nécessaires et les met en cache
Introduit en CSS2, retiré en CSS2.1, puis réintroduit en CSS3
Excellente compatibilité avec IE

6.2 Syntaxe @font-face

Format

@font-face { 
    font-family: <nom-police>; 
    src: <source-police> [<format>] [, <source-police> [<format>]]*; 
    [<propriete-police>];
 }

Paramètres

font-family : Nom de la police
src : Chemin vers la police
format : Format de la police

truetype (.ttf) : Firefox 3.5+, Chrome 4+, Safari 3+, Opera 10+, iOS 4.2+, IE9+ opentype (.otf) : Firefox 3.5+, Chrome 4+, Safari 3+, Opera 10+, iOS 4.2+ woff (.woff) : Firefox 3.5+, Chrome 6+, Safari 3.6+, Opera 11.1+, IE9+ eot (.eot) : IE4+ svg (.svg) : Chrome 4+, Safari 3.1+, Opera 10+, iOS 3.2+

font : Style de la police

font-weight font-style font-size font-variant font-stretch

Gestion de la compatibilité

@font-face {
    font-family: 'ma-police';
    src: url('ma-police.eot'); /* IE9 */
    src: url('ma-police.eot?#iefix') format('embedded-opentype'), /* IE9- */
         url('ma-police.woff') format('woff'), /* Chrome, Firefox, Opera, Safari */
         url('ma-police.ttf') format('truetype'), /* Chrome, Firefox, Opera, Safari */
         url('ma-police.svg#ma-police') format('svg'); /* iOS 4.1- */
}

6.3 Outils pour polices web

Services de polices web

Font Awesome : https://fontawesome.com/
Google Fonts : https://fonts.google.com/
Adobe Fonts : https://fonts.adobe.com/

Outils de conversion

Font Squirrel : https://www.fontsquirrel.com/tools/webfont-generator
Transfonter : https://transfonter.org/

6.4 Utilisation d'icônes de police

Avantages des icônes de police

Plus nettes que les images bitmap
Flexibilité : facile à redimensionner, changer de couleur et de style
Excellente compatibilité, même avec les anciens navigateurs

Bibliothèques d'icônes populaires

Font Awesome : https://fontawesome.com/
Material Icons : https://material.io/icons/
Ionicons : https://ionicons.com/
Feather Icons : https://feathericons.com/

Exemple d'utilisation

/* Inclusion de Font Awesome */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

/* Utilisation d'une icône */
<i class="fas fa-home"></i>

/* Style personnalisé */
.icone-personnalisee {
  color: #333;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

Étiquettes: CSS3 sélecteurs animations transitions polices web

Publié le 6 juin à 16h35

L'Atelier Monstre