Optimiza tus imágenes gratis sin perder calidad y mejora la velocidad de tu página web: Compresor de Imágenes JPG/PNG/GIF

Como aplicar Blur a imágenes con CSS

Una rápida para los diseñadores web, es un ejemplo de código CSS para aplicar efecto blur a imágenes con CSS que ha compartido Rian Ariona de Indonesia, es un código muy simple hecho en base a SASS (SCSS) que fácilmente podrás interpretar en CSS, en realidad el truco esta en un imagen semi-transparente con un efecto de blur aplicado el cual bien nos puede servir para simular el efecto de Blur sobre cualquier otra imagen a la que le sobre pongamos esta imagen con efecto blur.

Muy sencillo, un par de imágenes y dos capas CSS, una con posición absoluta que podamos ubicar encima de la imagen a la que deseemos aplicar el efecto blur. Después de la imagen de ejemplo les dejo la liga hacia el ejemplo donde pueden ver también el código SCSS utilizado.

¿Que es SCSS?

Para quienes no sepan SCSS es la extensión que utiliza SASS, este no es un nuevo lenguaje de programación, podríamos decir que es una forma diferente de escribir código CSS y que muchos diseñadores web desearíamos que se convirtiera en un estándar ya que después de escribir código SASS este se tiene que compilar para crear archivos CSS que los navegadores puedan leer sin problemas, SASS nos permite utilizar variables y funciones en nuestro código CSS, algo muy útil al momento de definir colores globales por ejemplo.

css blur

Enlace hacia el ejemplo y código CSS en CodePen

comment ¿Que opinas?

Artículos recientes

close

Guía para aprender a utilizar Adobe Illustrator

El pasado viernes compartimos con ustedes 33 vídeos que serían útiles como guía para principiantes sobre como aprender a usar photoshop; los cuales, en verdad son útiles si pretendes utilizarlos para incursionar en el mundo…

close

Satíricas ilustraciones sobre la realidad social por Sébastien Thibault

Hay muchos problemas en el mundo; muchos de ellos son ocasionados por personajes específicos o acciones que marcan el rumbo del planeta; las cuales, a pesar de su relevancia pueden ser plasmadas satíricamente por los…

close

Como hacer un logo en photoshop de manera fácil y rápida

Hacer un logotipo es una de las cosas más importantes para crear una identidad visual y de marca; no obstante, la manera de realizarlos puede causarnos dolor de cabeza, especialmente si no conocemos como funcionan…

close

Hiperrealista escultura de una ballena crea conciencia en las calles de París

El grupo artístico y creativo Captain Boomer ha realizado una fantástica obra para crear concia sobre el cambio climático; la cual, consta de la creación y colocación de una hiperrealista escultura de una ballena al costado del…

close

play_circle_outline Netflix presenta el primer trailer de Stranger Things 2

Strange Things es una de series aclamadas de Netflix; y la cual, tuvo su presencia en el Comic-Con de San Diego mediante la presentación de su primer tráiler. El cual, muestra el regreso de los…

close

Linkin Park presenta propuesta de logo para inmortalizar a Chester Bennington

El pasado jueves fue un día muy oscuro para los fans de Linking Park y para el mundo de la música; esto debido, a que se encontró al vocalista Chester Bennington muerto en su casa; noticia…

notifications Recién publicamos
close