Propiedades de CSS relacionadas con la interfaz de usuario

Articles

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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

Texto
- Puede agregar texto encerrando una cadena directamente entre comillas dobles ("").

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

Imagen
- Puedes insertar una imagen usando la función url().

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

Contador
- Usa la función counter() para mostrar un contador.

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

Atributo
- La función attr() puede usarse para mostrar el valor de un atributo de un elemento HTML. Por ejemplo, puede mostrar el atributo title.

1/* None */
2.content-none::before {
3    content: none;
4}

ninguno
- Especifica que no se debe mostrar ningún contenido. Este es el estado predeterminado.

Notas de uso

Al usar la propiedad content, ten en cuenta los siguientes puntos:.

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.

Propiedad `cursor`

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

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`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: Un cursor de cambio de tamaño que apunta hacia arriba.
s-resize: Un cursor de cambio de tamaño que apunta hacia abajo.
e-resize: Un cursor de cambio de tamaño que apunta hacia la derecha.
w-resize: Un cursor de cambio de tamaño que apunta hacia la izquierda.
ne-resize: Un cursor de cambio de tamaño que apunta hacia la parte superior derecha.
nw-resize: Un cursor de cambio de tamaño que apunta hacia la parte superior izquierda.
se-resize: Un cursor de cambio de tamaño que apunta hacia la parte inferior derecha.
sw-resize: Un cursor de cambio de tamaño que apunta hacia la parte 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.

Seleccionando elementos que deseas deshabilitar
- El valor none es útil para deshabilitar temporalmente elementos como botones o enlaces.
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.

Tipos de valor

La propiedad resize especifica las direcciones en las que un elemento se puede redimensionar. Puedes especificar los siguientes valores.

`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).

`none`

Especificar none deshabilita el redimensionamiento del elemento. Este es el valor predeterminado.

`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 Propiedades de CSS relacionadas con float

Propiedades de CSS relacionadas con la interfaz de usuario

YouTube Video

HTML para vista previa

Relacionado con la Interfaz de Usuario

Propiedad content

Valores de la propiedad content

Notas de uso

Propiedad cursor

Principales Tipos de Cursor

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Cursor personalizado

Resumen

Propiedad pointer-events

Tipos de valor

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

Puntos clave para el uso

Propiedad resize

Tipos de valor

both

horizontal

vertical

none

inherit

Notas

YouTube Video

Propiedad `content`

Valores de la propiedad `content`

Propiedad `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

Propiedad `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

Propiedad `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`