soy Kseso y esto EsCSS

CSS filters ¡Hasta el borde y más allá! 🚀 18.8.17

Cómo extender el efecto del filtro CSS blur más allá del borde del elemento al que se declara y hasta la distancia deseada.

CSS filters ¡Hasta el borde y más allá! 🚀

Un artículo breve sobre dos efectos relacionados con el uso conjunto de propiedades dispares como son outline-offset junto a backdrop-filter y clip-path con box-shadow.

Antes de ir a ello y por si acaso no conoces alguna de ellas, aquí algún post que otro que le he dedicado en el blog:

Modos de fusión, filtros y outline

Nota Previa: en esta ocasión no entraré en el aspecto de la accesibilidad inherente a la propiedad outline. Sólo me ceñiré a los efectos decorativos que se pueden lograr con su uso.
Tampoco en temas del trabajo extra para el navegador y el hardware que pueden representar el uso de filtros o modos de fusión CSS.

Nota Previa 2: puedes ahorrarte todo el rollo previo e ir a a la demo directamente.

Outline

La propiedad CSS outline tiene la particularidad de no afectar a la composición de la caja del elemento. Esto es, su tamaño no computa en el modelo de caja. Su aparición no tiene incidencia ni en el width / height del propio elemento ni tampoco causa repaints ni reflows. Con independencia de su anchura outline-width y de donde se dibuje outline-offset no modifica ni al propio elemento ni a sus hermanos adyacentes.

Todo lo anterior significa que el tamaño del elemento será el mismo con o sin outline, por lo que el fondo, así como los bordes, márgenes... étc. del elemento estarán siempre en el mismo sitio tenga o no tenga declarada la propiedad outline y de cuál sea su anchura.

La propiedad CSS outline también es ajena a la variante de box-sizing utilizada.

Modos de fusión CSS

Los modos de fusión CSS (blend modes), sea cual sea la forma mediante la que se aplican, quedan contenidos no por los límites de la caja del elemento al que se aplican si no por su capa de composición o composition layer. Esto es, por el rectángulo que delimita a todo el contenido al que se aplica el filtro.

Así, si tenemos una caja padre y dentro un hijo al que desplazamos (mediante las propiedades de ubicación (top, right...) fuera de la caja del padre la capa de composición será el rectángulo que contiene a ambos elementos.

Puedes ver cómo cambia la capa de composición en este pen.

Todo lo anterior, relativo a los modos de fusión y su capa de composición, obviando las particularidades de cada uno de ellos y los distintos escenarios en los que se podrían encontrar.

La propiedad CSS backdrop-filter

Para andar por casa podríamos decir que el efecto de la propiedad CSS backdrop-filter no deja de ser un modo de fusión CSS particular: afecta a lo que hay tras (debajo o "tapado") del elemento al que se declara y en vez de aplicar los efectos propios de los modos de fusión son filtros CSS.

Todo junto: filters y outline

Vuelvo a la propiedad CSS outline y ahora es para añadir que aunque no cuenta en la composición de la caja del elemento sí que es tenida en cuenta en la capa de composición para los modos de fusión.

Y después de tanto rollo la pregunta obligada es: ¿y todo esto de qué *** sirve? Bueno, eso ya depende de la necesidad de cada cual en cada momento.

A mi para montar este post y terminar con una demo que lo que hace es extender el efecto de un filtro CSS, en este caso blur(), más allá del borde del elemento al que se declara sirviéndome de la declaración outline-offset con valor positivo. Eso y una pizca más de CSS lo tienes en e siguiente pen:

See the Pen Filters: to border and beyond by @Kseso by Kseso (@Kseso) on CodePen.

Debido al poco soporte que la propiedad backdrop-filter tiene en estos momentos si no usas Chrome o Safari no verás el efecto del filtro blur.

En especial para quienes hayáis llegado hasta aquí y os quedéis sin disfrutar del efecto, por usar un navegador que no le da soporte, tengo un regalo para compensaros: Easy dynamic outside & inside blur pure Css.

Bueno, para el resto también.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.