Moderador del foro: ZorG  
Qué se puede hacer con CSS
Cicromy
Mensajes: 1
Reputación: 0
Mensaje Nº 16 | 9:40 PM
Excelente!! todo en un solo lugar para aprender!!
pero bueno tengo una duda pero solo si es q se puede o no usar plantillas CSS listas y instalarlas en ucoz?

Perdoname ser ignorante aprendiendo recien esto pero me refiero que suponte descargo una plantilla CSS gratis en
http://www.freecsstemplates.org y luego lo instalo , mas decir copio y pego el codigo en el diseñador de plantillas.
Lo hice pero no se ve todo, solo sale un fondo blanco y sale puro escrito y nada mas.

Yo elegi un diseño como este http://www.freecsstemplates.org/preview/reckoning pero claro que esta plantilla no cubre oara el foro u otra secciones...

Entonces si no funciona instalar estas plantillas, tendre q crearlas yo y hacer una plantilla en el diseñador de plantillas algo similar a este modelo pero q cubra todas las secciones de la web?

Actualmente habia creado varias paginas pero se me han expirado por estar arreglando una y otra vez los diseños...
esta es la pagina q tengo creada http://therevolution.ucoz.com y me gusta este diseño pero parece q este diseño tiene como bloqueado el banner q viene puesto, he tratado de buscarlo pero no he podido poder sacar ese banner.....

bueno esop!
espero q no sea molestia!
y gracias!

sorin
Mensajes: 442
Reputación: 6
Mensaje Nº 17 | 1:14 AM
Hola y bienvenido al foro de uCoz Cicromy.

Tras echar un vistazo a tu sitio web y observando que aun le hace falta cositas que acabar y desarrollarlo en la red de redes te puedo sugerir que de momento puedes dejar una de las plantillas de uCoz en tu sitio ya que ahi bastantes donde elegir y la verdad no esta nada mal el diseño de las plantillas del sistema uCoz. Dsepues de que vas entender este sistema de los codigos sea, HTML, CSS y algunos otros mas ya puedes modificar las plantillas a tu gusto. Yo sinceramente e echo pocos cambios en una de las plantillas que tengo en el sitio de mi firma solo e cambiado algunas cosas que recibi como sugerencias de algunos webmasters. Esto en mi opinion, pero tu haz que mas te conviene y no olvides que si algo no te sale bien siempre tienes la opcion de restablecer los cambios.

Saludos.
Sorin.


GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 18 | 6:33 PM
CSS Box Links

Siempre me han maravillado los menus que se conforman por cajas y, al pasar el mouse sobre ellas, puedes dar click y obtienes un bonito efecto :hover. El problema es que, el 90% de estas cajas son a base de javascript; lo cuál limita mucho nuestra accesibilidad. Hace tiempo que no veo este tipo de menús, por lo que me había olvidado completamente de ellos…

… hasta que, leyendo a The CSS Guy me encuentro con un tutorial que trata precisamente de esto; pero de nuevo, utiliza javascript (aunque es bien usado, y si está desactivado, no se compromete la accesibilidad; pero si el estilo). Me di a la tarea de crear mi propia versión de links en elementos de caja (osease, podrán aplicar esta técnica a cualquier div, li, p, etc.) aunque, de nuevo, no es lo mismo para todos los navegadores. Como siempre, les dejo el demo para que vean de qué trata antes de aventarse todo el tutorial.

El problema (explicado)
Primero vamos a explicar bien el problema; y qué mejor que lo que el mismo CSS Guy ha explicado en su entrada. Lo que queremos es que una caja parecida a esta sea un hipervínculo:

Y claro, a su vez, debe ser compatible con la mayor cantidad de navegadores posible. Ahora bien, para codificar esa caja, nosotros pondríamos algo como esto:

Quote
<h2>About Us</h2>
<p>How my life story became a Hallmark movie.</p>

¿Cierto? Pero no podemos convertirlo en hipervínculo, pues el elemento <a> es en línea (inline), y estos elementos no pueden contener elementos de bloque (llamese <h2> y <p>); por lo que esa idea queda desechada. Entonces ¿qué podemos hacer? El CSS Guy ha usado javascript, lo cuál funciona; pero si de casualidad tienes desactivado javascript (como yo); el estilo se perderá (pero sigues con acceso a la información). El menú que normalmente obtendríamos al dar click derecho sobre un link no aparece. El método que propongo es un tanto más útil, sobretodo con los navegadores modernos (que cada vez adquieren más fuerza); pero sigue siendo accesible para usuarios con navegadores viejos.

El HTML
Con la semántica y accesibilidad en mente; el código de arriba es perfectamente válido; pues tenemos un header y un párrafo con una breve descripción de la sección; así que nos quedaremos con ellos. Ahora bien, necesitaremos un link a la información que vamos a presentar y ya con estos tres elementos, los vamos a agrupar con alguna tag (en este caso, <li>), pues forman parte de un mismo elemento (un hipervínculo en este caso). Para este ejemplo, supondré que estamos creando un menú de navegación; y como un menú es una lista de links, eso mismo haré:

Quote
<ul>
<li class="link1">
<h3>link 1</h3>
<p>Un bonito link... lalala.</p>
<a href="#1">Clic para leer</a>
</li>
</ul>

Bien, ahora agregaré unos cuantos links más; y por motivo de estética y para darle más vida a nuestro menú, cada <li> tendrá una clase para poderle dar estilo separadamente:

Quote
<ul id="cajas">
<li class="link1">
<h3>link 1</h3>
<p>Un bonito link... lalala.</p>
<a href="#1">Clic para leer</a>
</li>
<li class="link2">
<h3>link2</h3>
<p>Otro bonito link... lalala</p>
<a href="#2">Clic para leer</a>
</li>
<li class="link3">
<h3>link3</h3>
<p>Y uno más... lalala... este tiene el texto laargo para que vean cómo se estira... el link, el link. ¬¬</p>
<a href="#3">Clic para leer</a>
</li>
<li class="link4">
<h3>link3</h3>
<p>Y uno más... lalala</p>
<a href="#4">Clic para leer</a>
</li>
</ul>

El CSS
Y bueno, la idea principal es posicionar relativamente nuestro contenedor (en este caso, nuestro <li>) y dentro posicionar el <a> absolutamente; ajustarlo al ancho y alto del <li>, ponerlo transparente y darle un efecto :hover al <li> mismo. ¿Suena complicado? Vamos por pasos.

Primero daremos estilo al <ul> y al <li> al cual posicionaremos absolutamente. También le estoy dando un ancho fijo, pero puede ser un porcentaje sin problemas.

Quote
/* Lista general */
ul#cajas {
list-style: none;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0;
width: 250px
}

/* Estilo li's */
ul#cajas li {position: relative; margin: 0 0 5px 0; padding: 5px}

Ahora vamos a aprovechar que le dí una clase diferente a cada li para poder darle un color de fondo y un borde. También usaré la pseudo-clase :hover para que, al momento de pasar el mouse sobre nuestro <li>, este cambie de color y obtengamos ese efecto que queremos.

Quote
/* Colores de cada link */
ul#cajas li.link1 {border: 1px solid #7dbbbb; background-color: #dcefef}
ul#cajas li.link1:hover {background-color: #c0e2e2}

