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

TGIF: Magikarp Jump, el nuevo y absurdo juego de Pokémon para móviles

Magikarp Jump es el nuevo juego para móviles Android y iPhone basado en el universo de Pokémon; esta “broma” de juego es genial en muchos aspectos, no obstante, también es ridiculo en otros. Magikarp Jump…

close

KFC transforma su clásica cubeta en una contador de cuentos

KFC Suppertime Stories es una apuesta de KFC en América del Sur; la cual, es encabezada por su nuevo diseño interactivo de Packaging, el cual,  transforma la clásica cubeta de KFC en una lampará cuenta…

close

Diseños de lámparas origami inspiradas en animales

OWL paperlamps es la empresa encargada del diseño y elaboración de estas geniales lámparas de origami inspiradas en diferentes animales. Cabe señalar, que estas pueden ser adquiridas la tienda de Etsy; esto claro mediante un módico…

close

Creativas campañas para crear conciencia sobre el calentamiento global

El calentamiento global es un hecho y cada vez es más evidente en todas las ciudades del mundo; inviernos más crudos y terribles sequías forman parte del día a día en las noticias a nivel…

close

Lista de estrenos en Netflix para Junio 2017

Llega el mes de Junio y diferentes series y películas llegan a la plataforma de vídeo mediante streaming por excelencia; es por eso, que el día de hoy te presentamos cuales son los estrenos que…

close

Living Lights of the Ocean, fotografías de un mundo subacuático surrealista

Living Lights of the Ocean es obra de fotografía y diseño digital que nos presenta un maravilloso paisaje neón de un mundo subacuático completemente surrealista. Un podría jurar que se trata de modelados digitales a simple…

notifications Recién publicamos
close