Positionnement des Éléments en CSS
Le positionnement des éléments en CSS permet de contrôler leur placement sur la page. Voici un exemple de code utilisant les propriétés position, top, right, bottom, et left.
.container {
position: relative;
width: 400px;
height: 500px;
border: 1px solid #333;
margin: 20px 0;
}
.box {
position: absolute;
width: 70px;
height: 60px;
background-color: #4CAF50; /* Vert */
color: #fff;
text-align: center;
line-height: 100px;
}
.top {
top: 0%;
left: 50%;
transform: translateX(-50%);
}
.bottom {
bottom: 0%;
left: 50%;
transform: translateX(-50%);
}
.left {
top: 50%;
left: 0%;
transform: translateY(-50%);
}
.right {
top: 50%;
right: 0%;
transform: translateY(-50%);
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Ce code crée une boîte (`.position-box`) positionnée au centre d'un conteneur (`.position-container`) en utilisant les propriétés position: absolute;, top: 50%;, left: 50%;, et transform: translate(-50%, -50%);. Il ajoute également des exemples pour différentes positions.
Effets d'ombre avec box-shadow
La propriété CSS `box-shadow` permet d'ajouter des ombres aux éléments, créant des effets visuels intéressants. Voici un exemple :
Ombre sur une boîte
Ajoutons une ombre à une boîte pour illustrer son utilisation :
.shadow-box {
width: 200px;
height: 200px;
background-color: #3498db; /* Bleu */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Ombre avec décalage X, décalage Y, étendue, et couleur */
}
Vous pouvez ajuster les valeurs de `box-shadow` selon vos préférences. La syntaxe est : `box-shadow: offset-x offset-y blur-radius color;`.
Dégradés linéaires avec CSS
Les dégradés linéaires permettent de créer des transitions de couleur douces sur les éléments. Voici un exemple simple :
Dégradé sur une boîte
Ajoutons un dégradé linéaire à une boîte :
.gradient-box {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #3498db, #e74c3c); /* Dégradé linéaire avec deux couleurs */
}
Vous pouvez ajuster les couleurs et l'angle du dégradé en modifiant les valeurs dans la propriété `background: linear-gradient(angle, color-stop1, color-stop2);`.
Animations CSS
Les animations CSS offrent la possibilité de créer des mouvements et des transitions attrayants sur les éléments. Voici un exemple simple :
Animation de rotation sur une boîte
Ajoutons une animation de rotation à une boîte :
.rotate-box {
width: 100px;
height: 100px;
background-color: #3498db; /* Bleu */
animation: rotateAnimation 2s linear infinite; /* Utilisation de l'animation
'rotateAnimation' pendant 2 secondes en boucle */
}
@keyframes rotateAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Cet exemple utilise une animation appelée `rotateAnimation` qui fait tourner la boîte de 0 à 360 degrés en 2 secondes en boucle infinie.
Transformations 3D avec CSS
Les transformations 3D en CSS permettent de créer des effets visuels tridimensionnels. Voici un exemple simple de rotation sur l'axe Y :
Rotation 3D sur une boîte
Ajoutons une rotation 3D à une boîte :
.rotate-3d-box { width: 100px; height: 100px; background-color: #3498db; /* Bleu */ transform-style: preserve-3d; animation: rotate3DAnimation 4s linear infinite; /* Utilisation de : 'rotate3DAnimation' pendant 4 secondes en boucle infinie */ } @keyframes rotate3DAnimation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
Cet exemple utilise une transformation 3D pour faire tourner la boîte autour de l'axe Y, créant un effet de rotation tridimensionnel.
Pseudo-éléments en CSS
Les pseudo-éléments sont utilisés pour styliser certaines parties d'un élément sans avoir besoin de balises supplémentaires dans le HTML. Deux des pseudo-éléments les plus couramment utilisés sont `::before` et `::after`.
Ajout de contenu avant et après un élément
Ajoutons du contenu avant et après un paragraphe :
.special-paragraph::before {
content: "Avant ";
font-weight: bold;
}
.special-paragraph::after {
content: " Après";
font-style: italic;
}
Contenu du paragraphe.
Dans cet exemple, les pseudo-éléments `::before` et `::after` ajoutent du contenu stylisé avant et après le paragraphe avec la classe `special-paragraph`.
Filtres CSS
Les filtres CSS offrent la possibilité d'appliquer des effets visuels à des éléments, tels que des ajustements de luminosité, de contraste, des flous, etc.
Ajout de filtres à une image
Ajoutons des filtres à l'image "aurore.png" :
/*Images sans modifications*/
.filtered-image {
max-width: 100%;
}
/* Luminosité */
.brightness-filter {
filter: brightness(150%); /* Augmente la luminosité à 150% */
}
/* Contraste */
.contrast-filter {
filter: contrast(150%); /* Augmente le contraste à 150% */
}
/* Flou */
.blur-filter {
filter: blur(5px); /* Applique un flou de 5 pixels */
}
/* Saturation */
.saturation-filter {
filter: saturate(200%); /* Augmente la saturation à 200% */
}
Dans cet exemple, chaque image applique un filtre différent : luminosité, contraste, flou, et saturation. Vous pouvez ajuster les valeurs selon vos préférences.
Transitions CSS
Les transitions CSS permettent d'ajouter des animations fluides lorsqu'un élément change de style. Elles sont utiles pour améliorer l'expérience utilisateur en ajoutant des effets visuels lors d'interactions.
Ajout d'une transition sur le survol
Ajoutons une transition sur le survol d'un bouton :
.transition-button {
padding: 10px 20px;
background-color: #3498db; /* Bleu */
color: #fff;
border: none;
cursor: pointer;
transition: background-color 3s ease; /* Transition sur la couleur de fond en 3 seconde avec une
fonction d'accélération */
}
.transition-button:hover {
background-color: #33FFAC; /* Nouvelle couleur de fond au survol */
}
Dans cet exemple :
- La propriété à animer : Utilisez la propriété `transition` pour spécifier quelle propriété doit être animée lors du changement. Dans l'exemple, c'est la couleur de fond (`background-color`).
- La durée de l'animation : La valeur `0.3s` indique que la transition durera 0.3 seconde. Vous pouvez ajuster cette valeur selon la vitesse souhaitée pour votre animation.
- La fonction de temporisation : La valeur `ease` spécifie une fonction d'accélération, ce qui signifie que l'animation démarre lentement, accélère au milieu, puis ralentit à la fin. Vous pouvez choisir d'autres fonctions telles que `linear`, `ease-in`, `ease-out`, etc.
Transformations CSS
Les transformations CSS permettent de modifier la position, la taille, et l'orientation des éléments. Elles offrent un moyen puissant d'ajuster l'apparence des éléments de manière dynamique.
Exemples de transformations
Ajoutons des transformations à un élément :
.transformed-element {
width: 100px;
height: 100px;
background-color: #33FFAC; /* Bleu-Vert */
margin: 20px;
transition: transform 1s ease; /* Transition sur la transformation en 1 seconde avec une fonction
d'accélération */
}
.transformed-element:hover {
transform: rotate(115deg) scale(1.2); /* Rotation de 115 degrés et mise à l'échelle à 120% au survol */
}
Dans cet exemple, l'élément avec la classe `transformed-element` a une transformation qui consiste en une rotation de 115 degrés et une mise à l'échelle à 120% lorsqu'il est survolé.
Animations CSS
Les animations CSS offrent la possibilité de créer des séquences de mouvements et de changements de style sur une période de temps. Elles sont particulièrement utiles pour ajouter des effets visuels attractifs.
Exemples d'animations
/* Animation de rebondissement */
.bounce-element {
width: 100px;
height: 100px;
background-color: #3498db; /* Bleu */
margin: 20px;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* Animation de rotation continue */
.rotate-element {
width: 100px;
height: 100px;
background-color: #e74c3c; /* Rouge */
margin: 20px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Animation de clignotement */
.blink-element {
width: 100px;
height: 100px;
background-color: #2ecc71; /* Vert */
margin: 20px;
animation: blink 1s infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
Dans cet exemple, trois éléments différents utilisent différentes animations : rebondissement, rotation continue, et clignotement.
Grilles CSS
Les grilles CSS offrent un moyen puissant de créer des mises en page complexes et réactives. Elles simplifient la structuration des contenus sur une page.
Création d'une mise en page en grille
Ajoutons une structure de base utilisant les grilles :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
grid-gap: 20px; /* Espacement entre les éléments */
}
.grid-item {
background-color: #3498db; /* Bleu */
color: #fff;
padding: 20px;
text-align: center;
}
Dans cet exemple, le conteneur avec la classe `grid-container` utilise `display: grid;` pour activer le modèle de grille. La propriété `grid-template-columns` définit trois colonnes égales, et `grid-gap` spécifie l'espacement entre les éléments.
Transitions d'État CSS
Les transitions d'état CSS permettent d'ajouter des effets visuels lorsqu'un élément change d'état, par exemple, lors du survol ou de l'activation. Elles améliorent l'expérience utilisateur en ajoutant des transitions fluides entre les différents états.
Ajout d'une transition pour un bouton
Ajoutons une transition pour un bouton :
.transition-state-button {
padding: 10px 20px;
background-color: #3498db; /* Bleu */
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease; /* Transition sur la couleur de fond en 0.3 seconde avec une
fonction d'accélération */
}
.transition-state-button:hover {
background-color: #FF0000; /* Nouvelle couleur de fond au survol */
}
.transition-state-button:active {
background-color: #00FF09; /* Nouvelle couleur de fond à l'activation (clic) */
}
Dans cet exemple, le bouton a une transition sur la couleur de fond lors du survol et de l'activation. La propriété `:hover` est utilisée pour le survol, et `:active` pour l'activation (lorsque le bouton est enfoncé).
Polices Personnalisées (Web Fonts) en CSS
L'utilisation de polices personnalisées permet d'apporter une touche distinctive à votre site web en utilisant des polices de caractères spécifiques. Cela contribue à renforcer l'identité visuelle de votre page.
Intégration d'une police personnalisée
Ajoutons une police personnalisée à notre site :
/* Intégration de la police personnalisée Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
/* Application de la police personnalisée aux éléments */
.custom-font-element {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
color: #333;
}
Texte avec la police personnalisée Montserrat
Dans cet exemple, nous intégrons la police Montserrat depuis Google Fonts et l'appliquons à un élément spécifique de la page.
Dégradés en CSS
Les dégradés en CSS offrent une manière élégante de créer des arrière-plans en transition entre différentes couleurs. Ils peuvent être utilisés pour ajouter de la profondeur et du style à vos éléments.
Création d'un arrière-plan dégradé
Ajoutons un arrière-plan dégradé à un élément :
/* Création d'un dégradé linéaire en arrière-plan */
.gradient-background-element {
width: 300px;
height: 150px;
background: linear-gradient(15deg, #FF0000, #5E00FF); /* Dégradé linéaire à 15 degrés entre violet et
rouge */
color: #fff;
padding: 20px;
text-align: center;
}
Dans cet exemple, un dégradé linéaire est utilisé comme arrière-plan pour un élément spécifique.