JMiur [E]

Mucho CSS pero no importa, leaverou.me muestra la forma de crear patterns sin imégens y aplicarlos como fondos a cualquier etiqueta de bloque aunque, claro, al hacer uso (y abuso) del CSS3, no será visible en Internet Explorer. De todos modos, es una nueva demostración de lo poderoso que pueden ser estas nuevas herramientas.

Esta sería la clase básica donde definimos el tamaño del pattern utilizando la propiedad background-size:
.stripes {
  -moz-background-size: 25px 25px;
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
  height: 150px;
  margin: 0 auto;
  width: 600px;
}
Cada modelo tiene sus propias reglas y la longitud de ellas puede asustar. Las aplicamos, colocando la clase base y la clase del modelo en la etiqueta; por ejemplo:
<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>


.angled {
  background-color: #AC0;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.angled-135 {
  background-color: #c16;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.horizontal {
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.vertical {
  background-color: #f90;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.checkered {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(45deg, transparent 75%, #555 75%),
  -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(45deg, transparent 75%, #555 75%),
  -o-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
}

.picnic {
  background-color:white;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

5 comentarios:

Domin-Omega  

No creí que fuera posible... de cualquier manera, el archivo de imagen de un patron no suele ser pesado, y dado que para IE terminaremos usándolo, creo que lo mejor es hacerlo igual para todos.
Aunque el gusto de haberlo hecho sólo con código no se lo quita nadie a este tipo.

Responder
JMiur  

Si el mundo estuviera limitado siempre a lo que puede hacerse con las mismas herramientas y nadie experimentara, probara y abriera el juego, aún estaríamos colgando de los árboles y comiendo bananas o utilizando IE 5.5 :D

Por suerte, eso no es así y cualquier alternativa, se use o no se use, permite abrir caminos que el tiempo se encarga de encauzar, transformar o desestimar.

Para mi, internet es eso. Un lugar donde siempre hay alternativas a cualquier cosa y donde nadie debería quedar encorsetado por el academicismo. Acá, todo es posible y los límites se los crea cada uno de nosotros.

Responder
JAIME  

Bien dicho :) y muy bien echo!!

Responder
Graciela  

Es alucinante! para mi que he probado y jugado mushoooo con los fondos, ohhh maravilloso! :P

Responder
JMiur  

Es para divertirse :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR