CSS

color background-color opacity border-color rgba() hsl()
font-family font-size font-weight line-height letter-spacing word-spacing text-align text-decoration text-transform text-indent font-style text-shadow
position z-index top, right, bottom, left float clear overflow
display flexbox grid align-items justify-content gap
margin padding border border-radius outline box-sizing
width height max-width max-height min-width min-height
box-shadow transition transform animation filter backdrop-filter
:hover :active :focus ::before and ::after :first-child :last-child :nth-child() :nth-of-type()
media query Responsive Font Viewport Units aspect-ratio
list-style table-layout border-collapse border-spacing caption-side
visibility cursor content resize pointer-events user-select will-change

Couleurs

Color

La propriété color permet de définir la couleur du texte. Choisissez parmi une large palette de couleurs pour rendre votre texte unique !

Texte en bleu

color: blue;

Texte en rouge

color: red;

Texte en vert

color: green;

Texte en violet

color: #8e44ad;

Texte en orange

color: #ff5733;

Astuce : Utilisez des couleurs cohérentes avec le thème de votre site pour renforcer l'attrait visuel et améliorer l'expérience utilisateur.

Background Color

La propriété background-color permet de définir la couleur d'arrière-plan d'un élément, ajoutant de la profondeur et du style à vos pages.

Arrière-plan vert clair

background-color: lightgreen;

Arrière-plan bleu clair

background-color: lightblue;

Arrière-plan rose

background-color: pink;

Arrière-plan kaki clair

background-color: #f0e68c;

Arrière-plan rouge clair

background-color: #ffcccb;

Astuce : Utilisez des couleurs de fond pour différencier des sections importantes de la page et améliorer la hiérarchie visuelle.

Opacity

La propriété opacity ajuste la transparence d'un élément. Elle accepte des valeurs entre 0 (totalement transparent) et 1 (complètement opaque).

Opacité 1 (complètement opaque)

opacity: 1;

Opacité 0.7 (semi-opaque)

opacity: 0.7;

Opacité 0.5 (semi-transparent)

opacity: 0.5;

Opacité 0.3 (translucide)

opacity: 0.3;

Opacité 0.1 (quasi transparent)

opacity: 0.1;

Astuce : Utilisez des niveaux d'opacité pour créer des effets d'empilement d'éléments et de superpositions visuelles intéressantes.

Border Color

La propriété border-color permet de définir la couleur de la bordure d'un élément. Elle peut être appliquée pour souligner ou encadrer des sections importantes de votre page.

Bordure rouge

border-color: red;

Bordure bleue

border-color: blue;

Bordure verte

border-color: green;

Bordure orange

border-color: #f39c12;

Bordure violette

border-color: #8e44ad;

Astuce : Utilisez des couleurs de bordure contrastées pour attirer l’attention sur des éléments clés ou délimiter des sections.

RGBA

La fonction rgba() permet de définir une couleur en spécifiant des valeurs pour le rouge, le vert, le bleu, et un niveau d'alpha pour la transparence (de 0 pour totalement transparent à 1 pour totalement opaque).

Rouge avec 30% d'opacité

background-color: rgba(255, 0, 0, 0.3);

Bleu avec 50% d'opacité

background-color: rgba(0, 0, 255, 0.5);

Vert avec 70% d'opacité

background-color: rgba(0, 128, 0, 0.7);

Orange avec 90% d'opacité

background-color: rgba(255, 165, 0, 0.9);

Violet avec 20% d'opacité

background-color: rgba(128, 0, 128, 0.2);

Astuce : Utilisez la transparence pour créer des effets de superposition, en jouant avec les opacités pour faire ressortir des éléments sur des arrière-plans.

HSL

La fonction hsl() permet de définir une couleur en spécifiant trois valeurs : la teinte (hue, en degrés, de 0 à 360), la saturation (en %, de 0% à 100%), et la luminosité (lightness, en %, de 0% à 100%).

Rouge pur

background-color: hsl(0, 100%, 50%);

Vert pur

background-color: hsl(120, 100%, 50%);

Bleu pur

background-color: hsl(240, 100%, 50%);

Jaune pur

background-color: hsl(60, 100%, 50%);

Cyan à 50% de saturation

background-color: hsl(180, 50%, 50%);

Astuce : Utilisez la fonction hsl() pour des ajustements rapides de couleur. Modifier la saturation et la luminosité permet de créer des nuances harmonieuses sans modifier la teinte.

Typographie

Font Family

La propriété font-family permet de définir la police de caractère d'un élément. Elle peut inclure des polices de secours (fallback) pour assurer une cohérence visuelle en cas de non-disponibilité de la police principale.

Texte en Arial

font-family: Arial, sans-serif;

Texte en Courier New

font-family: 'Courier New', monospace;

Texte en Times New Roman

font-family: 'Times New Roman', serif;

Texte en Comic Sans MS

font-family: 'Comic Sans MS', cursive;

Astuce : Utilisez des polices sans-serif pour une apparence moderne et des polices serif pour un style plus classique.

Font Size

La propriété font-size ajuste la taille du texte. Vous pouvez définir la taille en pixels (px), en points (pt), ou en unités relatives comme em et rem.

Texte de taille 14px

font-size: 14px;

Texte de taille 18px

font-size: 18px;

Texte de taille 24px

font-size: 24px;

Texte de taille 32px

font-size: 32px;

Astuce : Utilisez des tailles de texte relatives comme em et rem pour une meilleure adaptabilité sur différents écrans.

Font Weight

La propriété font-weight permet de régler l'épaisseur ou la graisse du texte. Elle prend des valeurs telles que normal, bold, ou des valeurs numériques (100 à 900) pour ajuster la visibilité.

Texte en poids normal (400)

font-weight: 400;

Texte en semi-gras (600)

font-weight: 600;

Texte en gras

font-weight: bold;

Texte en extra-gras (900)

font-weight: 900;

Astuce : Utilisez une graisse de texte plus lourde pour mettre en avant des titres ou des points clés, et des graisses plus légères pour les paragraphes.

Line Height

La propriété line-height ajuste l'espacement vertical entre les lignes de texte, favorisant la lisibilité et la clarté. Elle peut être définie avec des valeurs numériques, des pourcentages ou des unités de mesure (px, em).

Texte avec interligne de 1.2

line-height: 1.2;

Texte avec interligne de 1.5

line-height: 1.5;

Texte avec interligne de 2

line-height: 2;

Texte avec interligne de 3

line-height: 3;

Astuce : Une interligne plus grande rend le texte plus lisible, surtout pour les paragraphes. Privilégiez un interligne de 1.5 ou plus pour les longs textes.

Letter Spacing

La propriété letter-spacing permet de définir l'espacement entre les lettres dans un texte, favorisant la lisibilité ou créant des effets stylistiques.

Espacement normal entre lettres

letter-spacing: 0px;

Espacement de 2px entre lettres

letter-spacing: 2px;

Espacement de 5px entre lettres

letter-spacing: 5px;

Espacement réduit (-1px) entre lettres

letter-spacing: -1px;

Astuce : Utilisez un espacement légèrement augmenté pour des titres ou des mots clés pour les rendre plus lisibles et attirants.

Word Spacing

La propriété word-spacing ajuste l'espacement entre les mots, ce qui peut améliorer la lisibilité des textes longs ou créer des effets stylistiques particuliers.

Espacement normal entre mots

word-spacing: 0px;

Espacement de 5px entre mots

word-spacing: 5px;

Espacement de 10px entre mots

word-spacing: 10px;

Espacement réduit (-2px) entre mots

word-spacing: -2px;

Astuce : Utilisez un espacement plus large pour les blocs de texte étroits et améliorez la lisibilité dans des paragraphes denses.

Text Align

La propriété text-align définit l'alignement du texte dans un élément. Elle prend des valeurs telles que left, center, right, et justify pour organiser le contenu.

Texte aligné à gauche

text-align: left;

Texte centré

text-align: center;

