CSS outline-color
Les propriétés CSSLa propriété CSS outline-color permet de spécifier la couleur des quatre contours d'un élément.
Définition et utilisation de la propriété outline-color
Un outline est une ligne qui est dessinée autour des éléments, en dehors de la bordure, pour démarquer l'élément.
La propriété outline-color définit la couleur du contour. Il faut toujours déclarer la propriété outline-style avant la outline-color, un contour doit avoir un style pour avoir une couleur.
Code CSS :
Exemple 📋 Copier le code
p {
outline-style: dotted;
outline-color: #00ff00;
}
Valeur par défaut: invert
Héritée: non
Version: CSS2
Syntaxe JavaScript: object.style.outlineColor="#00FF00"
Valeurs de la propriété :
| Valeur | Description |
|---|---|
| Nom de la couleur | Spécifie la couleur de fond avec un nom de couleur, comme red |
| Nombre hexadécimal | Spécifie la couleur de fond avec un code hexadécimal, comme #ff0000 |
| Nombre RGB | Spécifie la couleur de fond avec un code RGB, comme RGB (255.0.0) |
| invert | Effectue une inversion des couleurs. Cela garantit que le contour est visible, indépendamment de la couleur de fond. Par défaut. |
| inherit | Indique que le paramètre de la propriété doit être héritée de l'élément parent. Internet Explorer (IE8 inclus) ne supporte pas cette valeur. |
Conseils pour utiliser la propriété outline-color :
- Utilisez outline-color pour différencier visuellement les éléments focusables, tels que les liens et les boutons, lorsqu'ils sont en état de focus.
- Assurez-vous que la couleur de l'outline soit suffisamment contrastée avec l'arrière-plan de l'élément pour une meilleure visibilité.
- Évitez les couleurs trop vives ou trop claires qui pourraient distraire l'utilisateur.
- Utilisez judicieusement outline-color pour améliorer l'accessibilité de votre site web en rendant les éléments focusables plus facilement repérables.
- Expérimentez avec différentes couleurs pour trouver celle qui convient le mieux au design et à l'esthétique de votre site.
Suggestions d'utilisation de la propriété outline-color :
- Pour les formulaires en ligne, utilisez une couleur de contour contrastée pour indiquer clairement les champs actuellement sélectionnés.
- Sur les interfaces utilisateur complexes, utilisez outline-color pour mettre en évidence les zones interactives et améliorer la navigation.
- Si vous utilisez `outline` pour la conception de boutons personnalisés, assurez-vous que la couleur du contour soit en harmonie avec le reste de votre design.
- Expérimentez avec des transitions ou des animations CSS pour créer des effets visuels subtils lorsque les éléments deviennent focusables.
- Testez votre design sur différents navigateurs pour vous assurer que les contours colorés sont visibles et fonctionnent correctement sur chaque plateforme.
Par carabde 10 mars 2014