¡Sabias que actualmente CSS tiene ya más de 500 propiedades? por lo cual es probable no conozcas algunas de ellas, es por eso que a continuación te mostraré 4 qué te van a encantar:
¿Quieres hacer cosas creativas con CSS? Mira nuestro curso de animaciones 👉https://ed.team/cursos/css-animaciones
CSS también tiene variables ¿No lo sabías? 😱 pues con EDteam las puedes dominar 👉https://ed.team/cursos/variables-css
1.- Writing mode
Por su traducción en ingles (Modo de escritura) lo que hace esta propiedad es cambiar la orientación en la cual se muestra nuestros textos en la web.
Writing mode cuenta con 3 valores
1/* Por defecto como siempre escribimos */ 2writing-mode: horizontal-tb; 3 4/* Vertical de derecha a izquierda */ 5writing-mode: vertical-rl; 6 7/* Vertical de izquierda a derecha */ 8writing-mode: vertical-lr;
¿Pero de que me sirve tener mi texto volteado? Pues es más que claro que no lo usaremos para voltear nuestros párrafos o nuestros títulos, más bien usaremos esta propiedad para usos más creativos!
Por ejemplo en el siguiente banner tenemos el titulo y su descripción, pero en la parte inferior del banner tenemos ese efecto chistoso que encontramos en un montón de paginas web el cual es tener la palabra "Scroll", "Iniciar", "Comencemos" etc. Pero volteado verticalmente y que al momento de darle click nos mande al contenido de la pagina
Pues este efecto del texto volteado lo conseguimos fácilmente con Writing Mode
2.- Caret color
Esta propiedad lo que nos permite es cambiar el color de la linea final de nuestro cursor al momento de que estemos escribiendo dentro de alguna caja de texto, ya sea un input, textarea, etc.
Para cambiar el valor únicamente colocamos el valor hexadecimal, hsl, rgb, etc y la linea del cursor cambiara
1caret-color: steelblue; 2caret-color: #1292EE; 3caret-color: rgba(18, 146, 238, 1); 4caret-color: hsl(205, 87%, 50%);
Pero eso es muy aburrido, así que vamos a darle un efecto más creativo 👌
Y es crear una pequeña animación donde pasemos por todos los colores y que al momento que tengamos seleccionado nuestro input la linea del cursor vaya cambiando de color 🙌
3.- Line clamp
A mi parecer esta es la propiedad que te salvara más de una ocasión, hay veces que nosotros tenemos algunos elementos los cuales no queremos que su altura tenga variaciones, como es el caso de una fila de cards y comúnmente esta altura de los cards suele cambiar por la cantidad de lineas de texto que tenemos dentro, como en este ejemplo:
Como le hacemos para indicarle a nuestros cards cuantas lineas de texto queremos que se muestren, con Javascript?, manualmente?. Esto lo hacemos con la propiedad line-clamp en la cual en este caso en especifico si tendremos que pesarle algunas otras propiedades para que funcione, pero en si la magia es line-clamp.
Así que le pasaremos las siguientes propiedades al texto que queramos delimitar, que en nuestro caso es la descripción de los cursos
1display: -webkit-box; 2 3/*Le indicamos a nuestro texto la oritentación que tendra */ 4-webkit-box-orient:vertical; 5 6/* Aqui le estamos diciendo cuantas lineas de texto queremos que aparezcan */ 7-webkit-line-clamp: 2; 8 9/* Y por ultimo ocultar las lineas que se salgan del texto */ 10overflow-y: hidden;
Y listo, tendríamos nuestros cards con los párrafos delimitados sin Javascript, Wuu 🥳.
4.- Backdrop filter
Y por supuesto dejamos lo mejor para el final, estoy seguro que alguno de nosotros ha interactuado con algun dispositivo de Apple, ya sea un iPhone, una iPad, un Mac, etc. Y nos hemos podido percatar que tienen un efecto curioso dentro de su interfaz de usuario, el cual es este:
Si podemos observar lo que hacen es difuminar el fondo y dejar visible el contenido de arriba. ¿Como logramos llevar esto a nuestras web?
Pues de una manera muy sencilla, al elemento que le tengamos definido algún fondo de color ya definido, sea un header, menu, banner, card, etc. Le aplicaremos las siguientes propiedades.
1/* Colocamos cuanto blur queremos que le aplique a nuestro fondo */ 2backdrop-filter: blur(15px); 3 4/* Y a nuestro background le añadimos una pequeña opacidad */ 5background: rgba(255, 255, 255, 0.75);
Y eso seria más que suficiente. Algo bien importante que tienen tener presente siempre, es que tiene que tener un background con algo de transparencia, ya sea 0% o 99% (lo que ustedes gusten) pero tiene que tener cierta transparencia para que se pueda aplicar el efecto.
Cabe aclarar que hay más valores que le podemos dar a la propiedad backdrop-filter como contrast, saturate, grayscale, etc. Pero eso sera tema para otro articulo 😉.
Conclusión
CSS al ser un lenguaje tan amplio es casi imposible percatarse y estar atento de las nuevas propiedades que van saliendo, así que espero que este articulo les haya podido servir para descubrir algunas propiedades CSS, y sobretodo que las puedan aplicar a sus proyectos.
Yo he sido jeanda y nos vemos hasta la próxima 🖖.