Texte aligné à droite

text-align: right;

Texte justifié

text-align: justify;

Astuce : Utilisez justify pour des paragraphes longs et center pour des titres ou des éléments importants.

Text Decoration

La propriété text-decoration applique une décoration au texte, comme un soulignement, une ligne au-dessus, ou une ligne barrée.

Texte souligné

text-decoration: underline;

Texte avec ligne au-dessus

text-decoration: overline;

Texte barré

text-decoration: line-through;

Texte souligné et avec ligne au-dessus

text-decoration: underline overline;

Astuce : Utilisez underline pour souligner les liens et line-through pour montrer des éléments indisponibles ou barrés.

Text Transform

La propriété text-transform modifie la casse du texte. Elle peut transformer du texte en majuscules, minuscules, ou en capitalisant chaque mot.

Texte en MAJUSCULES

text-transform: uppercase;

texte en minuscules

text-transform: lowercase;

Texte Avec Majuscule Au Début De Chaque Mot

text-transform: capitalize;

Astuce : Utilisez uppercase pour les titres et capitalize pour un style formel.

Text Indent

La propriété text-indent ajuste l'indentation de la première ligne de texte dans un paragraphe, ce qui est souvent utilisé pour améliorer la lisibilité des paragraphes longs.

Texte avec une indentation de 20px sur la première ligne. Cela améliore la structure des paragraphes en insérant une indentation.

text-indent: 20px;

Texte avec une indentation de 40px sur la première ligne. Cette technique est souvent utilisée dans les publications pour introduire de nouveaux paragraphes.

text-indent: 40px;

Astuce : Utilisez une légère indentation (environ 20px) pour rendre les textes plus élégants et organisés.

Font Style

La propriété font-style définit le style de la police, comme normal, italic, ou oblique, ce qui permet d’ajouter des effets stylistiques au texte.

Texte en style normal

font-style: normal;

Texte en italique

font-style: italic;

Texte en oblique

font-style: oblique;

Astuce : Utilisez italic pour les citations et oblique pour un style léger et moins formel.

Text Shadow

La propriété text-shadow ajoute une ombre au texte, ce qui peut créer de la profondeur et des effets visuels uniques. Elle prend des valeurs pour le décalage horizontal, vertical, le flou, et la couleur.

Ombre subtile

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Ombre rouge intense

text-shadow: 3px 3px 6px #e74c3c;

Ombre bleue décalée

text-shadow: -2px 2px 5px #3498db;

Ombre multiple

text-shadow: 1px 1px 2px #2ecc71, -1px -1px 2px #f39c12;

Astuce : Utilisez des ombres subtiles pour améliorer la lisibilité et des ombres multiples pour des effets décoratifs.

Positionnement

Position

La propriété position détermine le type de positionnement d'un élément : relative, absolute, fixed, ou sticky, qui modifient son placement dans le flux de la page.

Position relative avec décalage vers le bas

position: relative; top: 10px;

Position absolue avec décalage

position: absolute; top: 10px; left: 20px;

Position sticky en haut

position: sticky; top: 0;

Astuce : Utilisez fixed pour des éléments toujours visibles comme les menus, et sticky pour des éléments qui se fixent lors du défilement.

Z-Index

La propriété z-index contrôle la superposition des éléments positionnés. Les valeurs plus élevées apparaissent au-dessus des valeurs plus faibles.

z-index de 1

z-index: 1;

z-index de 2

z-index: 2;

z-index de 3

z-index: 3;

Astuce : Utilisez des valeurs z-index élevées pour des éléments essentiels (comme des menus déroulants) pour les superposer à d’autres éléments.

Position avec top, right, bottom, left

Les propriétés top, right, bottom, et left définissent les positions respectives d'un élément positionné dans son conteneur ou par rapport au viewport.

Décalage de 20px depuis le haut

position: relative; top: 20px;

Décalage de 20px depuis la droite

position: relative; right: 20px;

Décalage de 20px depuis le bas

position: relative; bottom: 20px;

Décalage de 20px depuis la gauche

position: relative; left: 20px;

Astuce : Utilisez top, right, bottom, et left en combinaison avec les propriétés de position pour un contrôle précis du placement des éléments.

Float et Clear

Float

La propriété float permet à un élément de "flotter" à gauche ou à droite, le retirant du flux normal et permettant au texte ou aux autres éléments de s'enrouler autour de lui.

Flottant à gauche

float: left;

Flottant à droite

float: right;

Astuce : Utilisez float pour créer des mises en page où le texte s'enroule autour d'images ou de blocs flottants.

Clear

La propriété clear est utilisée pour contrôler le comportement d'un élément par rapport aux éléments flottants. Elle peut prendre les valeurs left, right, both, ou none.

Clear à gauche

clear: left;

Clear à droite

clear: right;

Clear des deux côtés

clear: both;

Astuce : Utilisez clear: both pour éviter que des éléments flottants affectent la mise en page des sections suivantes.

Overflow

Overflow

La propriété overflow contrôle le comportement du contenu qui dépasse les dimensions d'un élément. Elle accepte les valeurs visible, hidden, scroll, et auto.

Contenu visible (par défaut)

Texte débordant qui reste visible en dehors de la boîte.

overflow: visible;

Contenu masqué

Texte débordant masqué dans la boîte.

overflow: hidden;

Contenu avec barres de défilement

Texte débordant avec une barre de défilement.

overflow: scroll;

Contenu avec défilement automatique

Texte débordant avec barre de défilement seulement si nécessaire.

overflow: auto;

Astuce : Utilisez overflow: hidden pour masquer le contenu excédentaire ou overflow: auto pour permettre le défilement automatique seulement en cas de dépassement.

Mise en page

Display

La propriété display définit le type d'affichage d'un élément. Elle prend des valeurs telles que block, inline, inline-block, flex, et grid pour ajuster la disposition des éléments.

Texte avec display: inline

display: inline;

<div style="display: inline;">Texte avec display: inline</div>
Texte avec display: block

display: block;

<div style="display: block;">Texte avec display: block</div>
Texte avec display: inline-block

display: inline-block;

<div style="display: inline-block;">Texte avec display: inline-block</div>
Item 1
Item 2

display: flex;

<div style="display: flex;">
    <div>Item 1</div>
    <div>Item 2</div>
</div>
Item 1
Item 2

display: grid; grid-template-columns: 1fr 1fr;

<div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div>Item 1</div>
    <div>Item 2</div>
</div>
Astuce : Utilisez display: inline pour que les éléments suivent le flux du texte, block pour qu'ils occupent toute la largeur disponible, inline-block pour des éléments en ligne avec des dimensions contrôlables, flex pour des mises en page dynamiques, et grid pour créer des dispositions en grille.

Flexbox

La propriété display: flex est utilisée pour créer des mises en page flexibles, permettant aux éléments de s'aligner et de se répartir dynamiquement dans un conteneur.

Item 1
Item 2
Item 3

display: flex; gap: 10px;

Item 1
Item 2
Item 3

justify-content: space-between;

Item 1
Item 2

justify-content: center; align-items: center;

Item 1
Item 2
Item 3

flex-direction: column;

Astuce : Utilisez flexbox avec des propriétés comme justify-content, align-items, et flex-direction pour créer des mises en page dynamiques et adaptatives.

Grid

La propriété display: grid est utilisée pour créer des mises en page en grille, permettant de placer des éléments dans un arrangement en lignes et colonnes.

Item 1
Item 2

display: grid; grid-template-columns: 1fr 1fr;

Item 1
Item 2
Item 3
Item 4
Item 5

grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto;

Header
Content
Sidebar
Footer

grid-template-areas: 'header header' 'content sidebar' 'footer footer';

Astuce : Utilisez grid-template-columns et grid-template-rows pour définir la structure de la grille et grid-area pour fusionner les cellules pour des mises en page plus complexes.

Align Items

