Dicas de CSS

Uma coletânea de dicas que você não vê com frequência em outros tutoriais

• efeito de digitação (cursor piscando)

• filtro Drop-Shadow()

• scroll-behavior: smooth; rolagem suave

• centralizar elementos

• cursor com imagem/emoji

• truncar texto

• -webkit-line-clamp: cortar texto em um número específico de linhas

• ::selection

• resize: both; tornar tudo redimensionável

• criar Modal com :target

• calc()

• seletor :empty

• barra de rolagem personalizada

• position: sticky;

• CSS Scroll Snap

• tooltip dinâmico usando attr()

• mudar a cor do cursor com caret-color

• ::in-range, ::out-of-range

• criar texto de título com fundo estiloso usando background-clip

[alstjr7375]

Eu não conhecia o efeito de digitação, mas ele é útil.

[xguru]

Hoje em dia, centralizar é mostrado em 3 linhas nos textos... mas parece que também dá para fazer assim em 2 linhas.

.center {

display: grid;

place-items: center;

}