CSS Interface Utilisateur
Interface Utilisateur CSS
Dans ce chapitre, vous apprendrez les propriétés d'interface utilisateur CSS suivantes :
-
resize -
outline-offset
Redimensionnement CSS
La propriété resize spécifie si (et comment) un élément peut être redimensionné par l'utilisateur.
Cette propriété peut avoir l'une des valeurs suivantes :
-
horizontal- l'utilisateur peut redimensionner l'élément horizontalement (la largeur) -
vertical- l'utilisateur peut redimensionner l'élément verticalement (la hauteur) -
both- l'utilisateur peut redimensionner l'élément à la fois verticalement et horizontalement -
none- l'utilisateur ne peut pas redimensionner l'élément
Vous pouvez redimensionner cet élément div verticalement !
Pour redimensionner : cliquez et faites glisser dans le coin inférieur droit !
Redimensionnement CSS - Seulement la Largeur
L'exemple suivant permet à l'utilisateur de redimensionner uniquement la largeur d'un élément <div> :
Exemple
div {
resize: horizontal;
overflow: auto;
} Redimensionnement CSS - Seulement la Hauteur
L'exemple suivant permet à l'utilisateur de redimensionner uniquement la hauteur d'un élément <div> :
Exemple
div {
resize: vertical;
overflow: auto;
} Redimensionnement CSS - À la fois la Largeur et la Hauteur
L'exemple suivant permet à l'utilisateur de redimensionner à la fois la largeur et la hauteur d'un élément <div> :
Exemple
div {
resize: both;
overflow: auto;
} Désactiver le Redimensionnement dans Textarea CSS
Un <textarea> est souvent redimensionnable par défaut.
Ici, nous avons utilisé la propriété resize pour désactiver le redimensionnement dans <textarea> :
Exemple
textarea {
resize: none;
} Décalage de Contour CSS
La propriété outline-offset ajoute un espace entre un contour et le bord ou la bordure d'un élément. L'espace entre un élément et son contour est transparent.
L'exemple suivant spécifie un contour de 15px à l'extérieur de la bordure :
Ce paragraphe a une bordure noire et un contour rouge de 15px à l'extérieur de la bordure.
Remarque : Le contour diffère des bordures ! Contrairement à la bordure, le contour est dessiné à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le contour ne fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur du contour.
L'exemple suivant utilise la propriété outline-offset pour ajouter de l'espace entre la bordure et le contour :
Exemple
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
} Propriétés d'Interface Utilisateur CSS
Le tableau suivant répertorie toutes les propriétés d'interface utilisateur :
| Propriété | Description |
|---|---|
| outline-offset | Ajoute de l'espace entre un contour et le bord ou la bordure d'un élément |
| resize | Spécifie si un élément est redimensionnable par l'utilisateur ou non |