La propriété align-items contrôle l'alignement vertical des éléments dans un conteneur flex ou grid. Elle accepte des valeurs comme center, flex-start, flex-end, stretch, et baseline.

Centré verticalement

align-items: center;

Aligné en haut

align-items: flex-start;

Aligné en bas

align-items: flex-end;

Étendu

align-items: stretch;

Aligné à la ligne de base
Texte plus petit

align-items: baseline;

Astuce : Utilisez align-items pour positionner les éléments de manière flexible dans un conteneur flex ou grid, selon leur hauteur ou leur ligne de base.

Justify Content

La propriété justify-content contrôle l'alignement horizontal des éléments dans un conteneur flex ou grid, distribuant l'espace entre eux selon la valeur choisie.

Item 1
Item 2
Item 3

justify-content: flex-start;

Item 1
Item 2
Item 3

justify-content: flex-end;

Item 1
Item 2
Item 3

justify-content: center;

Item 1
Item 2
Item 3

justify-content: space-between;

Item 1
Item 2
Item 3

justify-content: space-around;

Item 1
Item 2
Item 3

justify-content: space-evenly;

Astuce : Utilisez justify-content pour ajuster la répartition de l’espace horizontal entre les éléments, en fonction de la disposition souhaitée : center pour un centrage, space-between pour des espaces égaux, ou flex-end pour un alignement à droite.

Gap

La propriété gap crée de l'espace entre les éléments d'un conteneur flex ou grid, facilitant le contrôle de l'espacement sans marges ou paddings supplémentaires.

Item 1
Item 2
Item 3

gap: 15px; dans un conteneur flex

Item 1
Item 2
Item 3

gap: 30px; dans un conteneur flex

Item 1
Item 2
Item 3
Item 4

grid-template-columns: 1fr 1fr; gap: 20px; dans un conteneur grid

Astuce : Utilisez gap pour ajuster facilement l'espacement entre les éléments, en augmentant la lisibilité et l'esthétique sans ajouter de marges individuelles.

Marges et Espacements

Margin

La propriété margin définit l'espace extérieur autour de l'élément, créant de l'espace entre l'élément et ceux qui l'entourent. Elle peut être appliquée uniformément ou spécifiquement sur chaque côté.

Avec marges de 20px

margin: 20px;

Marge : haut 10px, droite 20px, bas 30px, gauche 40px

margin: 10px 20px 30px 40px;

Marge : 15px vertical, 30px horizontal

margin: 15px 30px;

Centré horizontalement avec margin: auto

margin: 0 auto; pour centrer un élément horizontalement

Astuce : Utilisez des marges individuelles (ex. margin-top, margin-right, etc.) pour un contrôle précis, et margin: auto pour centrer des éléments en largeur fixe.

Padding

La propriété padding définit l'espace intérieur entre le contenu et la bordure de l'élément, créant une séparation autour du contenu lui-même. Elle peut être appliquée uniformément ou spécifiquement sur chaque côté.

Avec padding de 20px

padding: 20px;

Padding : haut 10px, droite 20px, bas 30px, gauche 40px

padding: 10px 20px 30px 40px;

Padding : 15px vertical, 30px horizontal

padding: 15px 30px;

Padding : 20px en haut et en bas, 0 à gauche et droite

padding: 20px 0;

Astuce : Utilisez des valeurs de padding individuelles pour ajuster précisément l'espace intérieur de chaque côté de l'élément, ou utilisez une seule valeur pour appliquer le même padding partout.

Border

La propriété border définit la bordure autour d'un élément. Elle peut spécifier la largeur, le style et la couleur de la bordure.

Bordure de 2px noire

border: 2px solid black;

Bordure bleue de 4px

border: 4px solid #3498db;

Bordure rouge en pointillés

border: 2px dotted #e74c3c;

Bordure en haut de 3px verte

border-top: 3px solid #2ecc71;

Bordure de 2px avec coins arrondis

border: 2px solid #9b59b6; border-radius: 10px;

Astuce : Utilisez border-radius pour adoucir les angles d’une bordure, et combinez différents styles et couleurs pour un effet visuel plus attrayant.

Border Radius

La propriété border-radius permet d'arrondir les coins d'un élément. Elle accepte des valeurs en pixels, pourcentages ou unités de longueur. Vous pouvez appliquer des arrondis uniformes ou spécifiques à chaque coin.

Coins arrondis de 10px

border-radius: 10px;

Cercle

border-radius: 50%;

Arrondi haut-gauche et bas-droit

border-top-left-radius: 15px; border-bottom-right-radius: 15px;

Bordure elliptique

border-radius: 20px 50px;

Coins arrondis : 10px, 20px, 30px, 40px

border-radius: 10px 20px 30px 40px;

Astuce : Utilisez border-radius: 50% pour créer des éléments circulaires parfaits, et combinez des valeurs pour des effets personnalisés sur chaque coin.

Outline

La propriété outline est utilisée pour ajouter un contour autour d'un élément, en dehors des bordures. Contrairement aux bordures normales, elle ne modifie pas la disposition de l'élément. Elle est souvent utilisée pour mettre en évidence un élément lors d'une interaction, comme le focus d'un champ de formulaire. Exemple de propriétés :

  • outline-width : Épaisseur de l'outline.
  • outline-style : Style de l'outline (solid, dotted, dashed, etc.).
  • outline-color : Couleur de l'outline.
Contour bleu en tirets

outline: 2px dashed blue;

Contour rouge solide de 4px

outline: 4px solid #e74c3c;

Focus pour voir le contour bleu

outline: 3px solid #3498db; appliqué lors de l'interaction focus

Outline transparent avec fond dégradé

outline: 3px solid transparent; avec fond en dégradé

Astuce : Utilisez outline pour attirer l'attention sur un élément lors des interactions sans affecter la disposition. Combinez avec outline-offset pour ajuster la distance entre le contour et l'élément.

Box Sizing

La propriété box-sizing détermine la manière dont la taille totale d'un élément est calculée : elle inclut ou non les bordures et le padding dans la largeur et la hauteur spécifiées de l'élément.

  • content-box (par défaut) : La largeur et la hauteur s'appliquent uniquement au contenu ; les bordures et le padding sont ajoutés en plus.
  • border-box : La largeur et la hauteur incluent le padding et les bordures, ce qui facilite le contrôle de la taille totale.
border-box avec width de 150px, incluant padding et bordure

box-sizing: border-box; width: 150px; padding: 20px; border: 5px solid #333;

content-box avec width de 150px, ajoutant padding et bordure

box-sizing: content-box; width: 150px; padding: 20px; border: 5px solid #333;

Astuce : Utilisez box-sizing: border-box pour un contrôle plus facile de la taille des éléments, surtout lors de l’ajout de padding et de bordures.

Dimensions

Width

La propriété width en CSS permet de définir la largeur d'un élément. Elle contrôle la largeur de l'espace que cet élément occupe dans son conteneur. En fonction des valeurs utilisées, la largeur peut être fixée ou adaptative, ce qui est essentiel pour concevoir des mises en page flexibles et responsives. Voici un aperçu des valeurs les plus courantes :

  • Pixels (px) : Une valeur en pixels donne une largeur fixe à l'élément, comme width: 200px;. Cette unité est idéale lorsque vous voulez une taille exacte et non adaptable.
  • Pourcentage (%) : La valeur en pourcentage adapte la largeur de l'élément en fonction de la largeur de son conteneur parent. Par exemple, width: 50%; rend l'élément large de la moitié du conteneur. Cela permet une réactivité naturelle sur les tailles d’écran variées.
  • Unités de viewport (vw, vh) : Les unités relatives au viewport (comme vw pour la largeur de la fenêtre et vh pour la hauteur) permettent de créer des éléments proportionnés à la taille de la fenêtre de l’utilisateur. Par exemple, width: 30vw; signifie que l'élément occupera 30 % de la largeur totale de la fenêtre de visualisation, quelle que soit sa taille.
  • Unités relatives (em, rem) : Ces unités basées sur la taille de la police (de l’élément parent pour em et de la racine du document pour rem) permettent une largeur proportionnelle au texte. Par exemple, width: 20em; ajuste la largeur en fonction de la taille de la police, ce qui peut être utile pour des mises en page fluides en typographie.
  • Valeurs spéciales :
    • auto : Cette valeur ajuste automatiquement la largeur de l'élément en fonction de son contenu et du modèle de boîte CSS. Si utilisé dans un conteneur flex, il peut remplir l'espace restant disponible.
    • inherit : Cette valeur fait hériter à l'élément la largeur de son conteneur parent.