ul#cajas li.link2 {border: 1px solid #c9dca5; background-color: #ebf2de}
ul#cajas li.link2:hover {background-color: #dde9c7}

ul#cajas li.link3 {border: 1px solid #fad57c; background-color: #fef1d3}
ul#cajas li.link3:hover {background-color: #fde9b9}

ul#cajas li.link4 {border: 1px solid #ff9b9b; background-color: #ffd9d9}
ul#cajas li.link4:hover {background-color: #ffc6c6}

Bien. Ahora vamos a darle estilo a los elementos que tenemos dentro de nuestros <li>. Esto es, el <h3> y el <p>:

Quote
/* Headers */
ul#cajas li h3 {
margin: 0;
padding: 0
}

/* Párrafos */
ul#cajas li p {
margin: 0;
padding: 0;
text-indent: 0
}

Nada ostentoso; pero ustedes pueden dejar volar su imaginación: Ahora si, vamos a lo importante: el anchor. A este elemento lo vamos a mostrar como bloque, lo posicionaremos absolutamente y vamos a ocultar el texto utilizando text-indent. También me aseguraré de que no tenga ningún fondo usando background: none:

Quote
/* Link */
ul#cajas li a:link, ul#cajas li a:visited {
position: absolute;
display: block;
top: -1px;
left: -2px;
text-indent: -9999em;
width: 250px;
height: 100%;
background: none
}

El ancho puede ir en porcentaje, pero recomiendo usen pixeles (por IE6).

Arreglar el Código para IE6
Si todo fuera bello y utópico, habríamos terminado; pero como vivimos en un mundo donde la gente utiliza miles de navegadores diferentes, debemos arreglar un poco nuestro código para que sea compatible con los demás navegadores.

Me centraré en IE6. ¿El problema con IE6? En realidad son dos:
1. La pseudo-clase :hover no funciona sobre ningún elemento que no sea un <a>. Por este motivo, el efecto de cambio de color, y por lo tanto, el indicador de que la caja es un link, desaparece.

2. Internet Explorer no sabe cómo manejar height: 100%, pues el elemento padre (el <li>) no tiene un alto especificado (es tonto, lo sé). Por este motivo, solo muestra el alto que considera necesario; esto es; el alto de tu line-height (pues el hipervínculo es solo una línea de texto).
Molesto ¿Cierto? Pero igual, IE6 sigue siendo MUY usado, y estoy seguro que otros navegadores con un soporte equitativamente patético sobre el modelo de caja andan por ahí, navegando la web. Así que vamos a salvar a los pobres usuarios de estos navegadores.

Hay una forma de arreglar el segundo error: simplemente darle un alto al contenedor. Pero aquí estoy asumiendo que el texto es dinámico, por lo que no es una opción. También podría usar javascript; pero si está desactivado el usuario de dicho navegador seguiría sin un link apropiado. En lugar de intentar darle el mismo efecto a IE6 me decidí por darle un estilo alternativo; pero igual atractivo y funcional.

Lo que tenemos en este momento en IE6 es un anchor de 255px y 1EM de alto posicionado arriba y a la izquierda de nuestro <li> sin un efecto hover que nos ayude. Para mostrar el link y, al mismo tiempo, darle un efecto hover a la caja, usaré una imagen:

Bonita flechita ¿que no? Esta flechita la pondré como fondo del anchor; pero solo para IE6 y hacia abajo; con la esperanza de que el usuario deduzca que se trata de un hipervínculo. Tiene dos flechitas, una para el estado normal y una para el hover. Solo es cuestión de usarla de imagen de fondo del anchor, ponerla a la derecha y cambiar la posición de la misma al pasar el mouse sobre el anchor. El código queda así:

Quote
/* Link */
ul#cajas li a:link, ul#cajas li a:visited {
position: absolute;
display: block;
top: -1px;
left: -2px;
text-indent: -9999em;
width: 250px;
height: 100%;
background: none !important;
background: url('ir.gif') no-repeat right 5px;
border-bottom: 0
}

ul#cajas li a:hover, ul#cajas li a:active {
background: none !important;
background: url('ir.gif') no-repeat right -15px;
}

Con esto, usuarios de IE6 e IE5.5 (los dos que probé) tienen un indicador de un hipervínculo y un estado :hover. Quiza no es perfecto, y causaría algunos problemas al desactivar las imágenes; pero es lo más cercano que pude llegar a una solución casi perfecta.

Les dejo el demo de las cajas con links. Pueden desactivar las hojas de estilo para que vean que sigue siendo semántico y entendible; visitarlo en IE6 para que vean el efecto y en IE7, Firefox u Opera para ver los links como debieran ser. ¡Espero les sea útil!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 19 | 1:28 PM
Dibujar en CSS

¡Que bonita imagen! ¿A poco no? ¡Pero es MUY sencilla! ¡Cualquiera podría hacerlo usando Fireworks o Photoshop! Bueno; los invito a que la vean. ¿Qué pasaría si les dijera que ese es un screenshot de una página en HTML y CSS que usa la interesante cantidad de 0 imágenes? Si, CERO imágenes. Es un pequeño dibujo que hice en CSS, a puros divs y spans y uno que otro puntito. ¿Te interesa? ¡Vamos a ver cómo lo hice!

Cabe aclarar que no pienso describir como hice cada elemento, uno por uno. No acabaría. En su lugar, les explicaré brevemente lo que crea conveniente y les pondré el código fuente y el demo; espero sea suficiente.

Por cierto, un agradecimiento especial a Scott Jackson por este grandioso wallpaper que inspiró esta entrada.

El HTML
Ahora si, empecemos. El código de nuestro HTML será algo como esto:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Dibujo en CSS!!</title>
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
</head>

<body>
<div id="cuadro">
<div id="cielo">
<div id="ct"> </div>
<div id="cb"> </div>

<div id="nube1">
<span id="nub1-1">.</span>
<span id="nub1-2">.</span>
<span id="nub1-3">.</span>
<span id="nub1-4">.</span>
</div>

<div id="nube2">
<span id="nub2-1">.</span>
<span id="nub2-2">.</span>
<span id="nub2-3">.</span>
<span id="nub2-4">.</span>
<span id="nub2-5">.</span>
<span id="nub2-6">.</span>
</div>

<div id="nube3">
<span id="nub3-1">.</span>
<span id="nub3-2">.</span>
<span id="nub3-3">.</span>
<span id="nub3-4">.</span>
<span id="nub3-5">.</span>
<span id="nub3-6">.</span>
</div>

<div id="arcoiris">
<span id="arco-rojo">.</span>
<span id="arco-naranja">.</span>
<span id="arco-amarillo">.</span>
<span id="arco-verde">.</span>
<span id="arco-azul">.</span>
<span id="arco-morado">.</span>
<span id="arco-cielo">.</span>
</div>

<div id="sol">
<span id="sol1">.</span>
<span id="sol2">.</span>
<span id="sol3">.</span>
</div>
</div>

<div id="montana">
<span id="n1"> </span>
<span id="n2"> </span>
<span id="n3"> </span>
<span id="n4"> </span>
<span id="n5"> </span>
<span id="n6"> </span>
<span id="n7"> </span>
<span id="n8"> </span>
<!--[if IE 7]>
<span id="n9"> </span>
<span id="n10"> </span>
<![endif]-->

