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

Esculturas de luz para la nueva campaña de McDonald’s

McDonald’s en francia está inaugurando su sucursal de 24 horas; y para lo cual, ha contratado al escultor Olivier Favart, el cual ha creado unas espectaculares esculturas de luz para promocionar a la cadena de comida rápida….

close

Princesas Millenials por Fernanda Suarez

Fernanda Suárez es una artista e ilustradora que siente afición por las princesas de Disney; esto refleja con su más reciente trabajo denominado “Modern Princess”, en el cual nos muestra a las princesas de Disney…

close

Etapas para el diseño de un cartel por Alicia Úbeda

La creativa Alicia Úbeda ha desarrollado un pequeño tutorial grafico para mostrarnos lo que ella considera son las 5 etapas para el desarrollo de un cartel. Estas son relativamente sencillas, y se encuentran abocadas al…

close

Como la fotografía ayudó a una ONG con la adopción animal

El poder de una buena fotografía puede derivar en resultados sin importar el giro de tu empresa; sea ésta lucrativa o no. Esto lo demuestra el fotógrafo Albert Harris; el cual ha acudido en ayuda…

close

Tazas personalizables, lo nuevo de Starbucks para el otoño

Llega el otoño y con ello la caída de las hojas de los árboles; lo cual no debe ser motivo de depresión pues nos encontramos ante una de las transiciones más hermosas entre temporadas. Starbucks…

close

Animales de fieltro por Zenia Kli Zafska

El arte sólo tiene un límite; la imaginación, la cual siempre está en creciente aumento en el ámbito creativo y por ello todos los días hay nuevos proyectos, piezas de arte que vale la pena…

notifications Recién publicamos
close