La propriété width fonctionne en combinaison avec d'autres propriétés de dimensionnement, comme max-width et min-width, pour limiter ou étendre la largeur d'un élément. Par exemple, utiliser width: 100% avec max-width: 500px; donne un élément adaptable qui ne dépasse pas 500 pixels, même sur des écrans plus larges.

Lorsque la propriété box-sizing est réglée sur border-box, la largeur inclut également les bordures et le padding, facilitant ainsi le calcul de la taille totale de l’élément. Cela simplifie la mise en page en garantissant que la largeur totale de l’élément reste constante, même avec un padding ou une bordure.

En utilisant des valeurs de largeur flexibles et adaptées, la propriété width joue un rôle crucial dans la création de mises en page responsives, permettant aux éléments de s'adapter naturellement à différentes tailles d'écran.

Astuce : Utilisez width: 100% avec max-width pour des mises en page flexibles et responsives, en limitant la largeur maximale selon l'espace disponible.

Height

La propriété height en CSS permet de définir la hauteur d'un élément. En contrôlant cette hauteur, elle ajuste l'espace vertical que cet élément occupe dans son conteneur. Selon les valeurs utilisées, elle peut être fixe ou adaptative. Voici les unités les plus courantes pour la hauteur :

  • Pixels (px) : Une hauteur en pixels, comme height: 100px;, définit une taille exacte et non flexible.
  • Pourcentage (%) : Définir une hauteur en pourcentage ajuste l'élément par rapport à la hauteur du conteneur parent, par exemple, height: 50%;.
  • Unités de viewport (vh) : Les unités relatives au viewport comme vh rendent l’élément proportionnel à la hauteur de la fenêtre, par exemple height: 30vh;.
  • Unités relatives (em, rem) : Ces unités sont basées sur la taille de la police, utile pour des hauteurs ajustables selon le texte.
  • Valeurs spéciales :
    • auto : Calcule automatiquement la hauteur en fonction du contenu.
    • inherit : Hérite de la hauteur de l'élément parent.

Les propriétés min-height et max-height peuvent limiter ou étendre la hauteur d'un élément. Par exemple, min-height: 50px; garantit une hauteur minimum, alors que max-height: 300px; empêche l’élément de dépasser une certaine hauteur.

En utilisant box-sizing: border-box, la hauteur inclut le padding et les bordures, ce qui simplifie le calcul de la taille finale.

Astuce : Utilisez min-height et max-height pour des mises en page flexibles et maîtrisez la hauteur des éléments selon le contenu et l’espace disponible.

Max Width

La propriété max-width fixe la largeur maximale d'un élément. Cela signifie que l'élément ne pourra pas s'étendre au-delà de cette valeur, mais pourra se réduire pour s'adapter à des écrans plus petits. Utilisée dans les mises en page responsives, elle est particulièrement utile pour limiter la largeur d'images, de cartes, ou de sections de contenu sans compromettre leur adaptabilité.

  • Pixels (px) : Une largeur maximale en pixels comme max-width: 300px; empêche l'élément de dépasser cette taille fixe.
  • Pourcentage (%) : max-width: 80%; limite l'élément à 80% de la largeur du conteneur parent, permettant une adaptation en fonction de la taille de la fenêtre.
Largeur maximale de 300px

max-width: 300px;

Largeur maximale de 80% du conteneur parent

max-width: 80%;

Astuce : Utilisez max-width pour limiter la taille des éléments tout en assurant une adaptabilité aux différentes tailles d'écran.

Max Height

La propriété max-height fixe la hauteur maximale d'un élément, ce qui empêche cet élément de s’étendre au-delà d’une certaine hauteur. Très utile pour des éléments avec du contenu dynamique, elle est souvent combinée avec overflow: auto; pour ajouter un défilement lorsque le contenu dépasse la hauteur maximale.

  • Pixels (px) : max-height: 150px; fixe une limite maximale en pixels.
  • Pourcentage (%) : max-height: 50%; permet de limiter la hauteur de l'élément à 50% du conteneur parent.
Astuce : Utilisez max-height pour gérer le contenu de grande hauteur et éviter la surcharge de mise en page.

Min Width

La propriété min-width fixe la largeur minimale d'un élément, garantissant que cet élément ne devienne jamais plus petit que la valeur spécifiée. Utilisée pour préserver la lisibilité des éléments comme les boutons ou les zones de texte, elle assure la stabilité des mises en page en évitant des rétrécissements excessifs.

  • Pixels (px) : min-width: 200px; impose une largeur minimale fixe.
  • Pourcentage (%) : min-width: 50%; garantit que l'élément ne sera pas inférieur à 50% de la largeur du conteneur.
Largeur minimale de 200px

min-width: 200px;

Largeur minimale de 50% du conteneur parent

min-width: 50%;

Astuce : Utilisez min-width pour garantir la lisibilité et l’accessibilité des éléments, surtout sur les petits écrans.

Min Height

La propriété min-height définit la hauteur minimale d'un élément pour garantir qu'il ait toujours une taille verticale suffisante, même si le contenu est peu volumineux. Utile pour les sections de présentation ou les cartes, elle assure la consistance visuelle des éléments dans une mise en page.

  • Pixels (px) : min-height: 100px; fixe une hauteur minimale en pixels.
  • Pourcentage (%) : min-height: 30%; permet à l'élément d'occuper au moins 30% de la hauteur du conteneur.
Astuce : Utilisez min-height pour conserver une mise en page équilibrée, même si le contenu est peu volumineux.

Effets et Animations

Box Shadow

La propriété box-shadow ajoute une ombre autour d’un élément pour donner une profondeur visuelle, souvent utilisée pour souligner des éléments ou créer un effet de surélévation. Cette propriété peut être personnalisée en ajustant différents paramètres :

Paramètres de box-shadow :

  • Décalage horizontal : Contrôle le décalage horizontal de l'ombre. Une valeur positive la déplace vers la droite, une valeur négative vers la gauche.
  • Décalage vertical : Contrôle le décalage vertical de l'ombre. Une valeur positive la déplace vers le bas, une valeur négative vers le haut.
  • Rayon de flou : Contrôle le degré de flou de l'ombre. Plus la valeur est élevée, plus l'ombre est diffuse.
  • Rayon d’étendue : Optionnel, il agrandit ou réduit la taille de l'ombre autour de l'élément. Une valeur positive étend l'ombre, une valeur négative la rétrécit.
  • Couleur : Détermine la couleur de l'ombre, qui peut inclure la transparence grâce au format rgba.

Exemples d’ombres avec box-shadow :

Ombre simple : box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
Ombre floue : box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
Ombre étendue : box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, 0.4);
Ombre intérieure : box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
Ombres multiples : box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(0, 0, 0, 0.2);
Astuce : Utilisez box-shadow pour mettre en valeur des éléments importants ou donner un effet de profondeur. Vous pouvez même appliquer plusieurs ombres pour des effets plus complexes.

Transition

La propriété transition permet de créer des animations fluides entre différents états CSS d'un élément, par exemple lors d'un changement de couleur, de taille, ou de position. En ajoutant une transition, on obtient un effet plus naturel et esthétique. La propriété transition contrôle la durée et le timing des effets.