<div id="mcima"> </div>
<div id="mfalda"> </div>
</div>

<div id="suelo">
<div id="st"> </div>
<div id="sb"> </div>
</div>

<div id="arbol">
<div id="tronco1"> </div>
<div id="tronco2"> </div>

<span id="hojas1">.</span>
<span id="hojas2">.</span>
</div>

<div id="mensaje">
<h3>¡Mira Mamá! ¡Sin imagenes!</h3>
<p>Pintar en CSS es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Además, creo que no me quedó tan feo... ¿O si?</p>
</div>

</div>

</body>
</html>

¿Qué es esto? Bueno, simplemente dividí el dibujo en sus partes. El cielo, el suelo, la montaña y el árbol. El cielo contiene a las nubes, cada una formada por x cantidad de círculos (puntos); por lo que le agregué a cada una sus spans con sus puntos. El arcoiris y el sol también están dentro del cielo, e igualmente están formados por puntos.

En cuanto a la montaña, esa está formada por cajas. El número no lo supe sino hasta que la estaba desarrollando, pero aquí les pongo el código completo. El árbol está formado por cajas y dos puntos grandes, que son sus hojas.

Otro punto que probablemente llame su atención es el hecho de que hay comentarios condicionales dentro de nuestro código. Como era de esperarse, los navegadores me dieron mi dolor de cabeza (especialmente Opera… pero IE también tuvo lo suyo). IE tiene la GRAN ventaja de los comentarios condicionales, para mostrar contenido a ese navegador y solo a ese navegador. Gracias a esto pude corregir un error que tenía la montaña en IE7.

Todo está perfectamente dividido, y es importante darle los ids y las clases apropiadamente. Ya que hemos analizado la estructura de nuestro dibujo es hora de darle vida.

El CSS
El CSS quizá los espante al principio. ¿Cómo dibujas una montaña con puros divs? Para esto utilicé una técnica llamada Slant Borders. Cabe decir que esta técnica es difícil de comprender y de manejar; no la recomiendo para novatos en CSS; pero si tienes un buen entendimiento de las cajas y cómo funcionan, no te será complicado.

El problema con los divs
La técnica de slant borders funciona perfectamente en practicamente cualquier navegador. El problema para este dibujo fue que la propiedad de color “transparent” en los bordes no es soportada por IE6. Firefox2, Opera9 e IE7 lo soportan perfectamente. ¿La solución? No fue bonita. Tuve que eliminar la montaña y el árbol del cuadro para IE6. Probablemente haya más navegadores que carezcan de soporte para transparencias en los bordes, pero qué se le va a hacer.

Ahora bien, eso fue para los polígonos; pero ¿para las partes circulares? Esto fue un poco más difícil. No existe una forma de convertir una caja a un círculo mediante CSS. Así que pensé ¿Qué tengo que ya sea circular? ¡¡Los puntos!! ¡¡Claro!! ¡Un punto de cierto color y gran tamaño puede ser el sol! Y precisamente, eso fue lo que hice; pero no todo fue bonito…

El problema con la fuente…
Al momento de hacer el arcoiris (que fue la primer parte circular que empecé); me topé con un problema. Primero utilicé la medida en pixeles bajo la propiedad font-size; pero en Opera esto no funcionaba. Al parecer, al llegar a 500px, Opera se detiene. No pude especificar un texto más grande de 500px. Intenté después con pt; sin resultados. Por último, me fui por los EMs. Al parecer, los EMs si funcionaron, así que fueron la medida de elección.
Al terminar el arcoiris y revisar que funcionara en todos los navegadores me topé con otro problema. Opera tiene una manera… extraña de renderear el texto; y al posicionarlo este no se posiciona como debiera. Por lo tanto, Opera muestra todos los círculos un tanto desalineados (sobretodo hacia arriba). Quiero creer que esto es debido a la forma en que Opera renderea el texto, no por otra cosa; pero si alguien puede aclararlo, se lo agradeceré.

Y bien, esas son las dos técnicas principales que usé para esto. También abusé del posicionamiento absoluto y relativo y de la propiedad z-index. Échenle un vistazo al código a ver si lo pueden descifrar.

Quote
/* - - - - - - - - - - -*/
/* Cuadro */
/* - - - - - - - - - - -*/
div#cuadro {
margin: auto;
margin-top: 30px;
border-top: 25px solid #f8e297;
border-right: 25px solid #d1a662;
border-left: 25px solid #f2d494;
border-bottom: 25px solid #CEAA7A;
background-color: #60dbfe;
height: 400px;
width: 800px;
overflow: hidden;
position: relative
}

/* - - - - - - - - - - -*/
/* Empezando Cielo */
/* - - - - - - - - - - -*/
div#cielo {
position: absolute;
z-index: 0;
width: 800px;
height: 215px
}

div#ct {background-color: #36d1fe; height: 125px}
div#cb {background-color: #52d8fe; height: 90px}

/* Arcoiris */
div#arcoiris {
width: 350px;
position: relative;
left: 161px;
margin: 0;
padding: 0;
top: -22px
}

div#arcoiris span {margin: 0; padding: 0; position: absolute}

span#arco-rojo {font-size: 165em; color: #e9232a; top: -1906px; left: -237px}
span#arco-naranja {font-size: 142em; color: #f57d2d; top: -1615px; left: -180px}
span#arco-amarillo {font-size: 119em; color: #f3df37; top: -1322px; left: -125px}
span#arco-verde {font-size: 96em; color: #4fa437; top: -1032px; left: -68px}
span#arco-azul {font-size: 73em; color: #0568ad; top: -743px; left: -12px}
span#arco-morado {font-size: 50em; color: #861e84; top: -455px; left: 45px}
span#arco-cielo {font-size: 27em; color: #60dbfe; top: -170px; left: 102px}

/* Sol */
div#sol {
position: absolute;
top: 0;
left: 0;
}

div#sol span {position: absolute}

span#sol1 {font-size: 59em; color: #f5c520; top: -624px; left: 69px}
span#sol2 {font-size: 47em; color: #f8d356; top: -473px; left: 99px}
span#sol3 {font-size: 34em; color: #FADD7C; top: -308px; left: 132px}

/* Nubes */
/* Nube 1 */
div#nube1 {
position: absolute;
width: 100px;
height: 120px;
top: 0;
left: 0
}

div#nube1 span {position: absolute; color: #fff}

span#nub1-1 {font-size: 39em; top: -460px; left: -70px}
span#nub1-2 {font-size: 38em; top: -425px; left: -45px}
span#nub1-3 {font-size: 30em; top: -300px; left: -60px}
span#nub1-4 {font-size: 20em; top: -250px; left: 10px}

/* Nube 2 */
div#nube2 {
position: absolute;
width: 172px;
height: 123px;
top: 26px;
left: 590px
}

div#nube2 span {position: absolute; color: #fff}

span#nub2-1 {font-size: 40em; top: -460px; left: -70px}
span#nub2-2 {font-size: 28em; top: -345px; left: -55px}
span#nub2-3 {font-size: 26em; top: -320px; left: 0px}
span#nub2-4 {font-size: 32em; top: -365px; left: -115px}
span#nub2-5 {font-size: 29em; top: -315px; left: 20px}
span#nub2-6 {font-size: 25em; top: -245px; left: 10px}

