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

SOUV2 SOUV2P.TTF - 57 KB SOUV2I.TTF - 59 KB SOUV2B.TTF - 56 KB SOUV2T.TTF - 56 KB Balaram bai_____.ttf - 46 KB babi____.ttf - 47 KB bab_____.ttf - 45 KB balaram_.ttf - 45 KB ScaGoudy SCAGRG__.TTF - 73 KB SCAGI__.TTF - 71 KB SCAGB__.TTF - 68 KB FOLIO 4.2 inbenr11.ttf - 64 KB inbeno11.ttf - 12 KB inbeni11.ttf - 12 KB inbenb11.ttf - 66 KB indevr20.ttf - 53 KB Biblica Font Greek font: BibliaLS Normal Greek font: BibliaLS Bold Greek font: BibliaLS Bold Italic Greek font: BibliaLS Italic Hebrew font: Ezra SIL Hebrew font: Ezra SIL SR

Disculpen las Molestias

• Página PRINCIPAL
• OBRAS y AUTORES CLÁSICOS
• Agradecimientos
• Cuadro General

Conceptos Hinduistas (1428)SC |

Category:Hindu (mythology) (3256)SC | Category:Hindu mythology (3270)SC | Categoría:Mitología hindú (3288)SC (indice) | Categoría:Mitología hindú (videos) (3289)SC | Conceptos Hinduista (A - G) SK y SC (videos) (3294)SC Aa-Anc · Aga - Ahy · Ai - Akshay · Akshe - Amshum · Ana - Ancie · Ang - Asvayu · Ata - Az · Baa-Baz · Be-Bhak · Bhal-Bu · C · Daa-Daz · De · Dha-Dry · Du-Dy · E · F · Gaa-Gayu · Ge-Gy · Ha-He · Hi-Hy · I · J · K · Ka - Kam · Kan - Khatu · Ki - Ko · Kr - Ku · L · M · N · O · P · R · S · Saa-San · Sap-Shy · Si-Sy · Ta - Te · U · V · Ve-Vy · Y · Z

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
JUDAISMO | Ärî Garga-Samhita | Oraciones Selectas al Señor Supremo | Devotees Vaishnavas | Dandavat pranams - All glories to Srila Prabhupada | Hari Katha | Santos Católicos | El Antiguo Egipto I | Archivo Cervantes | Sivananda Yoga | Neale Donald Walsch | SWAMIS | ENCICLOPEDIA - INDICE | DEVOTOS FACEBOOK | EGIPTO - USUARIOS de FLICKR y PICASAWEB