CSS3 - Interface utilisateur

La propriété d'interface utilisateur vous permet de transformer n'importe quel élément en l'un des nombreux éléments d'interface utilisateur standard.

Certaines des propriétés courantes utilisées dans l'interface utilisateur css3.

N ° Sr.	Valeur et description
1	appearance Utilisé pour permettre à l'utilisateur de créer des éléments en tant qu'éléments d'interface utilisateur.
2	box-sizing Permet aux utilisateurs de fixer des éléments sur la zone de manière claire.
3	icon Utilisé pour fournir l'icône sur la zone.
4	resize Utilisé pour redimensionner les éléments qui sont sur la zone.
5	outline-offset Utilisé pour dessiner l'arrière du contour.
6	nav-down Utilisé pour descendre lorsque vous avez appuyé sur le bouton fléché vers le bas du clavier.
sept	nav-left Utilisé pour se déplacer vers la gauche lorsque vous avez appuyé sur la touche fléchée gauche du clavier.
8	nav-right Utilisé pour se déplacer vers la droite lorsque vous avez appuyé sur la flèche vers la droite du clavier.
9	nav-up Utilisé pour monter lorsque vous avez appuyé sur la touche fléchée vers le haut du clavier.

Exemple de propriété resize

La propriété Resize a trois valeurs communes, comme indiqué ci-dessous -

horizontal
vertical
both

Utilisation de both valeur dans la propriété resize dans l'interface utilisateur css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

Il produira le résultat suivant -

Décalage du contour CSS3

Out line signifie dessiner une ligne autour de l'élément à l'extérieur de la bordure.

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

Il produira le résultat suivant -