/* Nube 3 */
div#nube3 {
position: absolute;
width: 52px;
z-index: 2;
height: 33px;
top: 249px;
left: 172px
}

div#nube3 span {position: absolute; color: #fff}

span#nub3-1 {font-size: 14em; top: -180px; left: 5px}
span#nub3-2 {font-size: 10em; top: -130px; left: 30px}
span#nub3-3 {font-size: 7em; top: -78px; left: 33px}
span#nub3-4 {font-size: 9em; top: -100px; left: 17px}
span#nub3-5 {font-size: 13em; top: -163px; left: -7px}
span#nub3-6 {font-size: 8em; top: -95px; left: -8px}

/* - - - - - - - - - - -*/
/* Empezando Montaña */
/* - - - - - - - - - - -*/
div#montana {
width: 478px;
height: 213px;
position: relative;
z-index: 1;
top: 168px;
left: 325px
}

div#mcima {
position: relative;
top: 0px;
width: 10px;
left: 159px;
border-left: 70px solid transparent;
border-right: 110px solid transparent;
border-bottom: 88px solid #4e505d
}

div#mfalda {
position: relative;
bottom: 0;
border-top: 0px;
border-left: 160px solid transparent;
border-right: 130px solid transparent;
border-bottom: 112px solid #4e505d
}

/* Nieve */
span#n1 {
position: absolute;
top: -9px;
z-index: 1;
left: 190px;
border-top: 0px;
border-left: 40px solid transparent;
border-right: 70px solid transparent;
border-bottom: 58px solid #fff
}

span#n2 {
position: absolute;
top: 48px;
z-index: 1;
left: 220px;
border-top: 58px solid #fff;
border-left: 5px solid transparent;
border-right: 30px solid transparent;
border-bottom: 58px solid transparent
}

span#n3 {
position: absolute;
top: 43px;
z-index: 1;
left: 149px;
border-top: 0;
border-left: 45px solid transparent;
border-right: 0;
border-bottom: 58px solid #fff
}

span#n4 {
position: absolute;
top: 53px;
z-index: 1;
left: 145px;
border-top: 0;
border-left: 75px solid transparent;
border-right: 0;
border-bottom: 50px solid #4e505d
}

span#n5 {
position: absolute;
top: 49px;
z-index: 1;
left: 190px;
border-top: 0;
border-left: 40px solid #fff;
border-right: 0;
border-bottom: 24px solid transparent
}

span#n6 {
position: absolute;
top: 40px;
z-index: 1;
left: 288px;
border-top: 0;
border-right: 46px solid transparent;
border-left: 0;
border-bottom: 34px solid #fff
}

span#n7 {
position: absolute;
top: 50px;
z-index: 1;
left: 258px;
border-top: 0;
border-right: 76px solid transparent;
border-left: 0;
border-bottom: 24px solid #4e505d
}

span#n8 {
position: absolute;
top: 48px;
z-index: 1;
left: 255px;
border-top: 40px solid #fff;
border-right: 0;
border-left: 40px solid transparent;
border-bottom: 0
}

/* Arreglando bug en IE7 */
span#n9 {
position: absolute;
top: 48px;
z-index: 1;
left: 277px;
border-top: 40px solid #60dbfe;
border-right: 0;
border-left: 50px solid transparent;
border-bottom: 0
}

span#n10 {
position: absolute;
top: 48px;
z-index: 1;
left: 174px;
border-top: 40px solid #60dbfe;
border-left: 0;
border-right: 28px solid transparent;
border-bottom: 0
}

/* - - - - - - - - - - -*/
/* Empezando suelo */
/* - - - - - - - - - - -*/
div#suelo {
position: absolute;
z-index: 2;
background-color: #acdf32;
height: 34px;
width: 800px;
bottom: 0
}

div#st {background-color: #8bba1d; height: 11px}
div#sb {background-color: #a2d922; height: 14px}

/* - - - - - - - - - - -*/
/* Empezando árbol */
/* - - - - - - - - - - -*/
div#arbol {
width: 140px;
height: 253px;
position: absolute;
z-index: 3;
top: 160px;
left: 50px
}

div#arbol span {position: absolute}

/* Tronco*/
div#tronco1 {
width: 20px;
position: absolute;
bottom: 0;
left: 0;
border-top: 0;
border-left: 20px solid transparent;
border-right: 0;
border-bottom: 150px solid #733804
}

div#tronco2 {
width: 15px;
position: absolute;
bottom: 0;
left: 30px;
border-top: 0;
border-right: 10px solid transparent;
border-left: 0;
border-bottom: 150px solid #883c02
}

/* Hojas */
span#hojas1 {font-size: 75em; top: -870px; left: -155px; color: #4aa237}
span#hojas2 {font-size: 65em; top: -750px; left: -122px; color: #85bf0d}

/* - - - - - - - - - - -*/
/* Empezando mensaje */
/* - - - - - - - - - - -*/
div#mensaje {
position: absolute;
z-index: 5;
opacity: .85;
width: 240px;
border: 3px solid #01c1fa;
background-color: #fff;
top: 5px;
font-size: 9pt;
padding: 2px 5px 2px 5px;
left: 280px
}

div#mensaje h3 {
margin: 0;
padding: 0 0 3px 0;
border-bottom: 2px solid #01c1fa
}
div#mensaje p {
margin: 0;
padding: 0
}
Ese es el CSS general. Mediante el uso de comentarios condicionales agregué esto para IE6:
1
2
3 /* Escondiendo de IE6 (no soporta bordes transparentes) */
div#montana {display: none}
div#arbol {display: none}
… y esto para IE7:
1
2
3
4
5
6 /* Posicionando correctamente cono de nieve */
span#n8 {
top: 66px;
z-index: 1;
left: 250px;
}

¡Y ta’da! Mi dibujo quedó completo. Tomó mucho tiempo y fue algo tedioso, pero me gusta el resultado. Espero lo encuentren, por lo menos, curioso. Les pongo de nuevo el link al demo para que lo vean en acción (¡No olviden de desactivar las hojas de estilo! ;))


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 20 | 4:26 PM
Agregar efectos de diseño al texto de tu sitio web con CSS

Si eres un fanático del diseño, te romperás la cabeza pensando cómo hacer para darle efectos a las tipografías de tu blog, en los títulos de las entradas por ejemplo, o en cualquier otra parte. En teoría, el trabajo con tipografía es bastante “limitado” (a nivel diseño) en CSS.

¿Para qué estamos en nuestro foro? ¡Para solucionarte la vida ^_^, claro! Bueno, con este tutorial aprenderás a aplicar algunos bonitos efectos de diseño gráfico al texto de tu sitio web. ¡Comencemos!

Efectos de diseño en el texto de tu sitio con CSS
Bueno, la idea principal es crear una imagen transparente con algún “efecto” o marca del mismo color que el fondo de nuestro sitio. Luego tendremos que superponer esa imagen sobre el texto para crear una especie de máscara que dejará ver el texto. Vamos a los ejemplos gráficos para que se entienda:

