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 -