miércoles, 19 de enero de 2011

Patterns con CSS3



Patterns con CSS3



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));
}



















Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font






free counters







Disculpen las Molestias
Conceptos Hinduistas (1428)SC |






Conceptos Hinduistas (2919)SK  ·  (2592)SK
Aa-Ag · Ah-Am · Ana-Anc · And-Anu · Ap-Ar · As-Ax · Ay-Az · Baa-Baq · Bar-Baz · Be-Bhak · Bhal-Bhy · Bo-Bu · Bra · Brh-Bry · Bu-Bz · Caa-Caq · Car-Cay · Ce-Cha · Che-Chi · Cho-Chu · Ci-Cn · Co-Cy · Daa-Dan · Dar-Day · De · Dha-Dny · Do-Dy · Ea-Eo · Ep-Ez · Faa-Fy · Gaa-Gaq · Gar-Gaz · Ge-Gn · Go · Gra-Gy · Haa-Haq · Har-Haz · He-Hindk · Hindu-Histo · Ho-Hy · Ia-Iq · Ir-Is · It-Iy · Jaa-Jaq · Jar-Jay · Je-Jn · Jo-Jy · Kaa-Kaq · Kar-Kaz · Ke-Kh · Ko · Kr · Ku - Kz · Laa-Laq · Lar-Lay · Le-Ln · Lo-Ly · Maa-Mag · Mah · Mai-Maj · Mak-Maq · Mar-Maz · Mb-Mn · Mo-Mz · Naa-Naq · Nar-Naz · Nb-Nn · No-Nz · Oa-Oz · Paa-Paq · Par-Paz · Pe-Ph · Po-Py · Raa-Raq · Rar-Raz · Re-Rn · Ro-Ry · Saa-Sam · San-Sar · Sas-Sg · Sha-Shy · Sia-Sil · Sim-Sn · So - Sq · Sr - St · Su-Sz · Taa-Taq · Tar-Tay · Te-Tn · To-Ty · Ua-Uq · Ur-Us · Vaa-Vaq · Var-Vaz · Ve · Vi-Vn · Vo-Vy · Waa-Wi · Wo-Wy · Yaa-Yav · Ye-Yiy · Yo-Yu · Zaa-Zy

GENERAL

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog