html - figcaption - ¿Es factible el efecto Starburst en CSS3?

title html css

Question

¿Alguien sabe si la siguiente imagen se podría hacer en CSS? Las líneas claras y oscuras pueden y deben tener el mismo ancho y los bordes se difuminan a un color más oscuro, por lo que el fondo general sería un color oscuro (azul oscuro en este caso).

Cualquier ayuda es bien apreciada. Mis habilidades de Google no proporcionaron ninguna ayuda en este tipo de efecto, solo se encontraron ''pegatinas / insignias de tipo Starburst''.

Answer 1

Con la adición de conic-gradient() a la especificación de CSS, ahora es posible crear el efecto utilizando el CSS que está diseñado para ese tipo de efecto.

Esencialmente, establecerás paradas de gradiente de esta manera:

background-image: conic-gradient( circle,
  black 0%,  black 5%,
  white 5%,  white 10%,
  black 10%, black 15%,
  ...
);

Aquí hay un violín de trabajo

Y aquí hay una versión animada :-) Sin embargo, la animación es un poco entrecortada en mi navegador. Tal vez podría ser optimizado un poco.

Tenga en cuenta que esto solo funciona en los navegadores WebKit; Es decir, Chrome y Safari. Pero, honestamente, eso cubre la mayor parte de los usuarios, y estoy seguro de que el resto agregará soporte para eso muy pronto.

Answer 2

Hay una propiedad experimental en un borrador para CSS4 de Lea Verou :

div
{
    repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}

Pero, según tengo entendido, esto es solo una propuesta y no es posible solo en CSS3. Solo quédate con una imagen de fondo, o podrías intentar usar imágenes de triángulos en elementos rotados.

Answer 3

No. Lamentablemente, las especificaciones de la imagen generada por css3 no incluyen gradientes cónicos / angulares (¡aunque podrían aparecer en la próxima revisión!), Que sería la forma más probable de hacerlo utilizando solo css. Sin embargo, puedes hacer esto usando css + svg. De hecho, tuve este documento svg sentado alrededor de un experimento que hice una vez:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
  <g id="burst">
    <g id="quad">
      <path id="ray" d="M0,0 -69,-500 69,-500 z" />
      <use xlink:href="#ray" transform="rotate(30)"/>
      <use xlink:href="#ray" transform="rotate(60)"/>
      <use xlink:href="#ray" transform="rotate(90)"/>
    </g>
    <use xlink:href="#quad" transform="rotate(120)"/>
    <use xlink:href="#quad" transform="rotate(240)"/>
  </g>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="white" stop-opacity="0.65"/>
    <stop offset="100%" stop-color="black" stop-opacity="0.65"/>
  </radialGradient>
  <!-- a circle mask -->
  <mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)"> 
  <use xlink:href="#burst" fill="lightslateblue"/>
  <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
  <circle r="360px" fill="url(#grad)" />
</g>
</svg>

Establézcalo como su imagen de fondo, y establezca css background-size: cover . Eso es. Aquí hay un violín usando esta imagen en una url de datos.

Answer 4

Sí, es posible.

Tuve la misma pregunta hace un par de meses atrás, y no pude encontrar ningún ejemplo de este efecto con CSS puro. Y así, decidí juguetear con eso.

Después de mucha experimentación, finalmente encontré una solución que no solo estaba en CSS, sino que también es bastante portátil (en términos relativos).

Comencé con la creación de la mitad superior y la mitad inferior por separado, utilizando trucos de gradiente lineal en ::before y ::after pseudo elementos, y el segundo paso (que, con mucho, fue el paso más lento) fue la fusión de los dos mitades en un solo elemento.

Demostración de trabajo: http://codepen.io/pestbarn/pen/aBybeK

(El póster original quería un efecto de viñeta, que he creado por separado en la demostración anterior, utilizando una superposición div con un degradado radial)

He proporcionado tanto el CSS de vainilla como un mixin de Sass en github.com/pestbarn/starburst.css , y encontrará algunos ejemplos en la página de demostración oficial.

¿Es este navegador cruzado?

Por lo que puedo decir, sí. Puedes ver el soporte del navegador actual en el repositorio.

¿Puedo animarlo?

Sí, como si quisieras animar cualquier otro elemento. ¡Pruébelo usted mismo!

¿Hay alguna advertencia?

Por desgracia, hay. El uso de dos colores que son sustancialmente diferentes de los otros (por ejemplo, en el brillo) creará bordes irregulares. Por lo tanto, recomiendo usar colores que sean muy similares entre sí.

Además, dado que el efecto se crea utilizando pseudo elementos, en algunos casos deberá establecer explícitamente la altura y el ancho del elemento.

Siéntete libre de experimentar!