Articles
Introducción a CSS
Propiedades de CSS relacionadas con la interfaz de usuario

Propiedades de CSS relacionadas con la interfaz de usuario

Este artículo explica las propiedades de CSS relacionadas con la interfaz de usuario.

Puede aprender sobre las propiedades content, cursor, pointer-events y resize, incluyendo sus casos de uso y cómo escribirlas.

YouTube Video

HTML para vista previa

css-ui.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

Relacionado con la Interfaz de Usuario

Propiedad content 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

La propiedad content se utiliza para agregar contenido a los pseudo-elementos, principalmente ::before o ::after. Esta propiedad se utiliza para definir texto, imágenes, contadores, etc., que no se muestran directamente dentro del elemento. Su función principal es permitir el control de contenido decorativo o información complementaria que no está escrita directamente en HTML a través de hojas de estilo.

En este ejemplo, "Nota: " se agrega antes del elemento y "(Fin)" se agrega después. Estos utilizan los pseudo-elementos ::before y ::after respectivamente.

Valores de la propiedad content 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

La propiedad content puede tomar los siguientes valores:.

  • Texto: especificar directamente encerrando la cadena entre "". Agrega texto.
  • Imagen: use la función url() para insertar imágenes.
  • Contador: use la función counter() para mostrar contadores.
  • Atributo: use la función attr() para mostrar los valores de los atributos de los elementos HTML. Por ejemplo, puede mostrar el atributo title.
  • none: especifica que no se mostrará ningún contenido. Este es el estado predeterminado.

Notas de uso

  • La propiedad content se aplica solo a los pseudo-elementos, no a los elementos regulares.
  • Dado que no se agrega al DOM, no se puede manipular directamente con JavaScript.
  • Podría afectar el diseño, por lo que se utiliza comúnmente para mostrar información decorativa o complementaria.

Ejemplo 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Este es un ejemplo de agregar un ícono antes de una etiqueta <p>. De esta manera, puede complementar visualmente el contenido mediante hojas de estilo.

Propiedad cursor 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

La propiedad cursor se utiliza para especificar el tipo de cursor que se mostrará cuando el puntero del mouse se coloque sobre un elemento. Puedes especificar varios estilos de cursor, y a menudo se aplica a elementos interactivos para mejorar la experiencia del usuario.

Principales Tipos de Cursor

Se pueden especificar los siguientes valores como tipos de cursor:.

default 
- `default` es el cursor de flecha normal (el cursor predeterminado del navegador).
pointer 
- `pointer` es un cursor con forma de mano que se muestra cuando se coloca sobre un enlace.
text 
- `text` es un cursor en forma de barra (I-beam) que se muestra en áreas donde se puede seleccionar texto.
move 
- `move` es un cursor en forma de cruz que se utiliza cuando un elemento puede ser arrastrado.
crosshair 
- `crosshair` es un cursor en forma de retícula para una selección precisa.
not-allowed 
- `not-allowed` es un cursor para regiones o acciones que no están permitidas.
help 
- `help` es un cursor con un signo de interrogación que se muestra al colocarse sobre elementos que pueden proporcionar información de ayuda.
wait 
- `wait` es un cursor en forma de reloj de arena o círculo que representa un estado de procesamiento.
progress 
- `progress` es un cursor que representa una operación en curso. Sin embargo, indica que el usuario puede realizar otras operaciones.
grab 
- `grab` es un cursor para agarrar elementos arrastrables.
grabbing 
- `grabbing` es un cursor que indica que un elemento está siendo arrastrado.
resize 
- `resize` es un cursor que se utiliza cuando una ventana o elemento se puede redimensionar. Hay diferentes tipos dependiendo de la dirección.
    - **`n-resize`**: redimensionar hacia arriba.
    - **`s-resize`**: redimensionar hacia abajo.
    - **`e-resize`**: redimensionar hacia la derecha.
    - **`w-resize`**: Cambiar el tamaño hacia la izquierda.
    - **`ne-resize`**: Cambiar el tamaño hacia la esquina superior derecha.
    - **`nw-resize`**: Cambiar el tamaño hacia la esquina superior izquierda.
    - **`se-resize`**: Cambiar el tamaño hacia la esquina inferior derecha.
    - **`sw-resize`**: Cambiar el tamaño hacia la esquina inferior izquierda.

Cursor personalizado 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

