Consejos de CSS

Una recopilación de consejos que no se ven mucho en otros tutoriales

• Efecto de escritura (cursor parpadeante)

• Filtro Drop-Shadow();

• scroll-behavior: smooth; desplazamiento suave

• Cómo centrar elementos

• Cursor con imagen/emoji

• Truncate Text

• -webkit-line-clamp: recortar texto a un número específico de líneas

• ::selection

• resize:both;: hacer que todo se pueda redimensionar

• Crear un modal con :target

• calc()

• Selector :empty

• Barra de desplazamiento personalizada

• position: sticky;

• CSS Scroll Snap

• Tooltip dinámico usando attr()

• Cambiar el color del cursor con caret-color

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

• Crear texto de encabezado con un fondo llamativo usando background-clip

[alstjr7375]

No conocía el efecto de escritura, pero es útil.

[xguru]

Últimamente, el centrado se veía en 3 líneas en los artículos... pero resulta que también se puede hacer así, en 2 líneas.

.center {

display: grid;

place-items: center;

}