Paramètres de transition :

  • Propriété : Définit quelle propriété sera animée, comme background-color, transform, ou opacity.
  • Durée : Contrôle la durée de l'animation, spécifiée en secondes (s) ou millisecondes (ms).
  • Fonction de timing : Détermine le rythme de la transition. Les options incluent ease (par défaut), linear, ease-in, ease-out, et ease-in-out.
  • Délai (facultatif) : Définit le délai avant le début de l'animation.

Exemples de transition :

Passez votre souris ici pour voir la transition de couleur

transition: background-color 0.5s;

Passez votre souris ici pour voir la transition de taille

transition: transform 0.5s;

Passez votre souris ici pour voir une transition multiple

transition: background-color 0.5s, transform 0.5s;

Astuce : Utilisez transition pour améliorer l'expérience utilisateur en rendant les changements visuels plus fluides et naturels. Essayez de combiner plusieurs propriétés pour des effets complexes et intéressants.

Transform

La propriété transform permet de manipuler la position, la taille, la rotation ou l’inclinaison d’un élément sans modifier sa place dans le flux de la page. Elle est couramment utilisée pour créer des effets visuels et des animations.

Principales fonctions de transform :

  • translate(x, y) : Déplace l’élément horizontalement (x) et/ou verticalement (y).
  • rotate(angle) : Fait pivoter l'élément d'un angle spécifié.
  • scale(x, y) : Redimensionne l'élément. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur inférieure à 1 le réduit.
  • skew(x, y) : Incline l'élément selon les axes horizontal et vertical.

Exemples de transform :

Pivote de 15 degrés : transform: rotate(15deg);
Déplacé de 20px vers la droite et de 10px vers le bas : transform: translate(20px, 10px);
Rétréci de -20% de sa taille d'origine : transform: scale(0.8);
Incliné de 15 degrés horizontalement et de 5 degrés verticalement : transform: skew(15deg, 5deg);
Déplacé, pivoté et agrandi : transform: translate(10px, 10px) rotate(10deg) scale(1.1);
Astuce : Combinez plusieurs fonctions transform pour créer des effets visuels complexes et attrayants, par exemple pour des animations sur les boutons et les images.

Animation

La propriété animation permet de créer des effets visuels continus en appliquant une série de styles CSS sur un élément dans le temps. Les animations CSS peuvent être utilisées pour rendre une page plus interactive, en jouant sur des changements de couleurs, de taille, de position, etc.

Principaux paramètres d'animation :

  • Nom de l'animation : Référence la séquence définie par @keyframes.
  • Durée : Détermine la durée de l'animation, spécifiée en secondes (s) ou millisecondes (ms).
  • Fonction de timing : Contrôle la vitesse de l'animation (exemples : ease, linear, ease-in, ease-out).
  • Délai : Définit le délai avant le démarrage de l'animation.
  • Itérations : Détermine combien de fois l'animation doit être jouée (infinite pour une boucle continue).
  • Direction : Contrôle le sens de l'animation (exemples : normal, reverse, alternate).

Exemples d’animations :

Animation de couleur : animation: colorChange 2s infinite;
Déplacement vers la droite : animation: moveRight 3s infinite alternate;
Redimensionnement : animation: growShrink 2s infinite alternate;
Astuce : Utilisez des animations CSS pour attirer l'attention sur des éléments importants ou pour créer des transitions fluides et engageantes. N'abusez pas des animations pour éviter de surcharger l'expérience utilisateur.

Filter

La propriété filter permet d'appliquer divers effets visuels, tels que la luminosité, le flou, le contraste et la saturation, sur des éléments. Ces effets sont souvent utilisés pour styliser des images, des vidéos ou des éléments pour obtenir un aspect visuel distinct et améliorer l'expérience utilisateur.

Principaux filtres disponibles :

  • brightness() : Ajuste la luminosité de l'élément (valeurs entre 0 et 1 pour assombrir et >1 pour éclaircir).
  • blur() : Ajoute un flou autour de l'élément. La valeur spécifie le rayon de flou en pixels.
  • contrast() : Ajuste le contraste de l'élément (valeurs entre 0 et 1 pour réduire le contraste et >1 pour l'accentuer).
  • grayscale() : Convertit l'élément en niveaux de gris. La valeur va de 0 (pas de gris) à 1 (complètement gris).
  • sepia() : Applique un effet sépia, donnant une apparence vieillie à l'image. La valeur va de 0 à 1.

Exemples de filtres :

Luminosité réduite et flou : filter: brightness(0.8) blur(2px);
Contraste augmenté : filter: contrast(1.5);
Niveaux de gris : filter: grayscale(1);
Effet sépia : filter: sepia(0.7);
Combinaison de filtres : filter: grayscale(0.5) contrast(1.2) brightness(1.1);
Astuce : Utilisez les filtres pour donner un effet visuel particulier aux images ou pour attirer l’attention sur des éléments en combinant plusieurs effets de manière créative.

Backdrop Filter

La propriété backdrop-filter applique des effets visuels tels que le flou ou la transparence aux éléments se trouvant *derrière* un élément. Contrairement à filter, qui affecte l'élément lui-même, backdrop-filter crée un effet de verre dépoli, comme celui souvent utilisé pour les barres de navigation translucides.

Principaux filtres disponibles pour backdrop-filter :

  • blur() : Applique un flou à l'arrière-plan.
  • brightness() : Ajuste la luminosité de l'arrière-plan.
  • contrast() : Change le contraste de l'arrière-plan.
  • grayscale() : Convertit l'arrière-plan en niveaux de gris.
  • opacity() : Ajuste l’opacité de l’arrière-plan.
  • sepia() : Applique un effet sépia pour un aspect vieilli.

Exemples de backdrop-filter :

Flou de l'arrière-plan : backdrop-filter: blur(5px);
Luminosité réduite de l'arrière-plan : backdrop-filter: brightness(0.5);
Niveaux de gris appliqués à l'arrière-plan :backdrop-filter: grayscale(1);
Combinaison de filtres :backdrop-filter: blur(5px) brightness(0.7);
Astuce : Utilisez backdrop-filter pour créer des effets de verre dépoli ou des barres de navigation transparentes sans affecter l’élément lui-même, offrant ainsi une expérience visuelle raffinée.

Pseudo-classes et Pseudo-éléments

:hover

Le pseudo-élément :hover permet d’appliquer des styles spécifiques à un élément lorsque l’utilisateur le survole avec la souris. Il est idéal pour créer des effets interactifs et visuels qui améliorent l'expérience utilisateur en attirant l'attention sur des éléments clés.

Exemples de styles appliqués avec :hover :