Esta imagen es la “máscara”. Como pueden ver la he guardado como .png.

Luego de acomodar el CSS y HTML (más abajo veremos cómo) nos quedará la “máscara” superpuesta en el texto. Ej:

¿Ahora se entiende? La máscara, al tener el mismo color que el fondo sólo se reconoce en el texto ^_^.

El código HTML
La idea es que, dentro del título (por ejemplo <h1>) creemos un <span> vacío, donde luego, mediante CSS le pondremos la imagen de fondo:

Quote
<h1>Este es un ejemplo de texto con efecto <span></span></h1>

Estilos CSS: “gracias por la magia”
Vamos a usar posicionamiento absoluto (el <span>) dentro de un posicionamiento relativo (el <h1>). Así, el fondo del span se superpondrá al h1 ^_^.

Quote
body {
background-color:#000000;
color:#ffffff;
font-family: Arial;
}
a{
color:#35cbda;
}
h1 {
position:relative;
font-size:48px;
font-weight:lighter;
color: #FF6600;
font-family: Georgia;
}
h2 {
position:relative;
font-family: Arial;
font-weight:lighter;
color: #FFCC33;
}
h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(mascara.png);
}
h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(mascara.png);
}

¡Listo! Sólo para maniáticos XD!

No hay límites con CSS
El único límite es nuestra creatividad. Te dejo unos ejemplos para que veas lo que se puede hacer:




¡Espero que te sirva de mucho!

Adherido: 2423957.jpg (5.5 Kb) · 8839510.jpg (4.9 Kb) · 5245106.jpg (5.4 Kb) · 5640999.jpg (19.9 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 21 | 5:42 PM
CSS: Efecto de texto con gradiente

¿Quieres lograr buenos encabezados sin usar imágenes de Photoshop? Aquí te mostramos un simple truco de CSS para que sepas cómo crear el efecto de texto con gradiente con una imagen PNG (puro CSS, sin JavaScript o Flash).

Todo lo que necesitas es un tag vacío en el encabezado y aplicarle un overlay a la imagen de fondo usando la propiedad CSS position:absolute. Este truco ha sido testeado en la mayoría de los buscadores: Firefox, Internet Explorer 6, Safari y Opera. Sigue leyendo para saber cómo hacer…

Beneficios
• Es un truco puramente CSS, sin usar JavaScript ni Flash. Funciona en la mayoría de los navegadores incluyendo IE6 (ver Haciendo que funcione en IE6).
• Es perfecto para diseñar encabezados. No necesitas renderizar cada encabezado con Photoshop. Te hará ahorrar tiempo y tiempo de carga del sitio.
• Puedes utilizarlo con cualquier fuente web y aún cambiando el tamaño de la fuente, el efecto permanecerá intacto.

¿Cómo funciona?
El truco es muy simple. Básicamente agregamos un gradiente PNG de 1px (con transparencia alfa) sobre el texto.

Markups de HTML

Quote
<h1><span></span>CSS Gradient Text</h1>

El CSS

El punto clave aquí es: h1 { position: relative } y h1 span { position: absolute }

Quote
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

¡Y ya está!

Haciendo que funcione en IE6
Como IE6 no renderiza bien los PNG-24, es necesario hacer lo siguiente para conseguir la transparencia del PNG (debes agregarlo en algún lado dentro del tag ):

Quote
<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

jQuery, versión prepend (para los chicos semánticos)
Si no quieres tener un tag vacío en el encabezado, puedes usar JavaScript para anteponer el tag . Aquí hay un ejemplo usando el método prepend de jQuery:

Quote
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
//prepend span tag to H1
$(”h1″).prepend(”<span></span>”);
});
</script>

Patrón/Textura
Puedes usar este truco con otro tipo de fondo. Aquí, un ejemplo con patrón de cebra:

Limitaciones
• Este truco se puede hacer únicamente en elementos con color de fondo sólido. Tu gradiente de color (la imgen PNG) debe tener el mismo color que fondo.
• Tendrás que usar el hack de PNG para que funcione en IE6.
• Si tu imagen de gradiente es más alta que el encabezado, el texto quedará como no seleccionable.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 22 | 5:47 PM
HTML y hacks de CSS para Internet Explorer

Un tema que suele resultar un tanto engorroso a la hora de la programación web es la maquetación CSS mediante el uso de “cajas” debido a la interpretación de la medida de éstas por los diferentes navegadores.

Si lo que deseas es utilizar definiciones de estilos para versiones específicas de IE, en esta nota les compartiremos la mejor manera de realizar un Box Model Hack para potenciar la compatibilidad de tu sitio.

Comentarios condicionales
Internet Explorer ha tenido por un largo tiempo una propiedad llamada Conditional Comments (comentarios condicionales) que permite que el contenido sea sólo visible para IE. La utilización de los comentarios condicionales en lugar de otros hacks css es simple:

» Crea una hoja de estilos común para todos los navegadores, sin utilizar ningún hack para poder evitar los problemas en IE.
» Crea una hoja de estilos común para todas las versiones de IE.
» Crea una hoja de estilos separada para cada una de las versiones de IE que desees etiquetar.
» Incluir las hojas de estilo del punto 2 y 3 utilizando un comentario condicional.

Sintaxis condicional de comentario
El comentario condicional es sólo un comentario HTML especialmente formateado que es captado sólo por varias versiones de Internet Explorer para Windows.

El siguiente comentario condicional es captado por IE5, IE5.5 e IE6:

Quote
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie.css” />
<![endif]–>

Si no deseas que tus estilos específicos de IE sean superpuestos por tu hoja de estilos regular, el orden de la fuente es significante; desearás especificar la hoja de estilos común primero, con las versiones específicas de IE siguiendo a continuación:

Quote
<link rel=”stylesheet” type=”text/css” href=”common.css” />

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie.css” />
<![endif]–>

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie-6.0.css” />
<![endif]–>

<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie-5.0+5.5.css” />
<![endif]–>

Comentario Condicional en CSS

Quote
{/* any IE */float: expression(’none’);/* IE 5.x */}
{/* any Moz */float: expression(’none’);/* Moz 2.x */}

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 23 | 4:10 PM
Los 12 trucos de CSS más usados… y necesarios

Ahora todo se maqueta y/o diseña con CSS. Los potentes estilos reducen el peso de la página, permiten que el HTML se centre en un sentido “semántico” y se posicione mejor en los buscadores, así como también nos permiten rediseñar un sitio entero en dos patadas.

Por eso son tan útiles esos pequeños trucos de bolsillo que uno suele ir recolectando por ahí, para echar mano en un momento de necesidad. Con gusto te dejo esta lista de 12 trucos de CSS que a mi modo de ver son muy usados y también muy necesitados.

12 trucos de CSS para el diseño de tu sitio web
1.Esquinas redondeadas (sin usar imágenes, obvio):

Quote
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b>
<b class=”r3″></b>
<b class=”r2″></b>
<b class=”r1″></b>
</b></div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2. Estilos para una lista ordenada:

Quote
<ol><li><p>This is line one</p>
</li><li><p>Here is line two</p>
</li><li><p>And last line</p>
</li></ol>

