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

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 Don Kseso Kseso

Comentarios: 3

  1. Sería ideal si se pudieran animar los colores, que es algo que 'animation' no permite en los gradientes de fondo. Traté de ponerle una clase al objeto SVG para aplicarle los formatos desde la hoja de estilos, pero me la ignoró. Habría que estudiarlo un poco más, quizá si lo llevamos al 'body' con su 'id' y ya formateado con CSS lo metemos en nuestro fondo con 'url(#id)'; después las animaciones de color de sombra serían para el objeto/elemento en el 'body', y puede ser que entonces las acepte.

    ResponderEliminar
    Respuestas
    1. Bueno, es que no deja de ser CSS, Furoya, y las limitaciones generales también le son propias.
      Pero pese a ello es interesante y, como con todo lo recién descubierto, habrá que explorar sus posibilidades y límites.

      Yoksel ha seguido "jugando" con esta técnica (y supongo que lo seguirá haciendo). Así que en lo que se nos ocurren ideas para experimentar no es mala idea visitar su página en codepen de vez en cuando.

      Un saludo

      Eliminar
    2. Totalmente de acuerdo, comento justamente para aportar ideas y llevar más al límite esta técnica, que se ve mucho más que ingeniosa. A veces parece que estoy criticando mal, pero debe ser por tanto tiempo que hice de abogado del diablo en distintos foros.

      Y suelo mirar la página de Yoksel. Alguna vez hasta hice un efecto CSS y se lo dediqué. Pero no la puedo aprovechar mucho porque ella trabaja casi exclusivamente con SVG, que es un tema que no domino ni uso a menos que sea estrictamente necesario (por ejemplo, para crear alguna compatibilidad).

      Habrá que seguir jugando con esto porque parece tener muchas posibilidades.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap