OUJOOD.COM
Bien sûr, voici un tutoriel sur la propriété CSS outline-offset
Définition
La propriété CSS outline-offset permet de définir la distance entre le bord de l'élément et le contour (`outline`) qui l'entoure. Elle est utilisée pour personnaliser l'apparence des contours d'un élément.
Syntaxe générale
La syntaxe générale de la propriété outline-offset est la suivante :
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.outlineOffset="15px |
outline-offset: distance;
où `distance` est une valeur numérique (positive ou négative) suivie d'une unité de mesure (par exemple, `px`, `em`, `rem`, `%`, etc.).
Valeurs possibles
Les valeurs possibles pour la propriété outline-offset sont les suivantes :
- `auto` : Cette valeur utilise la valeur par défaut de l'élément pour déterminer l'espacement entre l'élément et le contour. C'est la valeur par défaut de la propriété outline-offset.
- `<distance>` : Cette valeur spécifie une distance personnalisée (positive ou négative) entre le bord de l'élément et le contour. La valeur peut être exprimée en pixels (`px`), ems (`em`), rems (`rem`), pourcentages (`%`), etc.
Exemple pratique d'utilisation
Voici un exemple pratique d'utilisation de la propriété outline-offset. Dans cet exemple, nous utilisons outline-offset pour personnaliser le contour d'un bouton :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>The Materialize Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
padding: 10px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
outline: 2px solid #f00;
outline-offset: 10px;
}
</style>
</head>
<body>
<button class="btn">Cliquez ici</button>
</body>
</html>
Dans cet exemple, nous avons créé un bouton (`<button>`) avec une couleur de fond bleue (`#007bff`), une couleur de texte blanche (`#fff`), une bordure invisible (`border: none`) et un contour (`outline`) de 2 pixels d'épaisseur et de couleur rouge (`#f00`). Nous avons également utilisé outline-offset pour déplacer le contour de 10 pixels vers l'extérieur du bouton.
Conseils et astuces
Voici quelques conseils et astuces à garder à l'esprit lors de l'utilisation de la propriété outline-offset :
- - La propriété outline-offset n'affecte pas la taille ou la position de l'élément, mais seulement l'apparence du contour.
- - La propriété outline-offset ne fonctionne qu'avec la propriété `outline`. Si vous n'avez pas défini `outline`, outline-offset n'aura aucun effet.
- - Utilisez des valeurs négatives pour rapprocher le contour de l'élément, et des valeurs positives pour l'éloigner.
- - Évitez d'utiliser des valeurs trop élevées pour outline-offset, car cela peut rendre le contour difficile à distinguer de l'élément.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 15 | 3.5 | 3.1 | 10.5 |
Exemple de l'animation de la propriété css outline-offset
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>propriété css outline-offset</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: red solid 5px;
width: 300px;
height: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-offset: 50px;}
}
</style>
</head>
<body>
<h1>Animation de outline-offset</h1>
<p>Modifiez progressivement la propriété "outline-offset" de 0 à 50px, puis revenez à 0 :<p>
<div id="myDIV"></div>
</body>
</html>