CSS puede hacer eso?
Una lista de cosas increíbles que CSS puede hacer!
EDITAR: algunas de estas propiedades no funcionarán en algunos navegadores debido a la compatibilidad. Podemos verificar el uso del navegador
@supportsy agregar estilos de respaldo según corresponda. Por favor use Chrome para ver los ejemplos 🙂
1. box-decoration-break
Esta propiedad CSS especifica cómo se deben representar los fragmentos de un elemento cuando se dividen en varias líneas, columnas o páginas.
2. attr()
Podemos recuperar los valores del elemento seleccionado en CSS utilizando
attr(). Este método podría ser realmente útil con fines de accesibilidad.
3. backface-visibility
Esta propiedad CSS establece si la cara posterior de un elemento es visible cuando se gira hacia el usuario. Pensando en una tarjeta de inversión de la interfaz de usuario?
4. conic-gradient
Los gradientes son una cosa maravillosa Es posible que haya usado estilos de fondo con degradados lineales, pero ¿sabe que podemos usar css puros para crear gráficos circulares con la ayuda de
conic-gradient!
5. filter
¿Quién necesita efectos de filtro de Photoshop cuando tienes filtros CSS. Functions Las
funciones de filtro aplican cambios gráficos a la apariencia de una imagen de entrada. Los efectos que podemos lograr son los siguientes -
funciones de filtro aplican cambios gráficos a la apariencia de una imagen de entrada. Los efectos que podemos lograr son los siguientes -
blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.drop-shadowEl filtro es bastante sorprendente. Te permite aplicar sombra a la imagen de entrada.
6. mix-blend-mode
Esta propiedad CSS establece cómo el contenido de un elemento debe mezclarse con el contenido del fondo del elemento o su elemento primario.
Se pueden lograr cosas asombrosas mezclando modos de mezcla y filtros con imágenes y texto. Obtenga más información en MDN Docs.
7. first-letter
Una de mis cosas favoritas en libros y revistas son las bonitas gorras. Podemos crear drop con
first-letterpseudo-elementos.
8. shape-outside
Esta propiedad CSS proporciona una forma de personalizar el contenido de líneas adyacentes en torno a objetos complejos en lugar de simples cajas rectangulares.
Abra el ejemplo en una pestaña diferente e intente cambiar el ancho de la ventana y observe cómo el texto se ajusta a la imagen.
9. writing-mode
Esta propiedad CSS establece si las líneas de texto están dispuestas horizontal o verticalmente. Podemos tener estos valores-
horizontal-tb- El contenido fluye horizontalmente de izquierda a derecha, verticalmente de arriba a abajo.vertical-lr- El contenido fluye horizontalmente de izquierda a derecha, verticalmente de arriba a abajo.vertical-rl- El contenido fluye horizontalmente de derecha a izquierda, verticalmente de arriba a abajo.
10. Agregar gradiente al texto
Esto se logra con la combinación de
-webkit-background-clip: texty -webkit-text-fill-color: transparentpropiedades CSS.11. Suave desplazamiento de desplazamiento
scroll-snap-type La propiedad CSS establece cómo se aplican los puntos de ajuste en el contenedor de desplazamiento.
Este ejemplo muestra
ydesplazamiento vertical ( ) con valor mandatory. MDN docs hace un gran trabajo explicando cómo usar otros valores como proximityy scroll horizontal ( x).
Estas son solo algunas de las grandes cosas que CSS puede hacer. Las posibilidades son infinitas! 🥳
Comentarios
Publicar un comentario