ol {font: italic 1em Georgia, Times, serif;color: #999999;}

ol p {font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;}

3. Crear formularios (sin usar tablas):

Quote
<form><label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {clear: left;
}

4. Citas dobles (double blockquote):

Quote
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

5. Efecto de texto con gradiente:

<h1><span></span>CSS Gradient Text</h1>

Quote
h1 {font: bold 330%/100% “Lucida Grande”;
position: relative;color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’gradient.png’, sizingMethod=’scale’);}</style>
<![endif]–>

6. Centrado vertical con line-height:

Quote
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

7. Esquinas redondeadas (con imágenes):

Quote
<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”"width=”15″
height=”15″ class=”corner”
style=”display: none” /></div>

CONTENT

<div class=”roundbottom”>
<img src=”bl.gif”
alt=”"width=”15″
height=”15″
class=”corner”style=”display: none” />
</div></div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

8. Nombre de clase múltiple:

Quote
<img src=”image.gif”
class=”class1 class2″ alt=”" />

.class1 {
border:2px solid #666;
}
.class2 {
padding:2px;
background:#ff0;
}

9. Centrado horizontal:

Quote
<div id=”container”></div>

#container {
margin:0px auto;
}

10. Letras capitales:

Quote
<p class=”introduction”> This paragraph has the class “introduction”.
If your browser supports the pseudo-class “first-letter”,
the first letter will be a drop-cap. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Evitar saltos de línea en links y que el contenido extenso rompa el sitio:

Quote
a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12. Mostrar la barra de scroll en Firefox / Eliminar la de IE en el textarea:

Quote
html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

Espero que te sean de utilidad ¡No salgas de casa sin ellos!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 24 | 5:39 PM
Uso avanzado de CSS con reglas “arroba”

Más allá de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en inglés). Este tipo de reglas tienen usos muy diversos y algunas son específicas de ciertos navegadores.

Las reglas @ comienzan siempre con el símbolo de la arriba y luego su nombre clave. Dependiendo de cual se trate podrá necesitar un único argumento (la regla “import“ por ejemplo) o un bloque de código (la regla “media“). Veamos bien cuáles son.

Regla @import
Agrega los estilos CSS de otra hoja en la que lo usa.
Ejemplo:
@import url(addonstyles.css);

Regla @media
Aplica las reglas que contiene al tipo de medio específico que indica (para impresiones, uso normal por pantalla, para proyectores, etc.).
Por ejemplo:
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}

Los tipos de media que se pueden utilizar son:
all - Se aplica a todos los tipos.
aural - Para sintetizadores de voz.
handheld - Para dispositivos de mano (Palm, iPhone, etc).
print - Para impresoras.
projection - Para proyectores.
screen - Para pantallas de computadora.

Nota: Internet Explorer sólo soporta los tres primeros.

Regla @charset
Ajusta el tipo de codificación de caracteres basándose en los que utiliza otra hoja de estilo.
Por ejemplo:
@charset "ISO-8859-1";

Regla @font-face
Se utiliza para realizar una descripción detallada de una fuente y puede utilizarse también para embeber una tipografía en tu sitio. Sin embargo este último uso sólo es soportado por IE y hay mucha controversia con el tema de los derechos de propiedad al distribuir las fuentes. No es recomendable experimentar con esto si no sabemos bien lo que estamos haciendo.
@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}

Regla @page
Es utilizada para configuraciones avanzadas a la hora de imprimir un sitio, permite por ejemplo determinar el tamaño con el que se imprimirá o con qué margen.
Por ejemplo:
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

Espero haberlos podido acercar un poco más al conocimiento de estas, muchas veces desconocidas, reglas “arroba” de CSS.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 25 | 6:20 PM
Truco CSS para lograr un efecto de fondo traslúcido

Cuando utilizamos CSS para colocar una imagen de fondo podemos controlar su posición con la propiedad background-position, pero existe otra propiedad que los diseñadores suelen olvidar: background-attachment.

Con background-attachment podemos controlar la posición de la imagen, logrando con CSS un efecto de div borroso sobre un fondo colorido y nítido. El problema y el centro de este mini tutorial es que el div borroso y el fondo tienen la misma imagen… Un truco CSS simple para darle a nuestra web un toque extra.

El truco consiste en que estamos utilizando dos imágenes de fondo distintas. La versión completa a color se posiciona en el elemento body, mientras que la versión borrosa se coloca en el div del contenido principal.

Para lograr mantenerlas posicionadas exactamente iguales de forma fija, hay que programar la propiedad background-attachment del div en “fixed”:

Quote
body {
background: url(images/bg-solid.jpg) no-repeat;
}
#page-wrap {
background: url(images/bg-blurry.jpg) no-repeat fixed;
width: 500px; margin: 40px auto;
}

Para entender un poco más cómo funciona, la imagen de los creadores de este truco: CSS Tricks.
En la primera vemos el fondo estático y el div con la visualización de la página en pantalla completa. En la segunda imagen vemos una visualización más pequeña de la página y el div desplazado hacia la izquierda. Aún así, la posición de la imagen borroso se mantiene igual al fondo:

Adherido: 1390866.jpg (56.9 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 26 | 1:05 PM
La descendencia del CSS

Como verán, hasta las Hojas de Estilo en Cascada tienen descendencia. A través de CSS podemos reconocer las etiquetas que en la estructura HTML pertenecen o están contenidas dentro de otra etiqueta, y aplicarles estilos determinados. En CSS estos se llaman Selectores Descendentes. Pero me gustaría dejar claro desde el principio que 2 de estos selectores no funcionan en IE6. ¿Y para qué sigo escribiendo sobre esto? -podrían preguntarse. Bueno porque es una manera muy útil de manejar estilos, y porque esto refuerza que IE6 apesta como browser. Espero algún día que este navegador sea borrado completamente de la faz de la tierra y podamos utilizar todos los estándares habidos y por haber, sin preocuparnos por el soporte. Bueno, hecho los descargos.

Selectores Descendentes
Se ocupan para afectar a todos los elementos que pertenecen (o descienden) de una determinada etiqueta padre. Esto es muy común y hace falta sólo el ejemplo en CSS para que se den cuenta de lo que me refiero:

Quote
ul a {
color: red;
}

En el ejemplo anterior, vemos que el color rojo se aplicará solamente a los enlaces <a> que estén dentro de un <ul>, y no a otros. Si queremos ser más específicos, podemos definir id’s o class‘es:

Quote
.menu a {
color: red;
}

Aquí el color rojo estará en toda etiqueta que tenga una class=“menu”. Y siendo más específico aún, podemos definir si esa class pertenece a cierta etiqueta:

Quote
ul.menu a {
color: red;
}

Aquí sólo se verá el rojo del link si está dentro de un <ul class=“menu”> y no otra etiqueta con esa misma class.

Hay que tener cuidado con ser tan específico declarando estilos, ya que suelen haber problemas posteriores de que no se reconoce cierto estilo, siendo que está declarado por diferencias de peso entre éstas. Esta especificidad pienso abordarlo muy luego, ya que es un problema muy común e importante de conocer. Pero mientras mejor sigo con esto.

Selectores Hijo (no soportado por IE6)
Se usa para afectar a uno hijo de determinado elemento.

Quote
ul li > a {
color: red;
}

Hasta aquí suena igual que los selectores descendentes. La diferencia es que con los selectores hijo afectarán solamente los links que estén dentro del <li>, y no dentro de otra sub etiqueta.

Quote
<ul>
<li><a href="">Link 1</a></li>
<li><em><a href="">Link 1</a></em></li>
</ul>

Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al <a> contenido dentro del <li>, y no al que está dentro de <em> ya que pasó a ser su hijo y no del <li> (imagina que ahora es su nieto).

Selectores Hermanos Adyacentes (no soportado por IE6)

Son los que comparten la misma etiqueta padre y que se encuentran uno a lado del otro en la estructura HTML. Se identifica con un signo + entre los hermanos, y la etiqueta que tendrá el estilo será la última declarada luego de este +.

Quote
p a+em {
color: red;
}

Finalmente, ¿qué uso tienen estos últimos 2 selectores, si no son soportados por IE6? Bien, a través de tu framework de Javascript favorito (que suelen ser crossbrowser) puedes darles un gran uso, por ejemplo manipulando classes para tablas, que suelen tener muchos elementos anidados (para una simple celda tienes que escribir <table><tr><td></td></tr></table>).


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 27 | 5:52 PM
10 técnicas para resetear CSS

Todos los elementos HTML tienen unos atributos CSS predeterminados. Cross browsing (ver la página web correctamente en todos los navegadores) puede verse perjudicado como consecuencia de estos atributos predeterminados. Por lo tanto, lo más recomendable es resetar los estilos CSS para evitar que dichos elementos descuadren la página. Para hacerlo deberemos incluir este código en nuestro archivo CSS:

Quote
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
<a title="outline" href="http://www.cssblog.es/css-la-propiedad-outline/">outline</a>: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: <a title="inherit" href="http://www.cssblog.es/css-inherit/">inherit</a>;
vertical-align: baselinebaseline
}

body {
<a title="line-height" href="http://www.cssblog.es/css-la-propiedad-line-height/">line-height</a>: 1
}

:focus {
outline: 0
}

ol, ul {
list-style: none
}

table {
border-collapse: collapse;
border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
content: ""
}

blockquote, q {
quotes: "" ""
}

input, textarea {
margin: 0;
padding: 0
}

hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

Así conseguiremos resetear los estilos CSS, evitando los problemas del Cross-browsing.

Todos los elementos HTML tienen por defecto unos atributos CSS predeterminados. A veces estos atributos causan problemas comunes a la hora de crear el sitio pensando en cross-browser (que se visualize correctamente en todos los navegadores). Por eso la única solución a veces es resetear tus estilos. Ya os mostramos anteriormente una técnica para resetear estilos, pero esta vez os mostramos 10 más (incluyendo la citada anteriormente). Puede ser interesante y útil resetear nuestros estilos de vez en cuando:

1.

Quote
* {
padding: 0;
margin: 0;
border: 0;
}

2.

Quote
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: <a title="inherit" href="http://www.cssblog.es/css-inherit/">inherit</a>;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

3.

Quote
* {
vertical-align: baselinebaseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

4. Yahoo’s CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

Quote
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

5.

Quote
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

6.

Quote
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

7.

Quote
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

8.

Quote
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
<a title="text-shadow" href="http://www.cssblog.es/css-text-shadow-propiedad/">text-shadow</a>: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottombottom: 0.3em;
vertical-align: baselinebaseline;
}
sub {
position: relative;
bottombottom: -0.2em;
vertical-align: baselinebaseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
font-size: 100%;
font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-rightright {
float: rightright;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

9.

Quote
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

10.

Quote
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

Y hay mas:

Quote
/*
Reset CSS v1.1/03/2009
By Objetivo Creativo
http://www.objetivocreativo.com/
*/
* {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
font: 1em/1.2 Helvetica, Arial, sans-serif;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
direction: ltr;
text-align: left;
text-decoration: none;
text-indent: 0;
unicode-bidi: normal;
position: static;
top: auto;
rightright: auto;
bottombottom: auto;
left: auto;
clear: none;
clip: auto;
display: inline;
<a title="overflow" href="http://www.cssblog.es/css-la-propiedad-overflow/">overflow</a>: scroll;
visibility: visible;
whitewhite-space: normal;
z-index: auto;
cursor: auto;
vertical-align: baselinebaseline;
}
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; }
li { display: list-item;}
head { display: none;}
table { display: table;}
tr { display: table-row;}
thead { display: table-header-group;}
tbody { display: table-row-group;}
tfoot { display: table-footer-group;}
col { display: table-column;}
colgroup { display: table-column-group;}
td, th { display: table-cell;}
caption { display: table-caption;}
html, body { background: white; color: black;}
a { color: blue;}
th { font-weight: bolder; text-align: center;}
caption { text-align: center;}
body { margin: 0.5em; line-height: 1.12;}
h1 { font-size: 2em; margin: .67em 0;}
h2 { font-size: 1.5em; margin: .75em 0;}
h3 { font-size: 1.17em; margin: .83em 0;}
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
cite, q, address,
menu, pre { margin: 1.12em 0;}
h5 { font-size: .83em; margin: 1.5em 0;}
h6 { font-size: .75em; margin: 1.67em 0;}
h1, h2, h3, h4,
h5, h6, b,
em, dt, strong { font-weight: bolder;}
blockquote { margin-left: 2.5em; margin-right: 2.5em;}
dd, blockquote,
cite, q { text-indent: 1em;}
i, cite, em,
var, address { font-style: italic;}
pre, tt, code,
kbd, samp { font-family: "Courier New", Courier, monospace;}
pre { whitewhite-space: pre;}
button, textarea,
input, object,
select { display: inline-block;}
big { font-size: 1.17em;}
small, sub, sup { font-size: .83em;}
sub { vertical-align: sub;}
sup { vertical-align: super;}
table { border-collapse: collapse; border-spacing: 0.13em; captioncaption-side: top; empty-cells: show; table-layout: auto;}
thead, tbody,
tfoot { vertical-align: middle;}
td, th { vertical-align: inherit;}
s, strike, del { text-decoration: line-through;}
hr { border: 0.06em inset;}
ol, ul, dir,
menu, dd { margin-left: 2.5em;}
ul, ol { list-style-position: outside;}
ol { list-style-type: decimal;}
ul { list-style-type: disc;}
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0;}
u, ins { text-decoration: underline;}
br:before { content: "\A";}
:before, :after { whitewhite-space: pre-line;}
center { text-align: center;}
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em;}
:link, :visited { text-decoration: underline;}
a img, :link img,
:visited img { border: none;}
:focus { border: none; outline: thin dotted invert;}
blockquote, cite, q { quotes: "\00AB" "\00BB" "\0022" "\0022"; }
blockquote:lang(en), cite:lang(en), q:lang(en) { quotes: "\0022" "\0022" "\0027" "\0027";}
blockquote:lang(es), cite:lang(es), q:lang(es) { quotes: "\00AB" "\00BB" "\0022" "\0022";}
blockquote:before, cite:before, q:before { content: open-quote;}
blockquote:after, cite:after, q:after { content: close-quote;}
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override;}
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override;}
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed;}
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed;}
@media print {
* {
font-family: "Times New Roman", Times, serif;
orphans: 2;
widows: 2;
page-break-before: auto;
page-break-after: auto;
page-break-inside: auto;
}
a { color: black;}
h1 { page-break-before: always;}
h1, h2, h3,
h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; page-break-after: avoid;}
ul, ol, dl { page-break-before: avoid;}
}
@media aural {
* {
volume: medium;
speechspeech-rate: medium;
voice-family: female;
pause: 0ms;
pitch: medium;
pitch-range: 50;
stress: 50;
richness: 50;
speak-punctuation: none;
speak-numeral: continuous;
speak-header: once;
}
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90;}
h1 { pitch: x-low; pitch-range: 90;}
h2 { pitch: x-low; pitch-range: 89 }
h3 { pitch: low; pitch-range: 70;}
h4 { pitch: medium; pitch-range: 60;}
h5 { pitch: medium; pitch-range: 50;}
h6 { pitch: medium; pitch-range: 40;}
li, dt, dd { pitch: medium; richness: 60;}
dt { stress: 8 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80;}
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50;}
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90;}
dfn { pitch: high; pitch-range: 60; stress: 60;}
s, strike { richness: 0;}
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50;}
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90;}
u { richness: 0;}
a:link { voice-family: harry, male;}
a:visited { voice-family: betty, female;}
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high;}
}
@media braille {
h1, h2, h3,
h4, h5, h6 { text-align: rightright; background: white; color: black;}
}

