Articles
Introdução ao CSS
Propriedades de CSS Relacionadas à Interface do Usuário

Propriedades de CSS Relacionadas à Interface do Usuário

Este artigo explica as propriedades de CSS relacionadas à interface do usuário.

Você pode aprender sobre as propriedades content, cursor, pointer-events e resize, incluindo seus casos de uso e como escrevê-las.

YouTube Video

HTML para Visualização

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 à Interface do Usuário

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

A propriedade content é usada para adicionar conteúdo a pseudo-elementos, principalmente ::before ou ::after. Essa propriedade é usada para definir texto, imagens, contadores, etc., que não são exibidos diretamente dentro do elemento. Seu principal objetivo é permitir o controle de conteúdo decorativo ou informações complementares que não estão escritas diretamente no HTML por meio de folhas de estilo.

Neste exemplo, "Nota: " é adicionado antes do elemento e "(Fim)" é adicionado depois. Estes usam os pseudo-elementos ::before e ::after, respectivamente.

Valores da propriedade 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;

A propriedade content pode assumir os seguintes valores:.

  • Texto: Especificar diretamente, envolvendo a string em "". Adiciona texto.
  • Imagem: Use a função url() para inserir imagens.
  • Contador: Use a função counter() para exibir contadores.
  • Atributo: Use a função attr() para exibir valores de atributos de elementos HTML. Por exemplo, você pode exibir o atributo title.
  • none: Especifica que nenhum conteúdo será exibido. Este é o estado padrão.

Notas de Uso

  • A propriedade content se aplica apenas a pseudo-elementos, não a elementos regulares.
  • Como não é adicionada ao DOM, ela não pode ser manipulada diretamente com JavaScript.
  • Pode afetar o layout, portanto, é comumente usada para exibir informações decorativas ou complementares.

Exemplo 

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

Este é um exemplo de adição de um ícone antes de uma tag <p>. Dessa forma, você pode complementar visualmente o conteúdo por meio de folhas de estilo.

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

A propriedade cursor é usada para especificar o tipo de cursor a ser exibido quando o ponteiro do mouse é colocado sobre um elemento. Você pode especificar vários estilos de cursor, e frequentemente é aplicado a elementos interativos para melhorar a experiência do usuário.

Principais Tipos de Cursor

Os seguintes valores podem ser especificados como tipos de cursor:.

default 
- `default` é o cursor de seta normal (o cursor padrão do navegador).
pointer 
- `pointer` é um cursor em forma de mão exibido quando colocado sobre um link.
text 
- `text` é um cursor em forma de I exibido em áreas onde o texto pode ser selecionado.
move 
- `move` é um cursor em forma de cruz usado quando um elemento pode ser arrastado.
crosshair 
- `crosshair` é um cursor em forma de mira para seleção precisa.
not-allowed 
- `not-allowed` é um cursor para regiões ou ações que não são permitidas.
help 
- `help` é um cursor com um ponto de interrogação exibido quando colocado sobre elementos que podem fornecer informações de ajuda.
wait 
- `wait` é um cursor em forma de ampulheta ou circular que representa um estado de processamento.
progress 
- `progress` é um cursor que representa uma operação em andamento. No entanto, indica que o usuário pode realizar outras operações.
grab 
- `grab` é um cursor para agarrar elementos que podem ser arrastados.
grabbing 
- `grabbing` é um cursor que indica que um elemento está sendo arrastado.
resize 
- `resize` é um cursor usado quando uma janela ou elemento pode ser redimensionado. Existem diferentes tipos dependendo da direção.
    - **`n-resize`**: redimensionar para cima.
    - **`s-resize`**: Redimensionar para baixo.
    - **`e-resize`**: Redimensionar para a direita.
    - **`w-resize`**: Redimensionar para a esquerda.
    - **`ne-resize`**: Redimensionar para o canto superior direito.
    - **`nw-resize`**: Redimensionar para o canto superior esquerdo.
    - **`se-resize`**: Redimensionar para o canto inferior direito.
    - **`sw-resize`**: Redimensionar para o canto inferior esquerdo.

Cursor personalizado 

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

