soy Kseso y esto EsCSS

Protip: box-shadow en lugar de gradientes CSS en la propiedad background

Cómo usar sombras o box-shadow en la propiedad background en lugar de gradientes CSS para obtener patrones.

Protip: box-shadow en lugar de gradientes CSS en la propiedad background

·Por Kseso ✎ 3
uso de box-shadow en lugar de gradientes CSS en la propiedad background

Vía Twitter y de la mano, o cuenta, de Yoksel me enteré hoy mismo de esta alternativa a los gradientes de CSS usados en los fondos o la propiedad CSS background

Ahora es posible sustituir los gradientes por sombras interiores box-shadow: inset ... como parámetros del background.

Es decir, declarar algo como:

DIV { width: 300px; height: 300px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style=%22background: teal;box-shadow: 0 0 0 .5rem purple inset, 0 0 0 1rem crimson inset, 0 0 0 1.5rem orangered inset, 0 0 0 2rem gold inset, 0 0 0 2.5rem turquoise inset, 0 0 0 3rem darkturquoise inset; %22%3E%3C/svg%3E"); background-size: 7rem 7rem; background-position: 50% 50%; animation: bg 10s infinite; }

Como ves en el código anterior, obra de Yoksel, todo es cuestión de usar en el valor de la función CSS url() en lugar de la típica ruta a una imagen SVG, que ya era posible, un objeto / elemento SVG con el atributo style en su etiqueta de apertura. (Nota que %3C y %3E no dejan de ser otra cosa que los símbolos < y >).

El resultado de ello lo puedes ver e el siguiente pen:

See the Pen Animated pattern for HTML element without gradients by Kseso (@Kseso) on CodePen.

Pero esto no es todo. Como ahora disponemos del atributo style en el SVG que es el valor de la función CSS url nada nos impide seguir incluyendo otras declaraciones CSS de las admitidas en dicho atributo, como las transformaciones o las que tu imaginación y buen gusto te sugieran:

See the Pen Animated pattern without gradients: + transform! by Kseso (@Kseso) on CodePen.

En cuanto a sus posibilidades de uso yo lo he podido ver funcionando tanto en Chrome como Firefox en Vista y Win8.

La descubridora de esta técnica ha seguido experimentando con ella y realizando más ejemplos de uso. Todo ello lo puedes ver en la colección que ha creado en codepen.

Si quieres jugar con esta novedad, Yoksel resume los pasos a seguir:

  1. Coge cualquier SVG
  2. Añádele estilos en línea
  3. Codifica el SVG
  4. Utiliza el código en background-image
  5. ¡Disfruta!

Para más información sobre el uso del atributo style en los SVG lo puedes ver en la especificación Scalable Vector Graphics (SVG) 2 que hoy mismo ha alcanzado el estatus de W3C Candidate Recommendation. Más concretamente en el punto 6: Styling

avatar del Editor del blog

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.
@Kseso EsCss Kseso