También es posible especificar un cursor personalizado usando url().

  • En este ejemplo, custom-cursor.png es el archivo de imagen para el cursor. Si esa imagen no está disponible, se muestra el cursor predeterminado del navegador con auto.

Resumen

  • La propiedad cursor especifica qué cursor debe mostrarse cuando el usuario está sobre un elemento.
  • Hay varios estilos de cursores disponibles según el uso, y también se pueden establecer cursores personalizados.
  • Al seleccionar estilos de cursor apropiados según los elementos interactivos y las operaciones restringidas, se puede proporcionar una interfaz de usuario más amigable.

Propiedad pointer-events 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

La propiedad pointer-events se utiliza para controlar cómo un elemento maneja eventos de dispositivos apuntadores como el ratón, el tacto y el lápiz óptico. Normalmente, cuando un usuario hace clic o pasa el cursor sobre un elemento, este recibe eventos de puntero, pero este comportamiento puede cambiar con esta propiedad.

  • En la clase pointer-events-auto, la propiedad pointer-events está configurada en auto, permitiendo procesar normalmente los eventos de clic y hover. El elemento es clicable, por lo que se muestra un mensaje cuando se hace clic.
  • En la clase pointer-events-auto, la propiedad pointer-events está configurada en none, por lo que el elemento no recibe eventos de puntero. Incluso si la propiedad cursor está configurada en pointer, el cursor del ratón no cambia, y otros elementos debajo se vuelven clicables.

Tipos de valor

  • La propiedad pointer-events especifica si un elemento recibe eventos de puntero y cómo los recibe. Puedes especificar los siguientes valores.
auto
  • auto es el valor predeterminado, donde el elemento recibe eventos de puntero normalmente.
none
  • Cuando se especifica none, el elemento no recibe eventos de puntero. El elemento desactiva interacciones como clics y hover, pero otros elementos debajo pueden recibir eventos de puntero.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Estos valores se utilizan principalmente para elementos SVG. Cada valor controla si partes específicas de un elemento (como fill, stroke, etc.) responden a eventos de puntero. No se utiliza comúnmente con elementos HTML regulares.

Puntos clave para el uso

Aquí hay algunos ejemplos de cómo usar la propiedad pointer-events.

  1. Seleccionando elementos que deseas deshabilitar

    • El valor none es útil para deshabilitar temporalmente elementos como botones o enlaces.

  2. Uso con elementos superpuestos

    • Cuando la propiedad position se establece en absolute o los elementos están en capas usando la propiedad z-index, configurar pointer-events en none en el elemento superior permite que los eventos de puntero se envíen al elemento inferior.

Propiedad resize 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

La propiedad resize es una propiedad de CSS que especifica en qué dirección un usuario puede redimensionar un elemento. Usando esta propiedad, puedes permitir que los elementos se redimensionen vertical u horizontalmente al arrastrar, o deshabilitar el redimensionamiento por completo.

En este ejemplo, la dirección en la que se puede redimensionar un área de texto se especifica utilizando la propiedad resize.

  • Con resize: both;, un elemento puede redimensionarse tanto horizontal como verticalmente.
  • Con resize: horizontal;, un elemento solo puede redimensionarse horizontalmente.
  • Con resize: vertical;, un elemento solo puede redimensionarse verticalmente.
  • Con resize: none;, un elemento no puede redimensionarse.

Tipos de valor

  • A la propiedad resize se le asigna un valor que especifica la dirección en la que un elemento puede redimensionarse. Puedes especificar los siguientes valores.
none
  • Especificar none deshabilita el redimensionamiento del elemento. Este es el valor predeterminado.
both
  • Especificar both permite que el elemento se redimensione en ambas direcciones, vertical y horizontal.
horizontal
  • Especificar horizontal permite que el elemento se redimensione solo en la dirección horizontal (ancho).
vertical
  • Especificar vertical permite que el elemento se redimensione solo en la dirección vertical (alto).
inherit
  • Especificar inherit hace que el elemento herede el valor de la propiedad resize de su elemento padre.

Notas

  • Para hacer que un elemento sea redimensionable, necesitas configurar la propiedad overflow junto con la propiedad resize. Los elementos redimensionables pueden requerir barras de desplazamiento, y comúnmente se usa overflow: auto.
  • El redimensionamiento generalmente se utiliza con elementos de bloque como div y textarea.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades CSS relacionadas con la animación 3D