Também é possível especificar um cursor personalizado usando url().

  • Neste exemplo, custom-cursor.png é o arquivo de imagem para o cursor. Se essa imagem não estiver disponível, o navegador exibirá o cursor padrão com auto.

Resumo

  • A propriedade cursor especifica qual cursor deve ser exibido quando o usuário está sobre um elemento.
  • Existem vários estilos de cursor disponíveis dependendo do uso, e também é possível definir cursores personalizados.
  • Ao selecionar estilos de cursor apropriados de acordo com elementos interativos e operações restritas, é possível oferecer uma interface mais amigável ao usuário.

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

A propriedade pointer-events é usada para controlar como um elemento lida com eventos de dispositivos de ponteiro, como mouse, toque e caneta. Normalmente, quando um elemento é clicado ou sobrevoado por um usuário, ele recebe eventos de ponteiro, mas esse comportamento pode ser alterado usando esta propriedade.

  • Na classe pointer-events-auto, a propriedade pointer-events é configurada como auto, permitindo processar eventos normais de clique e sobrevoo. O elemento é clicável, então uma mensagem é exibida quando ele é clicado.
  • Na classe pointer-events-auto, a propriedade pointer-events é configurada como none, então o elemento não recebe eventos de ponteiro. Mesmo que a propriedade cursor seja configurada como pointer, o cursor do mouse não muda, e outros elementos abaixo se tornam clicáveis.

Tipos de valores

  • A propriedade pointer-events especifica se e como um elemento recebe eventos de ponteiro. Você pode especificar os seguintes valores.
auto
  • auto é o valor padrão, onde o elemento recebe eventos de ponteiro normalmente.
none
  • Quando none é especificado, o elemento não recebe eventos de ponteiro. O elemento desabilita interações como cliques e passagens do cursor, mas outros elementos abaixo podem receber eventos de ponteiro.
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;
  • Esses valores são usados principalmente para elementos SVG. Cada valor controla se partes específicas de um elemento (como preenchimento, traçado, etc.) respondem a eventos de ponteiro. Não é comumente usado com elementos HTML regulares.

Pontos-chave para Uso

Aqui estão alguns exemplos de como usar a propriedade pointer-events.

  1. Selecionando os elementos que você deseja desativar.

    • O valor none é útil para desativar temporariamente elementos como botões ou links.

  2. Uso com elementos sobrepostos.

    • Quando a propriedade position é definida como absolute ou os elementos são empilhados usando a propriedade z-index, definir pointer-events como none no elemento superior permite que eventos de ponteiro sejam enviados para o elemento abaixo.

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

A propriedade resize é uma propriedade CSS que especifica em que direção um elemento pode ser redimensionado pelo usuário. Usando essa propriedade, você pode permitir que os elementos sejam redimensionados vertical ou horizontalmente arrastando, ou desativar completamente o redimensionamento.

Neste exemplo, a direção em que uma área de texto pode ser redimensionada é especificada usando a propriedade resize.

  • Com resize: both;, um elemento pode ser redimensionado tanto horizontal quanto verticalmente.
  • Com resize: horizontal;, um elemento pode ser redimensionado apenas horizontalmente.
  • Com resize: vertical;, um elemento pode ser redimensionado apenas verticalmente.
  • Com resize: none;, um elemento não pode ser redimensionado.

Tipos de valores

  • A propriedade resize recebe um valor que especifica a direção em que um elemento pode ser redimensionado. Você pode especificar os seguintes valores.
none
  • Especificar none desativa o redimensionamento do elemento. Este é o valor padrão.
both
  • Especificar both permite que o elemento seja redimensionado em ambas as direções vertical e horizontal.
horizontal
  • Especificar horizontal permite que o elemento seja redimensionado apenas na direção horizontal (largura).
vertical
  • Especificar vertical permite que o elemento seja redimensionado apenas na direção vertical (altura).
inherit
  • Especificar inherit faz com que o elemento herde o valor da propriedade resize de seu elemento pai.

Notas

  • Para tornar um elemento redimensionável, é necessário definir a propriedade overflow juntamente com a propriedade resize. Elementos redimensionáveis podem exigir barras de rolagem, e normalmente é definido overflow: auto.
  • O redimensionamento é geralmente usado com elementos de bloco, como div e textarea.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS Relacionadas à Animação 3D