CSS3 permite crear patrones de diseño sin el uso de imágenes.

Entre las técnicas que podemos hallar, se puede realizar este diseño:

carbon fiber

background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

También es posible realizar este diseño mediante el código que le sigue a continuación.diagonal checket

background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
	linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:60px 60px;

Otro diseño interesante es este.

diagonal striper

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

Todos estos diseños los encontraras en la página CSS3 Patterns Gallery, para que ustedes vean cual les puede ayudar en el diseño que estén realizando.

No hay comentarios en
“Patrones de diseño de CSS3”





Subir ↑↑