CSS | Interfaz de usuario – Barcelona Geeks

La interfaz de usuario (UI) define la forma en que los humanos interactúan con los sistemas de información. En términos sencillos, la interfaz de usuario (UI) es una serie de páginas, pantallas, botones, formularios y otros elementos visuales que se utilizan para interactuar con el dispositivo. Cada aplicación y cada sitio web tiene una interfaz de usuario.
La propiedad de interfaz de usuario se utiliza para cambiar cualquier elemento a uno de varios elementos de interfaz de usuario estándar. En este artículo discutiremos la siguiente propiedad de la interfaz de usuario:

cambiar el tamaño
contorno-desplazamiento

propiedad de cambio de tamaño: la propiedad de cambio de tamaño se utiliza para cambiar el tamaño de un cuadro por usuario. Esta propiedad no se aplica a elementos en línea o elementos de bloque donde el desbordamiento es visible. En esta propiedad, el desbordamiento debe establecerse en «desplazamiento», «automático» u «oculto».

Sintaxis:

resize: horizontal|vertical|both;

horizontal: esta propiedad se utiliza para cambiar el tamaño del ancho del elemento.

Sintaxis:

resize: horizontal;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>user interface Property</title>
        <style> 
            div {
              border: 2px solid;
              padding: 20px; 
              width: 300px;
              resize: horizontal;
              overflow: auto;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <div style = "background: green;">
            <h1 style = "color: white;">GeeksforGeeks</h1>
            <p style = "color: white;">  resize: horizontal;</p>
        </div>
    </body>
</html>

Salida:
horizontal
para cambiar el tamaño: haga clic y arrastre la esquina inferior derecha de este elemento div.

vertical: Esta propiedad se utiliza para cambiar el tamaño de la altura del elemento.

Sintaxis:

resize: vertical;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>user interface Property</title>
        <style> 
            div {
              border: 2px solid;
              padding: 20px; 
              width: 300px;
              resize: vertical;
              overflow: auto;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <div style = "background: green;">
            <h1 style = "color: white;">GeeksforGeeks</h1>
            <p style = "color: white;">  resize: vertical;</p>
        </div>
    </body>
</html>

Salida:
vertical
para cambiar el tamaño: haga clic y arrastre la esquina inferior derecha de este elemento div.

ambos: esta propiedad se utiliza para cambiar el tamaño tanto de la altura como del ancho del elemento.

Sintaxis:

resize: both;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>user interface Property</title>
        <style> 
            div {
              border: 2px solid;
              padding: 20px; 
              width: 300px;
              resize: both;
              overflow: auto;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <div style = "background: green;">
            <h1 style = "color: white;">GeeksforGeeks</h1>
            <p style = "color: white;">  resize: both;</p>
        </div>
    </body>
</html>

Salida:
both
para cambiar el tamaño: haga clic y arrastre la esquina inferior derecha de este elemento div.

Navegadores compatibles: los navegadores compatibles con la propiedad de cambio de tamaño se enumeran a continuación:

Apple Safari 4.0
Google Chrome 4.0
Firefox 5.0 4.0 -moz-
Ópera 15.0
Internet Explorer no compatible

contorno-desplazamiento: la propiedad contorno-desplazamiento en CSS se utiliza para establecer la cantidad de espacio entre un contorno y el borde o borde de un elemento. El espacio entre el elemento y su contorno es transparente.

Sintaxis:

outline-offset: length;

Nota: La longitud es el ancho del espacio entre el elemento y su contorno.
Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>user interface property</title>
        <style> 
            div.ex1 {
                margin: auto;
                padding: 8px;
                color: white;
                width: 600px;
                border: 1px solid black;
                background-color: green;
                outline: 4px solid red;
                outline-offset: 15px;
            }
        </style>
    </head>
    <body style = "text-align: center;">
        <h1 style = "color: green;">GeeksforGeeks</h1>
        <br>
        <div class="ex1">A computer science portal for geeks.</div>
    </body>
</html>

Salida:
outlineoffset
navegadores compatibles: los navegadores compatibles con la propiedad de desplazamiento de contorno se enumeran a continuación:

Apple Safari 3.1
Google Chrome 4.0
Firefox 3.5
Ópera 10.5
Internet Explorer 15.0

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta