4- HTML/CSS Avancé
Élément flottant
Les éléments flottants sont des éléments qui flottent :
• Ils sont définis par la propriété float
• Ils se positionnent au dessus des autres éléments
• Uniquement à droite à ou à gauche de son conteneur
• Ils peuvent modifier la valeur de la propriété display
FLOAT
FLOAT
HTML & CSS - Térence FERUT - SIO 2024-2025 121
4- HTML/CSS Avancé
Élément flottant
HTML & CSS - Térence FERUT - SIO 2024-2025 122
4- HTML/CSS Avancé
Dimensions : Unités
Il existe différentes unités de mesure :
• px : Unité de mesure absolue (pixel)
• em : Unité de mesure relative à la taille de l’élément parent
• rem : Unité de mesure relative à la taille de l’élément root <html>
• % : Unité de mesure relative à la taille de l’élément parent
Unités de Mesure
Unités de Mesure
Par défaut la taille de police est de 16px, mais on peut la changer
HTML & CSS - Térence FERUT - SIO 2024-2025 123
4- HTML/CSS Avancé
Dimensions : Unités
HTML & CSS - Térence FERUT - SIO 2024-2025 124
4- HTML/CSS Avancé
Dimensions : Unités
1 Taille = 50px
2 Taille = 0,5 x 50px = 25px
3 Taille = 0,5 x 30px = 15px
4 Taille = 0,5 x 50px = 25px
1
1
2 2
3
4
3
4
HTML & CSS - Térence FERUT - SIO 2024-2025 125
4- HTML/CSS Avancé
Flexbox
• Flexbox est une méthode de mise en page qui permet d’agencer des éléments
• Plus précisément, il s’agit d’un modèle de disposition qui permet de définit
l’espace entre les éléments et leur alignement
• D’autres méthodes existent pour agencer les éléments d’une page HTML
• Flexbox a l’avantage d’être simple d’utilisation et responsive
FLEXBOX
FLEXBOX
HTML & CSS - Térence FERUT - SIO 2024-2025 126
4- HTML/CSS Avancé
Flexbox
Conteneur
Élément 1 Élément 2 Élément 3
HTML & CSS - Térence FERUT - SIO 2024-2025 127
4- HTML/CSS Avancé
Flexbox
HTML & CSS - Térence FERUT - SIO 2024-2025
etc ... 128
4- HTML/CSS Avancé
Flexbox
HTML & CSS - Térence FERUT - SIO 2024-2025
etc ... 129
4- HTML/CSS Avancé
Flexbox
Flexbox utilise plusieurs propriétés :
• flex : Modifie les dimensions d’un élément flexible pour remplir un conteneur
• flex-direction : Placement horizontal ou vertical des éléments, inversement
• flex-wrap : Autorise ou non l’affichage sur plusieurs lignes (retour automatique)
• flex-shrink : Autorise ou non les éléments flexibles à dépasser du conteneur
• etc…
FLEXBOX
FLEXBOX
HTML & CSS - Térence FERUT - SIO 2024-2025 130
4- HTML/CSS Avancé
flex-direction
HTML & CSS - Térence FERUT - SIO 2024-2025 131
4- HTML/CSS Avancé
flex-direction
HTML & CSS - Térence FERUT - SIO 2024-2025 132
4- HTML/CSS Avancé
Flexbox
• Si j’indique un width fixe pour chaque élément, flexbox va automatiquement
redimensionner les éléments afin qu’il n’y ait pas de retour à la ligne
• On peut changer cela avec la propriété flex-wrap
moins de 400px sur petit device
HTML & CSS - Térence FERUT - SIO 2024-2025 133
4- HTML/CSS Avancé
flex-wrap
HTML & CSS - Térence FERUT - SIO 2024-2025 134
4- HTML/CSS Avancé
justify-content
La propriété justify-content permet de paramétrer l’espacement entre et autour
des éléments. Valeurs d’alignement les plus utilisées :
• center : Éléments groupés au centre
• start : Éléments groupés au début
• end : Éléments groupés à la fin
• space-between : Éléments répartis équitablement sur le conteneur
• space-around : Éléments répartis équitablement sur le conteneur + “marges”
HTML & CSS - Térence FERUT - SIO 2024-2025 135
4- HTML/CSS Avancé
justify-content
HTML & CSS - Térence FERUT - SIO 2024-2025 136
4- HTML/CSS Avancé
justify-content
HTML & CSS - Térence FERUT - SIO 2024-2025 137
4- HTML/CSS Avancé
justify-content et flexbox
HTML & CSS - Térence FERUT - SIO 2024-2025 138
4- HTML/CSS Avancé
justify-content et flexbox
• Les valeurs flex-start et flex-end de la propriété justify-content se comportent
comme les valeurs start et end dans notre exemple
• Il y a cependant des différences notable. flex-start et flex-end :
○ Prennent en compte le sens du conteneur flexible
○ S’applique uniquement aux éléments flexibles, sinon applique start ou end
HTML & CSS - Térence FERUT - SIO 2024-2025 139
4- HTML/CSS Avancé
align-items
• La propriété align-items permet de définir l’alignement vertical des éléments au
sein d’un conteneur
• Pour fonctionner, elle nécessite que le conteneur ait une hauteur définie
• Les principales valeurs de cette propriété sont :
• stretch : Éléments étirés afin de remplir le conteneur
• center : Éléments regroupés au centre
• flex-start : Éléments flexibles regroupés au début
• flex-end : Éléments flexibles regroupés à la fin
HTML & CSS - Térence FERUT - SIO 2024-2025 140
4- HTML/CSS Avancé
align-items
HTML & CSS - Térence FERUT - SIO 2024-2025 141
4- HTML/CSS Avancé
align-items
HTML & CSS - Térence FERUT - SIO 2024-2025 142
4- HTML/CSS Avancé
Flexbox 1
Pour vous familiariser avec l’utilisation des flexbox :
1. Lisez Les concepts de base pour flexbox
2. A partir du template de base, sans changer le HTML, enregistrez TOUS les
fichiers CSS ([Link] ; [Link] …) pour arriver à ces résultats :
HTML & CSS - Térence FERUT - SIO 2024-2025 143
4- HTML/CSS Avancé
Flexbox 2
Pour vous familiariser avec l’utilisation des flexbox :
1. Essayez toutes les propriétés de flexbox sur CodePen
2. A partir du template de base, sans changer le HTML, arrivez à ce résultat
HTML & CSS - Térence FERUT - SIO 2024-2025 144
4- HTML/CSS Avancé
Positions CSS
• En CSS, le positionnement des éléments est très important au quotidien
• On distingue 3 types de positionnements :
• Absolu : Position réinitialisée
• Relatif : Position relative à la position initiale de l’élément
• Fixe : Position fixée, malgré le scroll
POSITIONS CSS
POSITIONS CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 145
4- HTML/CSS Avancé
Positions
HTML & CSS - Térence FERUT - SIO 2024-2025 146
4- HTML/CSS Avancé
Couleurs
Les couleurs peuvent s’écrire différemment en CSS :
• X11 : Sélection de couleurs avec un nom donné
• Hexadécimal : Code couleur mélangeant rouge, vert et bleu
• RGB : Code indiquant les taux de rouge, vert et bleu
• ETC …
X11 HEX RGB
turquoise #40e0d0 (64,224,208)
tomato1 #ff6347 (255,99,71)
HTML & CSS - Térence FERUT - SIO 2024-2025 147
4- HTML/CSS Avancé
Couleurs : Transparence
• RGBA permet d’ajouter la notion de transparence à une couleur
• Il s’agit du code RGB auquel on ajoute "A" (alpha), la transparence
• "A" prend une valeur comprise entre 0 (transparent) et 1 (opaque)
HTML & CSS - Térence FERUT - SIO 2024-2025 148
4- HTML/CSS Avancé
Ombres CSS
• En CSS, il est possible de rajouter des ombres aux éléments
• Pour cela, on utilise les propriétés :
• box-shadow pour les "boîtes" ou border
• text-shadow pour les textes
HTML & CSS - Térence FERUT - SIO 2024-2025 149
4- HTML/CSS Avancé
Ombres : box-shadow
1 2 3 4 5
1 Décalage horizontal (positif à droite, négatif à gauche)
2 Décalage vertical (positif en dessous, négatif au-dessus)
3 Flou de l’ombre (valeurs positives uniquement)
4 Étalement de l’ombre (positif pour agrandir, négatif pour diminuer)
5 Couleur de l’ombre
HTML & CSS - Térence FERUT - SIO 2024-2025 150
4- HTML/CSS Avancé
Ombres : box-shadow
HTML & CSS - Térence FERUT - SIO 2024-2025 151
4- HTML/CSS Avancé
Ombres : box-shadow
La propriété box-shadow :
• Peut fonctionner sans la propriété border
• Peut avoir des valeurs cumulées
• Peut être interne grâce à la valeur inset
• Adopte les mêmes arrondis que la propriété border-radius si elle s’applique
BOX SHADOW
GENERATOR
BOX SHADOW
GENERATOR
HTML & CSS - Térence FERUT - SIO 2024-2025 152
4- HTML/CSS Avancé
Ombres : text-shadow
1 2 3 4
1 Décalage horizontal (positif à droite, négatif à gauche)
2 Décalage vertical (positif en dessous, négatif au-dessus)
3 Flou de l’ombre (valeurs positives uniquement)
4 Couleur de l’ombre
HTML & CSS - Térence FERUT - SIO 2024-2025 153
4- HTML/CSS Avancé
Ombres : text-shadow
HTML & CSS - Térence FERUT - SIO 2024-2025 154
4- HTML/CSS Avancé
Ombres : text-shadow
La propriété text-shadow :
• Peut fonctionner sans la propriété border, part de la position du texte
• Peut donc être définie sur la même position que le texte (mix de couleur, flou …)
• Peut avoir des valeurs cumulées
TEXT SHADOW
GENERATOR
TEXT SHADOW
GENERATOR
HTML & CSS - Térence FERUT - SIO 2024-2025 155
4- HTML/CSS Avancé
Parallax
Parallax = Méthode qui permet de faire varier la vitesse de déplacement d’éléments
• Souvent utilisé pour une impression de profondeur (fausse 3D)
• Courant sur des sites avec scroll
• Consiste généralement à fixer une image en arrière plan, ou bien la faire se
déplacer plus lentement que le scroll
HTML & CSS - Térence FERUT - SIO 2024-2025 156
4- HTML/CSS Avancé
Parallax : Étapes
Pour créer un parallax en HTML, il faut :
1. Définir une hauteur au body et html
2. Créer une div avec une class qui a une propriété background-image
3. Dissocier les conteneurs des séparateurs et images de fond
4. Donner une position relative aux images
5. Ajouter des propriétés background-XXX
HTML & CSS - Térence FERUT - SIO 2024-2025 157
4- HTML/CSS Avancé
Parallax : Exemple
HTML & CSS - Térence FERUT - SIO 2024-2025 158
4- HTML/CSS Avancé
Parallax
Pour vous familiariser avec l’utilisation de parallax :
• Consultez les propriétés background-position ; background-size ;
background-repeat ; background-attachment
• Suivons ensemble le tutoriel Basic Parallax Website pour produire un site en
parallax :
• Comme l’exemple, mais personnalisé (classes, images, textes …)
• Avec 5 images et 4 séparateurs
HTML & CSS - Térence FERUT - SIO 2024-2025 159