Fonctionnalités CSS3 que vous ne connaissez peut-être pas : Flexbox, dispositions de grille, propriétés personnalisées, transitions, animations et arrière-plans multiples

Feuilles de style en cascade (CSS) continuent d’évoluer et les dernières versions peuvent avoir certaines fonctionnalités dont vous n’êtes peut-être même pas conscients. Voici quelques-unes des principales améliorations et méthodologies introduites avec CSS3, ainsi que des exemples de code :

• Disposition flexible de la boîte (Flexbox): un mode de mise en page qui vous permet de créer des mises en page flexibles et réactives pour les pages Web. Avec flexbox, vous pouvez facilement aligner et distribuer des éléments dans un conteneur. Dans cet exemple, le .container utilisations de classe display: flex pour activer le mode de mise en page flexbox. Le justify-content la propriété est définie sur center pour centrer horizontalement l’élément enfant dans le conteneur. Le align-items la propriété est définie sur center pour centrer verticalement l’élément enfant. Le .item La classe définit la couleur d’arrière-plan et le rembourrage de l’élément enfant.

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• Disposition de la grille: un autre mode de mise en page qui vous permet de créer des mises en page complexes basées sur une grille pour les pages Web. Avec la grille, vous pouvez spécifier des lignes et des colonnes, puis placer des éléments dans des cellules spécifiques de la grille. Dans cet exemple, le .grid-container utilisations de classe display: grid pour activer le mode de mise en page de la grille. Le grid-template-columns la propriété est définie sur repeat(2, 1fr) pour créer deux colonnes de largeur égale. Le gap La propriété définit l’espacement entre les cellules de la grille. Le .grid-item La classe définit la couleur d’arrière-plan et le rembourrage des éléments de la grille.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

Annonces

• Transition : CSS3 a introduit un certain nombre de nouvelles propriétés et techniques pour créer des transitions sur les pages Web. Par exemple, le transition La propriété peut être utilisée pour animer les modifications des propriétés CSS au fil du temps. Dans cet exemple, le .box La classe définit la largeur, la hauteur et la couleur d’arrière-plan initiale de l’élément. Le transition la propriété est définie sur background-color 0.5s ease pour animer les modifications apportées à la propriété de couleur d’arrière-plan sur une demi-seconde avec une fonction de synchronisation d’entrée-sortie. Le .box:hover change la couleur d’arrière-plan de l’élément lorsque le pointeur de la souris est dessus, déclenchant l’animation de transition.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• Animations : CSS3 a introduit un certain nombre de nouvelles propriétés et techniques pour créer des animations sur des pages Web. Dans cet exemple, nous avons ajouté une animation en utilisant le animation propriété. Nous avons défini un @keyframes règle pour l’animation, qui spécifie que la boîte doit tourner de 0 degrés à 90 degrés sur une durée de 0,5 seconde. Lorsque la boîte est survolée, le spin l’animation est appliquée pour faire pivoter la boîte. Le animation-fill-mode la propriété est définie sur forwards pour s’assurer que l’état final de l’animation est conservé après sa fin.

<div class="rotate"></div>

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

Annonces

• Propriétés personnalisées CSS : Aussi connu sous le nom Variables CSS, les propriétés personnalisées ont été introduites dans CSS3. Ils vous permettent de définir et d’utiliser vos propres propriétés personnalisées dans CSS, qui peuvent être utilisées pour stocker et réutiliser des valeurs dans vos feuilles de style. Les variables CSS sont identifiées par un nom qui commence par deux tirets, comme --my-variable. Dans cet exemple, nous définissons une variable CSS appelée –primary-color et lui donnons la valeur #007bff, qui est une couleur bleue couramment utilisée comme couleur primaire dans de nombreux modèles. Nous avons utilisé cette variable pour définir le background-color propriété d’un élément bouton, en utilisant la propriété var() fonction et en passant le nom de la variable. Cela utilisera la valeur de la variable comme couleur d’arrière-plan du bouton.

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• Arrière-plans multiples : CSS3 vous permet de spécifier plusieurs images d’arrière-plan pour un élément, avec la possibilité de contrôler son positionnement et son ordre d’empilement. Le fond est composé de deux images, red.png et blue.pngqui sont chargés à l’aide de background-image propriété. La première image, red.pngest positionné dans le coin inférieur droit de l’élément, tandis que la deuxième image, blue.png, est positionné dans le coin supérieur gauche de l’élément. Le background-position La propriété est utilisée pour contrôler le positionnement de chaque image. Le background-repeat La propriété est utilisée pour contrôler la façon dont les images se répètent. La première image, red.pngest configuré pour ne pas se répéter (no-repeat), tandis que la deuxième image, blue.pngest configuré pour répéter (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}