Si sabéis alguna técnica más podéis dejarla en los comentarios.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 28 | 4:36 PM
Resetear CSS para HTML5

¿Recuerdas esta gran lista sobre distintos modos de resetear CSS? Mediante estas CSS Reset podíamos resetear nuestro código CSS para optimizarlo. Pues ahora existe una únicamente orientada a HTML5. A esta nueva versión se le han añadido nuevos elementos y eliminado otros, que eran inservibles para HTML5. Os mostramos esta nueva forma de resetear CSS a continuación:

Quote
/*

html5doctor.com Reset Stylesheet

v1.4

2009-07-27

Author: Richard Clark - http://richclarkdesign.com

*/

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, dialog, figure, footer, header,

hgroup, menu, nav, section, menu,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

<a title="outline" href="http://www.cssblog.es/css-la-propiedad-outline/">outline</a>:0;

font-size:100%;

vertical-align:baselinebaseline;

background:transparent;

}

body {

<a title="line-height" href="http://www.cssblog.es/css-la-propiedad-line-height/">line-height</a>:1;

}

article, aside, dialog, figure, footer, header,

hgroup, nav, section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

border:0;

font-size:100%;

vertical-align:baselinebaseline;

background:transparent;

}

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted #000;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

Si lo deseas puedes descargarla desde Google Code.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 29 | 5:01 PM
Crear un listado A-Z con CSS

Siempre viene bien organizar nuestro contenidos. Hay muchas formas de organizarlo, mediante pestañas, menús, categorías… Otra forma clara y sencilla es poder organizarlo mediante un listado de la A a la Z. Aquí aprenderemos a crear un listado de este tipo para organizar mejor nuestro contenido, usando exclusivamente CSS con su respectivo HTML.

Es un listado parecido al que existe actualmente en la web de BBC. Si nos ponemos a mirar el código por encima, vemos una simple lista estilizada, y así es, tan simple como eso:

Código CSS
En el código CSS vemos una lista con disposición en bloque, con fondos en los items en posición normal y hover.

Quote
#azindex {
background: #75B9D0;
float: left;
margin: 5px 0 20px 10px;
padding: 0px 5px 15px 5px;
width: 520px;
}

* html #azindex {
padding: 5px 5px 10px 5px;
width: 490px;
}

#index {
font: bold 100% Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#index li {
float: left;
height: 2em;
list-style-type: none;
margin: 0.65em 0.3em;
padding: 0;
width: 3em;
}

* html #index li {
margin: 0.2em 0.2em;
}

#index a:link, #index a:visited {
background: #fff;
color: navy;
display: block;
height: 2em;
padding: 0.75em 0 0 0;
text-align: center;
text-decoration: none;
width: 3em;
}

#index a:hover {
background: #93D1E4;
color: #fff;
text-decoration: underline;
}

Código HTML
Una lista metida dentro de un div que define el ancho, color de fondo, los márgenes y paddings del bloque principal:

Quote
<div id="azindex">
<ul id="index">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#">etc</a></li>
<li><a href="#z">Z</a></li>
</ul>
</div>

Ejemplo de su funcionamiento

¿Les gusta?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 30 | 3:47 PM
Crear popups con CSS

Podemos crear popups con CSS de forma fácil para mostrar la información que deseemos enseñar pero que al mismo tiempo no tengamos que ir a otra página para verla.

Los protagonistas de este truco principalmente son la propiedad overflow, que hace que se muestre el elemento (visible) cuando el cursor se sitúa encima del texto y se oculte cuando dejemos de situarnos encima (hidden), y la propiedad z-index, que hará que la capa del popup se sitúe encima de los demás elementos.

  • Funciona en IE5.5+/Win, Moz, Op7+, Saf, IE5/Mac
  • No funciona en IE5.0/Win, Op6

    El código CSS para crear los popups sería así:

    Quote
    <style type="text/css">
    .nav {
    float: left;
    width: 13em;
    }
    .nav a {
    display: block;
    position: relative;
    color: #00f;
    background-color: #fcc;
    margin-bottom: 0.5em;
    padding: 0.5em;
    text-decoration: none;
    }
    /* aiuta IE/Mac (rel lh) \*//*/
    .linkinside {
    display: block;
    }
    /**/
    .nav a:hover {
    color: #c00;
    border-width: 0; /* IE */
    }

    #nav1 a .pop {
    display: block;
    color: #000;
    background-color: #fcc;
    width: 11em;
    padding: 0.5em;
    border: 0.5em #f00 solid;
    position: absolute;
    top: 0;
    left: 13.2em;
    z-index: 10; /* Saf */
    visibility: hidden;
    }
    #nav1 a:hover .pop {
    visibility: visible;
    }

    </style>

    Para que funcione correctamente en Internet Explorer debemos aplicar comentarios condicionales:

    Quote
    <!--[if lt IE 8]><style>
    /* In IE5.0/Win layout rovina popup, ma in 5.5 e 6 serve per hover su intero blocco
    (in 5.0 ok grazie a relative su 'a', in 5.5+ problemi 'interlinea') */
    .nav a {
    zoom: 1;
    }
    </style><![endif]-->

    El código HTML sería este:

    Quote
    <div><a name="a"></a><a name="b"></a><a name="c"></a></div>

    <div class="nav" id="nav1">
    <a href="#a">

    <span class="linkinside">Link number one</span>
    <span class="pop">
    This is a long explanation of link one, blah, blah, blah, ...
    </span>
    </a>
    <a href="#b">
    <span class="linkinside">Link number two Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
    <span class="pop">

    This is an explanation of link two, due, zwei, 2, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </span>
    </a>
    <a href="#c">
    <span class="linkinside">Link number three</span>
    <span class="pop">
    This is about link three, link three is a very interesting link, blah blah blah, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
    </span>
    </a>

    </div>

    Podemos ver un ejemplo de su funcionamiento.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • Búscar: