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

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
    • Você pode adicionar texto colocando a cadeia de caracteres diretamente entre aspas duplas ("").
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}
  • Imagem
    • Você pode inserir uma imagem usando a função 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
    • Use a função counter() para exibir um 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
    • A função attr() pode ser usada para exibir o valor do atributo de um elemento HTML. Por exemplo, você pode exibir o atributo title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • nenhum
    • Especifica que nenhum conteúdo deve ser exibido. Este é o estado padrão.

Notas de Uso

Ao usar a propriedade content, tenha em mente os seguintes pontos:.

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

Propriedade cursor

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

 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 é 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: Um cursor de redimensionamento apontando para cima.

  • s-resize: Um cursor de redimensionamento apontando para baixo.

  • e-resize: Um cursor de redimensionamento apontando para a direita.

  • w-resize: Um cursor de redimensionamento apontando para a esquerda.

  • ne-resize: Um cursor de redimensionamento apontando para o canto superior direito.

  • nw-resize: Um cursor de redimensionamento apontando para o canto superior esquerdo.

  • se-resize: Um cursor de redimensionamento apontando para o canto inferior direito.

  • sw-resize: Um cursor de redimensionamento apontando 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.

Tipos de valores

  • A propriedade resize especifica as direções nas quais um elemento pode ser redimensionado. Você pode especificar os seguintes valores.
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).
none
  • Especificar none desativa o redimensionamento do elemento. Este é o valor padrão.
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 3DPropriedades de CSS relacionadas ao Float