Trucos simples para hacer con CSS

Acá te voy a compartir y explicar tres trucos simples para hacer con CSS y mejorar cualquier proyecto en el que estés trabajando.

Mas abajo te explico cada uno de los efectos y te dejo los ejemplos funcionales, directamente desde mi CodePen, para que los puedas probar y modificar a tu gusto.

Barra de menú fija con transparencia

Un clásico, es la barra de menú que queda fija en la parte superior de la pagina mientras te desplazas hacia arriba o hacia abajo..

Pero en este caso, le agregamos un poco de transparencia, para dar un lindo efecto cuando el texto en movimiento pasa por detrás de la misma.

En este caso, para que la barra de menú quede fija mientras desplazamos el texto, se usa la propiedad position de CSS. Al asignarle el valor sticky estamos indicando que ese elemento, en este caso la barra de navegación, quedara «pegada» en la posición que indiquemos.

position: sticky;
top:0;

background: transparent;
backdrop-filter: blur(10px);

Una vez que la barra queda fija en la parte superior de la pagina, usaremos la propiedad backdrop-filter: blur(10px);

La propiedad CSS backdrop-filter permite aplicar efectos gráficos como desenfoque o cambio de color al área situada detrás de un elemento. Como se aplica a todo lo que hay detrás del elemento, para ver el efecto es necesario que el elemento o su fondo sean transparentes o parcialmente transparentes.

Efecto Neón al pasar sobre un texto

En este caso, usamos un texto oculto en color brillante, que se hace visible al pasar el cursor por encima.Para que todo esto funcione, se superponen dos textos, el oscuro queda visible y el color brillante se oculta.

Luego se utiliza la propiedad transition; de CSS que permite modificar los valores de un elemento. durante un tiempo definido en segundos. En este caso, al pasar el puntero, se muestra el texto brillante usando una transición de 0.5 segundos para llevar el ancho del segundo elemento de 0 a 100%.

Además, para completar el efecto neón, se aplica una sombra difuminada usando la propiedad filter

filter: drop-shadow(0 0 25px #37ff77);

Recortar fotos con formas usando mascaras

La propiedad CSS clip-path crea una región de recorte que establece qué parte de un elemento debe mostrarse. Las partes que están dentro de la región son visibles, mientras que las que están fuera se ocultan.

El efecto final, es una foto recortada con formas geométricas utilizando las coordenadas.

Algunas de las formas básicas pueden definirse de la siguiente manera:

clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Luego, se pueden combinar varias de ellas, o directamente comenzar a formar polígonos mas complejos, utilizando las coordenadas X e Y.

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en Honeygain desde este banner y recibí 5 dolares de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona HoneyGain.