Passez la souris ici : .effect-hover:hover { background-color: #fdd835; }
Survol pour agrandir
Survol pour pivoter
Survol pour réduire l'opacité
Astuce : Utilisez :hover pour créer des effets interactifs subtils sur des boutons, des liens ou des images, afin de guider les utilisateurs et de rendre l'interface plus engageante.

:active

Le pseudo-élément :active applique un style spécifique à un élément au moment où il est cliqué. Cette propriété est particulièrement utile pour les boutons ou les liens, en créant un retour visuel instantané lorsque l’utilisateur appuie sur l’élément, renforçant ainsi l'interactivité de l'interface.

Exemples de styles appliqués avec :active :

Cliquez ici : .effect-active:active { background-color: #0288d1; }
Réduction de taille pendant le clic
Opacité réduite pendant le clic
Bordure ajoutée pendant le clic
Astuce : Utilisez :active pour créer des effets visuels instantanés, renforçant l'interaction des utilisateurs avec les éléments de la page, notamment les boutons ou les liens.

:focus

Le pseudo-élément :focus s'applique lorsqu'un élément est activé ou sélectionné, notamment dans les champs de formulaires ou les liens. Il est souvent utilisé pour améliorer l'accessibilité en ajoutant un effet visuel, indiquant aux utilisateurs que l'élément est actif et prêt pour une interaction.

Exemples de styles appliqués avec :focus :

.effect-focus:focus { background-color: #66bb6a; }

.focus-border:focus { border-color: #42a5f5; }

.focus-shadow:focus { box-shadow: 0 0 8px #f06292; }

Astuce : Utilisez :focus pour améliorer l'accessibilité, en donnant des indications visuelles aux utilisateurs sur les éléments actuellement activés, comme les champs de formulaires et les liens.

::before et ::after

Les pseudo-éléments ::before et ::after permettent d'ajouter du contenu avant ou après un élément, sans avoir à modifier le HTML. Ils sont souvent utilisés pour ajouter des décorations ou du texte, styliser des éléments, et créer des effets visuels.

Principaux usages de ::before et ::after :

  • Décoration de texte : Ajouter des icônes ou des éléments visuels sans changer le contenu principal.
  • Styling : Créer des effets de rubans, de citations, ou de cadres autour d’un élément.
  • Ajout de texte dynamique : Afficher des labels, des titres, ou des notes supplémentaires.

Exemples de ::before et ::after :

Contenu principal

.effect-before-after::before { content: "Début - "; }
.effect-before-after::after { content: " - Fin"; }

Icône ajoutée avant le texte

.effect-icon-before::before { content: "📘 "; }

Ligne ajoutée après le texte

.effect-line-after::after { content: ""; display: block; width: 100%; height: 2px; }

Astuce : Utilisez ::before et ::after pour ajouter des décorations, telles que des icônes ou des lignes, sans toucher au contenu HTML de l'élément.

:first-child

Le pseudo-élément :first-child sélectionne uniquement le premier élément enfant d'un parent. Il est particulièrement utile pour styliser le premier élément d'une liste ou d'un conteneur sans affecter les autres éléments enfants.

Utilisations pratiques de :first-child :

  • Listes : Styliser le premier élément d'une liste de manière distincte.
  • Conteneurs : Mettre en évidence le premier élément d’un groupe de divs ou sections.
  • Tableaux : Appliquer un style spécifique à la première ligne d'un tableau.

Exemples de :first-child :

Premier enfant
Autre enfant
Autre enfant

.effect-first-child div:first-child { background-color: #ffccbc; }

  • Premier élément de liste
  • Autre élément
  • Autre élément

.effect-first-list li:first-child { background-color: #ffe0b2; }

Astuce : Utilisez :first-child pour donner une apparence unique au premier élément de divers groupes, tels que les listes ou les conteneurs de divs, afin de renforcer la hiérarchie visuelle.

:last-child

Le pseudo-élément :last-child s'applique uniquement au dernier élément enfant d'un parent. Il est particulièrement utile pour styliser le dernier élément d'une liste ou d'un conteneur, permettant de créer une séparation visuelle ou un effet de clôture.

Utilisations pratiques de :last-child :

  • Listes : Appliquer un style unique au dernier élément d'une liste.
  • Conteneurs : Différencier le dernier élément d’un groupe pour marquer une fin visuelle.
  • Tableaux : Styliser la dernière ligne d'un tableau pour donner un effet visuel de clôture.

Exemples de :last-child :

Premier enfant
Dernier enfant

.effect-last-child div:last-child { background-color: #c5cae9; }

  • Premier élément de liste
  • Autre élément
  • Dernier élément de liste

.effect-last-list li:last-child { background-color: #d1c4e9; }

Astuce : Utilisez :last-child pour styliser le dernier élément de divers conteneurs, tels que les listes ou les blocs de texte, afin de souligner la fin d’un groupe ou de créer un effet de clôture.

:nth-child()

Le pseudo-élément :nth-child() sélectionne un ou plusieurs éléments enfants d'un parent en fonction de leur position. Cela permet de créer des motifs de style répétitifs, de styliser un élément précis ou encore d'appliquer des effets de zébrage dans des listes ou tableaux.

Utilisations pratiques de :nth-child() :

  • Styliser des éléments spécifiques : Appliquer un style unique au n-ième enfant, par exemple le 2e ou le 3e.
  • Effets de zébrage : Styliser les éléments pairs ou impairs d’une liste ou d’un tableau.
  • Motifs répétitifs : Créer des motifs visuels répétitifs, comme styliser tous les 3 éléments d’un groupe.

Exemples de :nth-child() :

Premier enfant
Deuxième enfant
Troisième enfant

.effect-nth-child div:nth-child(2) { background-color: #b2dfdb; }

  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4

.effect-even-child li:nth-child(even) { background-color: #e0f2f1; }

  • Élément 1
  • Élément 2
  • Élément 3
  • Élément 4

.effect-odd-child li:nth-child(odd) { background-color: #b2ebf2; }

Astuce : Utilisez :nth-child() pour des motifs répétitifs et des effets de zébrage en appliquant des styles spécifiques aux éléments en fonction de leur position, comme tous les éléments pairs ou impairs.

:nth-of-type()

Le pseudo-élément :nth-of-type() sélectionne un ou plusieurs éléments en fonction de leur type et de leur position parmi les autres éléments de même type sous le même parent. C'est particulièrement utile pour styliser le n-ième élément d'un type spécifique, même s'il n'est pas le seul enfant de son parent.

Utilisations pratiques de :nth-of-type() :

  • Styliser des éléments spécifiques d'un type : Appliquer un style unique au n-ième paragraphe, div ou autre élément de même type sous le même parent.
  • Effets de zébrage : Styliser tous les éléments pairs ou impairs d'un certain type dans un conteneur.
  • Motifs répétitifs : Créer des motifs visuels pour chaque 3e ou 4e élément d'un type donné.

Exemples de :nth-of-type() :

Premier paragraphe

Deuxième paragraphe

Troisième paragraphe

.effect-nth-of-type p:nth-of-type(2) { background-color: #d1c4e9; }

  • Premier élément
  • Deuxième élément
  • Troisième élément
  • Quatrième élément

.effect-even-of-type li:nth-of-type(even) { background-color: #e1bee7; }

  • Premier élément
  • Deuxième élément
  • Troisième élément
  • Quatrième élément

.effect-odd-of-type li:nth-of-type(odd) { background-color: #c5cae9; }

Astuce : Utilisez :nth-of-type() pour styliser des éléments spécifiques dans des structures HTML complexes où plusieurs types d'éléments coexistent sous le même parent.

Médias Queries et Responsivité

< class="row">

Media Query

Les media queries permettent d'appliquer des styles CSS conditionnels en fonction des caractéristiques de l'écran, comme sa largeur, sa hauteur, sa résolution ou son orientation. Elles sont essentielles pour concevoir des designs responsives qui s'adaptent aux différentes tailles d'appareils, du mobile au grand écran.

Exemples d’utilisation des media queries :

  • Adaptation de la taille des polices : Ajuster la taille du texte pour une meilleure lisibilité sur les petits écrans.
  • Disposition en colonnes : Passer d'une disposition en une colonne sur mobile à plusieurs colonnes sur un écran plus large.
  • Changement de couleurs ou d’espacement : Ajuster les couleurs, marges et padding pour une meilleure expérience utilisateur.

Exemples de media queries :

Redimensionnez la fenêtre pour voir le changement de style

@media (max-width: 600px) { .responsive-text { font-size: 14px; background-color: #ffeb3b; } }

Colonne 1
Colonne 2

@media (max-width: 600px) { .responsive-layout { display: block; } }

Astuce : Utilisez des media queries pour rendre votre design plus flexible et responsive, en adaptant les styles CSS selon la largeur de l’écran pour offrir une expérience utilisateur optimale sur tous les appareils.

Responsive Font

En utilisant des unités de mesure basées sur le viewport, comme vw (viewport width), vous pouvez ajuster la taille du texte pour qu'elle reste proportionnelle à la largeur de la fenêtre. Cela permet de maintenir une lisibilité cohérente sur différents appareils, sans besoin de media queries supplémentaires.

Principales unités pour les polices responsives :

  • vw : Largeur de la fenêtre d'affichage (viewport width). Par exemple, font-size: 2vw; adapte la taille de la police à 2% de la largeur de la fenêtre.
  • vh : Hauteur de la fenêtre d'affichage (viewport height), utile pour certaines mises en page plus spécifiques.
  • vmin et vmax : Respectivement le plus petit ou le plus grand côté de la fenêtre (en hauteur ou largeur), permettant une réactivité plus équilibrée.

Exemple de police responsive :

Texte responsive en fonction de la largeur de la fenêtre

.responsive-font { font-size: 2vw; }

Pour un contrôle encore plus précis, vous pouvez également combiner vw avec des media queries pour ajuster la police lorsque la largeur atteint certaines limites.

@media (max-width: 600px) { .responsive-font { font-size: 16px; } }

Astuce : Les unités vw et vh sont idéales pour le texte dans les grandes bannières ou titres. Pour le corps de texte, il est souvent préférable de fixer une taille minimale pour éviter des tailles de texte trop petites.

Viewport Units

Les unités vh (viewport height) et vw (viewport width) permettent de définir des dimensions en fonction de la taille de la fenêtre du navigateur. Elles sont pratiques pour créer des mises en page adaptatives et réactives, en ajustant les éléments selon les dimensions de l’écran.

Principales unités de viewport :

  • vh : 1vh correspond à 1% de la hauteur de la fenêtre d'affichage (viewport height). Par exemple, height: 100vh; couvre 100% de la hauteur de la fenêtre.
  • vw : 1vw correspond à 1% de la largeur de la fenêtre d'affichage (viewport width). Par exemple, width: 100vw; couvre 100% de la largeur de la fenêtre.
  • vmin : Représente la plus petite dimension entre vh et vw, utile pour garder des éléments proportionnés sur tous les écrans.
  • vmax : Représente la plus grande dimension entre vh et vw, idéal pour des éléments occupant toujours la plus grande surface.

Exemples d’utilisation des unités de viewport :

Prend 100% de la hauteur de la fenêtre

.full-height { height: 100vh; }

Taille basée sur la plus petite dimension (50vmin)

.min-size { width: 50vmin; height: 50vmin; }

Taille basée sur la plus grande dimension (50vmax)

.max-size { width: 50vmax; height: 50vmax; }

Astuce : Utilisez vh et vw pour créer des sections pleine largeur et pleine hauteur, et vmin ou vmax pour des éléments proportionnés aux dimensions de la fenêtre.

Aspect Ratio

La propriété aspect-ratio permet de définir un ratio (ou rapport de proportions) fixe entre la largeur et la hauteur d’un élément, garantissant qu’il conserve toujours les mêmes proportions, quel que soit l’espace disponible. Cela est particulièrement utile pour les éléments multimédias comme les vidéos, les images, ou les conteneurs de cartes.

Fonctionnement de aspect-ratio :

  • Ratio standard : Exprimé sous forme de fraction, comme 16 / 9 pour un format d’écran large ou 1 / 1 pour un carré.
  • Dimensionnement adaptatif : L’élément ajuste sa taille tout en conservant le ratio défini, ce qui facilite les mises en page responsives.

Exemples d’utilisation de aspect-ratio :

Proportion carrée 1:1

.aspect-ratio-square { aspect-ratio: 1 / 1; }

Proportion d’écran large 16:9

.aspect-ratio-rect { aspect-ratio: 16 / 9; }

Proportion fixe 4:3, largeur de 200px

.aspect-ratio-fixed { width: 200px; aspect-ratio: 4 / 3; }

Astuce : Utilisez aspect-ratio pour des images, des vidéos, ou des conteneurs de carte afin de maintenir des proportions visuelles cohérentes sur tous les appareils et dans toutes les mises en page.

Listes et tableaux

List Style

La propriété list-style permet de personnaliser l’apparence des éléments de liste (ul, ol) en modifiant le type de puce, l'image de puce, ou la position des marqueurs. Cela donne plus de flexibilité pour le design des listes.

Sous-propriétés de list-style :

  • list-style-type : Définit le type de puce de la liste (par exemple, disc, circle, square, decimal).
  • list-style-position : Définit la position de la puce (inside ou outside) par rapport à l'élément de la liste.
  • list-style-image : Permet d'utiliser une image comme puce de liste, en définissant un lien vers une image avec url().

Exemples de list-style :

  • Élément de liste avec des carrés
  • Deuxième élément
  • Troisième élément

list-style-type: square;

  • Élément de liste avec une image de puce
  • Deuxième élément
  • Troisième élément

list-style-image: url('https://via.placeholder.com/10');

  • Élément de liste avec puce à l'intérieur
  • Deuxième élément
  • Troisième élément

list-style-position: inside;

  • Combinaison de circle et inside
  • Deuxième élément
  • Troisième élément

list-style: circle inside;

Astuce : Utilisez list-style pour personnaliser vos listes en fonction du design souhaité. La propriété raccourcie list-style vous permet de combiner les styles en une seule ligne.

Table Layout

La propriété table-layout permet de contrôler la manière dont la largeur des colonnes d’une table est calculée et distribuée. Elle offre deux principales options : auto et fixed. Cela influence la réactivité de la table et son temps de rendu, surtout lorsque la table contient un grand volume de données.

Valeurs de table-layout :

  • auto : Par défaut, la largeur des colonnes s’adapte au contenu de chaque cellule. La table peut devenir plus large si le contenu est volumineux.
  • fixed : La largeur des colonnes est définie selon la première ligne de la table, et le reste du contenu est tronqué ou ajusté pour rentrer. La table est rendue plus rapidement, car la disposition ne dépend pas de tout le contenu.

Exemples d’utilisation de table-layout :

Nom Âge Description
Alice 30 Aime les sciences et les langues étrangères.
Bob 25 Passionné de photographie et de randonnée.

table-layout: auto;

Nom Âge Description
Alice 30 Aime les sciences et les langues étrangères.
Bob 25 Passionné de photographie et de randonnée.

table-layout: fixed;

Astuce : Utilisez table-layout: fixed pour améliorer les performances et la lisibilité lorsque les tables contiennent un grand volume de données. Le mode auto est plus adapté pour des tables contenant des colonnes de largeurs variables.

Border Collapse

La propriété border-collapse contrôle si les bordures d'une table sont fusionnées (collapsées) en une seule bordure ou séparées autour des cellules. Elle prend deux valeurs principales : collapse et separate.

Valeurs de border-collapse :

  • collapse : Fusionne les bordures des cellules et de la table en une seule bordure. Cela crée un rendu plus net et compact, sans espace entre les cellules.
  • separate : Maintient les bordures des cellules séparées, laissant un espace entre elles. Par défaut, cet espace est contrôlé par la propriété border-spacing.

Exemples d’utilisation de border-collapse :

Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

border-collapse: separate; border-spacing: 10px;

Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

border-collapse: collapse;

Astuce : Utilisez border-collapse: collapse pour un design plus compact. La valeur separate est utile lorsque vous voulez ajouter de l'espace entre les cellules avec border-spacing.

Border Spacing

La propriété border-spacing permet de contrôler l’espace entre les cellules d’une table lorsque border-collapse est défini sur separate. Elle accepte une ou deux valeurs : une seule valeur applique le même espacement horizontal et vertical, tandis que deux valeurs permettent de définir un espacement distinct pour les lignes et les colonnes.

Utilisation de border-spacing :

  • Une valeur : Par exemple, border-spacing: 10px; applique un espace de 10 pixels entre chaque cellule, horizontalement et verticalement.
  • Deux valeurs : Par exemple, border-spacing: 10px 20px; applique 10 pixels d’espacement vertical et 20 pixels d’espacement horizontal.

Exemples d’utilisation de border-spacing :

Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

border-spacing: 10px;

Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

border-spacing: 10px 20px;

Astuce : Utilisez border-spacing pour ajuster l'espace entre les cellules lorsque border-collapse est défini sur separate. Cela est particulièrement utile pour améliorer la lisibilité et ajouter de l'air entre les données dans un tableau.

Caption Side

La propriété caption-side contrôle la position d'une légende de table (définie avec la balise <caption>) par rapport à la table. Elle peut être placée en haut ou en bas de la table.

Valeurs de caption-side :

  • top (par défaut) : Place la légende au-dessus de la table.
  • bottom : Place la légende en bas de la table.

Exemples d’utilisation de caption-side :

Légende en haut
Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

caption-side: top;

Légende en bas
Nom Âge Occupation
Alice 30 Ingénieur
Bob 25 Designer

caption-side: bottom;

Astuce : Utilisez caption-side: bottom pour les tables où le contenu de la légende agit comme une note explicative ou un résumé placé sous les données.

Divers

Visibility

La propriété visibility contrôle si un élément est visible ou non, tout en maintenant son espace dans la mise en page. Contrairement à display: none qui retire complètement l’élément de la mise en page, visibility laisse un espace réservé pour l’élément.

Valeurs de visibility :

  • visible (par défaut) : L'élément est affiché normalement.
  • hidden : L'élément est masqué mais occupe toujours son espace dans la mise en page.
  • collapse : Pour les éléments de tableau uniquement, cela supprime l’élément de la mise en page (similaire à display: none).

Exemples d’utilisation de visibility :

Cet élément est visible (valeur par défaut)

visibility: visible;

visibility: hidden;

Texte d'exemple avant l'élément masqué

Texte d'exemple après l'élément masqué

visibility: hidden; avec espace laissé dans la mise en page

Astuce : Utilisez visibility: hidden pour masquer temporairement un élément sans perturber la mise en page, par exemple pour des messages d’erreur ou des notifications qui s'affichent dynamiquement.

Cursor

La propriété cursor permet de contrôler l'apparence du curseur de la souris lorsque celui-ci survole un élément. Différents styles de curseur peuvent indiquer une fonctionnalité particulière de l'élément, comme un lien cliquable ou une zone de redimensionnement.

Valeurs communes de cursor :

  • default : Le curseur par défaut (souvent une flèche).
  • pointer : Affiche un curseur en forme de main, généralement utilisé pour indiquer un lien cliquable.
  • text : Affiche un curseur en forme de "I", indiquant une zone de texte éditable.
  • move : Indique que l'élément peut être déplacé.
  • not-allowed : Montre un symbole de "non autorisé" (⛔), souvent pour indiquer une action interdite.
  • grab et grabbing : Représente une main prête à "saisir" ou "déplacer" un objet.

Exemples d’utilisation de cursor :

Curseur par défaut (flèche)

cursor: default;

Curseur en forme de main (cliquable)

cursor: pointer;

Curseur en forme de I (édition de texte)

cursor: text;

Curseur de déplacement

cursor: move;

Curseur "non autorisé"

cursor: not-allowed;

Astuce : Utilisez cursor: pointer pour indiquer des zones cliquables, cursor: text pour des champs de texte, et cursor: not-allowed pour signaler des actions non disponibles.

Content

La propriété content permet d'ajouter du contenu dans le style CSS, souvent en combinaison avec les pseudo-éléments ::before et ::after. Cela peut inclure du texte, des images, des attributs HTML ou même des symboles spéciaux, permettant d’ajouter des éléments décoratifs ou informatifs sans modifier le code HTML.

Valeurs communes de content :

  • Texte entre guillemets : content: "Texte"; ajoute du texte avant ou après l’élément.
  • Attribut HTML : content: attr(data-label); utilise un attribut HTML de l’élément (par exemple, data-label).
  • Images : content: url('image.png'); affiche une image en pseudo-élément.
  • Valeurs spéciales : content: ''; ajoute un espace vide, tandis que content: none; supprime le contenu ajouté.

Exemples d’utilisation de content :

Exemple avec texte ajouté avant

.content-text::before { content: "Texte avant "; color: #9b59b6; }

Utilisation de l’attribut data

.content-attr::before { content: attr(data-label); color: #9b59b6; }

Exemple avec image ajoutée avant

.content-image::before { content: url('https://via.placeholder.com/15'); }

Astuce : Utilisez content pour afficher des informations complémentaires, comme des icônes, des étiquettes, ou pour ajouter des séparateurs visuels entre les éléments.

Resize

La propriété resize permet de contrôler si un élément peut être redimensionné par l'utilisateur et dans quelle direction. Elle est souvent utilisée avec des éléments comme les zones de texte (<textarea>) pour permettre aux utilisateurs d'ajuster la taille de l'élément selon leurs besoins.

Valeurs de resize :

  • none : Désactive le redimensionnement de l'élément.
  • both : Autorise le redimensionnement de l'élément en largeur et en hauteur.
  • horizontal : Autorise le redimensionnement de l'élément en largeur seulement.
  • vertical : Autorise le redimensionnement de l'élément en hauteur seulement.

Exemples d’utilisation de resize :

Redimensionnable dans les deux directions (draguer depuis le coin).

resize: both; overflow: auto;

Redimensionnable horizontalement uniquement

resize: horizontal; overflow: auto;

Redimensionnable verticalement uniquement

resize: vertical; overflow: auto;

Redimensionnement désactivé

resize: none;

Astuce : Utilisez resize avec overflow: auto pour que l'élément garde un contenu défilable en cas de redimensionnement.

Pointer Events

La propriété pointer-events contrôle si un élément peut recevoir des événements de pointage, comme les clics ou les survols de la souris. Elle est souvent utilisée pour désactiver les interactions sur certains éléments, tout en les laissant visibles.

Valeurs de pointer-events :

  • auto : Active les événements de pointage (par défaut), permettant à l'élément de répondre aux clics et survols.
  • none : Désactive les événements de pointage, rendant l'élément insensible aux clics et survols de la souris.

Exemples d’utilisation de pointer-events :

Interaction activée - Cliquez ici

pointer-events: auto;

Interaction désactivée - Ne peut pas être cliqué

pointer-events: none;

Astuce : Utilisez pointer-events: none pour afficher des éléments décoratifs ou des overlays sans interaction, tout en gardant les éléments en dessous cliquables.

User Select

La propriété user-select détermine si le texte d'un élément peut être sélectionné par l'utilisateur. Elle est couramment utilisée pour désactiver la sélection de texte sur des éléments comme les titres, les boutons, ou les icônes interactives.

Valeurs de user-select :

  • auto : Laisse le comportement de sélection par défaut, en fonction du type d'élément et des paramètres du navigateur.
  • none : Désactive complètement la sélection de texte pour l'élément.
  • text : Force la sélection de texte, même sur des éléments normalement non sélectionnables (par exemple, des boutons).
  • all : Sélectionne tout le texte dans l'élément d'un seul clic.

Exemples d’utilisation de user-select :

Sélection par défaut (auto)

user-select: auto;

Sélection désactivée (none)

user-select: none;

Sélection forcée (text)

user-select: text;

Sélection complète (all)

user-select: all;

Astuce : Utilisez user-select: none pour les éléments interactifs où la sélection n'est pas souhaitée, comme des boutons ou des icônes.

Will-Change

La propriété will-change informe le navigateur qu'un élément pourrait changer prochainement dans certaines propriétés, permettant ainsi une optimisation du rendu. Elle est souvent utilisée pour des effets d'animation ou de transformation.

Valeurs de will-change :

  • transform : Optimise les transformations à venir, comme scale ou rotate.
  • opacity : Améliore les performances pour les changements d'opacité, souvent utilisé dans les transitions et animations.
  • scroll-position : Prépare l'élément pour un changement de position de défilement (utile pour les effets parallaxe).
  • auto : Valeur par défaut, ne prédit aucun changement.

Exemples d’utilisation de will-change :

Survolez-moi pour voir une transformation

will-change: transform;

Survolez-moi pour voir un changement d'opacité

will-change: opacity;

Astuce : Utilisez will-change uniquement sur les éléments nécessitant une optimisation de performance immédiate, car un usage excessif peut alourdir la mémoire.