CSS3 - Interfaz de usuario

La propiedad de la interfaz de usuario le permite cambiar cualquier elemento en uno de varios elementos estándar de la interfaz de usuario.

Algunas de las propiedades comunes que se utilizan en la interfaz de usuario css3.

No Señor. Valor y descripción
1

appearance

Se utiliza para permitir que el usuario cree elementos como elementos de la interfaz de usuario.
2

box-sizing

Permite a los usuarios fijar elementos en el área de forma clara.
3

icon

Se utiliza para proporcionar el icono en el área.
4

resize

Se usa para cambiar el tamaño de los elementos que están en el área.
5

outline-offset

Se usa para dibujar detrás del contorno.
6

nav-down

Se usa para moverse hacia abajo cuando ha presionado el botón de flecha hacia abajo en el teclado.
7

nav-left

Se usa para moverse hacia la izquierda cuando ha presionado el botón de flecha hacia la izquierda en el teclado.
8

nav-right

Se usa para moverse hacia la derecha cuando ha presionado el botón de flecha hacia la derecha en el teclado.
9

nav-up

Se usa para moverse hacia arriba cuando ha presionado el botón de flecha hacia arriba en el teclado.

Ejemplo de propiedad de cambio de tamaño

La propiedad de cambio de tamaño tiene tres valores comunes, como se muestra a continuación:

  • horizontal
  • vertical
  • both

Usando de both valor en la propiedad de cambio de tamaño en la interfaz de usuario 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>

Producirá el siguiente resultado:

Desplazamiento de esquema CSS3

Fuera de línea significa dibujar una línea alrededor del elemento en el exterior del borde.

<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>

Producirá el siguiente resultado: