4 Propiedades CSS que no conocías

En este artículo te vamos a mostrar 4 propiedades CSS que probablemente no conocías y como implementarlas en tus proyectos

Diseño web
Lectura de 8 minutos
13 feb. 2020
4 Propiedades CSS que no conocías

¡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

/* Por defecto como siempre escribimos */
writing-mode: horizontal-tb;
/* Vertical de derecha a izquierda */
writing-mode: vertical-rl;
/* Vertical de izquierda a derecha */
writing-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

Mira el ejemplo en codepen 👉 https://codepen.io/Jeanda/pen/mdJejyG

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.

caret colol

Para cambiar el valor únicamente colocamos el valor hexadecimal, hsl, rgb, etc y la linea del cursor cambiara

caret-color: steelblue;
caret-color: #1292EE;
caret-color: rgba(18, 146, 238, 1);
caret-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 🙌

Mira el ejemplo en codepen 👉 https://codepen.io/Jeanda/pen/abOvjxK

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:

line clamp propiedades css

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

display: -webkit-box;
/*Le indicamos a nuestro texto la oritentación que tendra */
-webkit-box-orient:vertical;
/* Aqui le estamos diciendo cuantas lineas de texto queremos que aparezcan */
-webkit-line-clamp: 2;
/* Y por ultimo ocultar las lineas que se salgan del texto */
overflow-y: hidden;

Y listo, tendríamos nuestros cards con los párrafos delimitados sin Javascript, Wuu 🥳.

propiedades css máximo de caracteres

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:

backdrop filter

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.

/* Colocamos cuanto blur queremos que le aplique a nuestro fondo */
backdrop-filter: blur(15px);
/* Y a nuestro background le añadimos una pequeña opacidad */
background: 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.

Mira el ejemplo en codepen 👉 https://codepen.io/Jeanda/pen/LYVGGyv

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

Avatar

Jeanda Herrera

@jeandaVer perfil

Fundador de Jeanda 🐦. Emprendedor. Diseñador UX/UI en EDteam.

Comentarios de los usuarios

Avatar
Eduardo Tobacia

@eduardotp77

Genial. de verdad no las conocía. si había visto algunos uso.

JS
Jsalas902 -

@jsalas902-2965

Hola chicos les agradesco si me hechan una mano con esto que propiedad se puede usar en CSS para colocar curvo tanto un elemento como el texto que contiene algo asi

Avatar
Richard Ramírez

@richardramirez4633

Genial! Había visto usar Writing Mode pero creo que no se llamaba así 🤔 Investigaré más sobre las otras porque se ven interesantes 👀

Avatar
Yoni Calsin

@yonicalsin

Esto es genial ! Solía utilizar backdrop-filter, los demás no las conocía ! Suena interesante, los utilizare cuando los necesite !

Avatar
Sergio

@sergio

genial, la propiedad line-clamp la usare en algo q ya tengo hecho con javacript, bueno hay q revisar can i use tambien

Ver más comentarios

Recuerda iniciar sesión para comentar este articulo

Cursos recomendados

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

Flexbox y Grid

Flexbox y Grid

Avatar

Alvaro Felipe

5

4.8

EDy flotante