Tooltips con CSS: Más simple, imposible

Hay muchas formas de crear tooltips con CSS; probablemente, esta, que muestra webdesignerdepot.com es una de las más sencillas que existen ya que sólo se requiere establecer una clase en el enlace o etiqueta a la cuál queremos aplicarlas y poner las dos reglas de estilo.

En este caso, la clase la llamamos tooltip pero, puede ser cualquier otro nombre y funcionará en cualquier navegador que admita el uso de los pseudo-elementos :after y :before.

El formato gráfico es completamente configurable así que las variaciones pueden ser casi infinitas.

<style type="text/css">
  .tooltip {
    display: inline;
    position: relative;
  }
  .tooltip:hover:after {
    bottom: 26px;
    content: attr(title); /* este es el texto que será mostrado */
    left: 20%;
    position: absolute;
    z-index: 98;
    /* el formato gráfico */
    background: rgba(255,255,255, 0.2); /* el color de fondo */
    border-radius: 5px;
    color: #FFF; /* el color del texto */
    font-family: Georgia;
    font-size: 12px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 150px;
  }
  .tooltip:hover:before {
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    /* el triángulo inferior */
    border: solid;
    border-color: rgba(255,255,255, 0.2) transparent;
    border-width: 6px 6px 0 6px;
  }
</style>

Y se usaría así:

<a href="#" title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo</a>

un ejemplo

El texto que se mostrará es el que se encuentra en el atributo title de la etiqueta; si se quisiera utilizar otro atributo, bastaría cambiar la propiedad content; por ejemplo si se quiere usar rel o href sería:

content: attr(rel);
content: attr(href);

Hay que tener en cuenta que, dada su sencillez, el tooltip se verá "cortado" cuando se queire mostrar en algo que está muy a la derecha si el contenedor donde se encuentra la etiqueta tiene la propiedad overflow: hidden; algo bastante común en muchas plantillas de Blogger.

El NO misterio de posición absoluta

Cuando diseñamos una página web o simplemente agregamos etiquetas, estas se acomodan de manera natural, ya sea una al lado de la otra o bien una debajo de la otra, dependiendo del tipo que sean. El contenido fluye naturalmente, de arriba hacia abajo y de izquierda a derecha, tal como ocurre cuando escribimos o leemos.

Para modificar esa secuencia usamos distintas propiedades de CSS; les colocamos márgenes, cambiamos su tipo con display o las hacemos flotar.

De un tiempo a esta parte, se está empleando una nueva forma de posicionar "cosas" en la página, utilizando para ello la propiedad respectiva que se llama position y, que como toda propiedad de CSS, tiene un valor por defecto aunque no la definamos. Toda etiqueta tiene el valor static que no hace nada salvo decirle al navegador que esa etiqueta es "normal".

Las variantes que admite esa propiedad son tres: fixed, relative y absolute. Justamente, el uso de esta última es la que últimamente se está extendiendo porque es una forma bastante sencilla de ubicar elementos con cierta precisión pero, se suele ver que se usa de manera extraña o mejor dicho, sin tener en cuenta qué es o que hace y por lo tanto, cómo afecta al resto de las etiquetas.

Lo primero que debe tenerse en claro es que ´lo absoluto no existe y que toda posición absoluta es relativa a algo; ¿a qué? a la etiqueta que la contiene, sea la que sea ya que una página web no es otra cosa que un montón de etiquetas contenidas en otras etiquetas hasta llegar a la primera que es el body.

De este modo, si colocamos position:absolute; en una etiqueta cualquiera, el navegador la posicionará buscando "hacia atrás" la primera etiqueta que no tenga la propiedad position:static; y si no hay ninguna, tomará como referencia el body, es decir, la esquina superior izquierda de la ventana.

Este es el error más común, suponer que si algo tiene una posición absoluta, el navegador entenderá dónde queremos que se vea pero, los navegadores no piensan, sólo obedecen ordenes.

Tampoco es cierto que agregando esa propiedad, todo se resuelva porque por si sola no causa mayor efecto; en este ejemplo, el contenedor es "normal" y el contenido es absoluto y sin embargo, todo se muestra como si esta no existiera, el rectángulo se ve debajo el texto:

#contenedor {position:static;}

#contenido {position:absolute;}

Para que tenga algún efecto, debemos establecer también algunas de las propiedades que definen esa posición (left, top, right, bottom) ya que si no lo hacemos, esas propiedades son calculadas automáticamente; en el ejemplo anterior, el navegador me dice que left: es 67 y top es 414 aunque yo no lo haya escrito; si le digo que los coloque en cero, el rectángulo se moverá hasta colocarse en el ángulo superior izquierdo del primer contenedor que no tenga la propiedad position:static (que sea relative, absolute o fixed) que en el caso de esta entrada, es el DIV #main-wrapper:

click para probar

Justamente, el poder usar left, top, right y bottom para ubicar algo, es lo que hace de esta propiedad una forma sencilla de diseñar algo pero, si podemos posicionar un objeto de ese modo ¿para que agregar otras propiedades como margin y float?

Esto también es bastante común y debería evitarse. Si posicionamos algo de modo absoluto, los márgenes suelen ser innecesarios y las flotaciones, inútiles; esto:

#contenido {
  float: right;
  margin-right: 20px;
  right: 20px;
  top: 40px;
}

se puede simplificar y la regla sólo debería decir:

#contenido {
  right: 20px;
  top: 40px;
}

Veremos lo mismo asi que ¿para qué complicarse la vida?

Lo mismo puede decirse se display; salvo muy raras excepciones, es innecesario agregar esa propiedad en la regla.

Por supuesto, como la posición es absoluta, margin: 0 auto; no centra absolutamente nada; mucho menos lo hará text-align o el viejo atributo align. Si queremos centrar algo que tenga este tipo de propiedad, debemos conocer su ancho. Por ejemplo, en este caso, el rectángulo celeste tiene 200 pixeles de ancho y lo centramos usando left y un margen izquierdo negativo:

#contenido {
  left: 50%;
  margin-left: -100px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
}

Y con top lo podemos centrar verticalmente así que si el contenido es de 200x120, esto, lo centraría en ambos sentidos:

#contenido {
  left: 50%;
  margin-left: -100px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
}

click para probar

Múltiples fondos y efectos hover

Esta es una forma muy particular de utilizar fondos múltiples para crear efectos hover; algo que se le ocurrió a designshack.net donde la técnica está explicada en detalle.

Lo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades background) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:

#ejemplo {
  background-image: url(imagen_1), url(imagen_2);
  background-position: left 50%, right 50%;
  background-repeat: no-repeat;
  background-color: red;
}

la primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo "sobrante" será de color rojo.

Entendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con background-position, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo) y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).

#ejemplo {
  display: inline-block;
  height: 200px;
  width: 200px;
  transition: all 1s; /* con prefijos para los distintos navegadores */
  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);
  background-repeat: no-repeat;
  /* background-position: ???????; */
}

Para que esto funcione, un poco de aritmética. Si queremos que se "abra" horizontalmente:

background-position: -100px 0px, 100px 0px, 0 0;

y si queremos que se "abra" verticalmente:

background-position: 0 -100px, 0 100px, 0 0;

Y la regla del hover sería:

#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}

o bien:

#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}

Del mismo modo, agregando más fondos, se obtienen distintos efectos:

<style>
.hoverDot {
  display: inline-block;
  height: 200px;
  margin: 10px;
  width: 200px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#slidingDoors {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px 0px, 100px 0px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoors:hover {
  background-position: -200px 0px, 200px 0px, 0 0;
}

#slidingDoorsVert {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: 0 -100px, 0 100px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoorsVert:hover {
  background-position: 0 -200px, 0 200px, 0 0;
}

#breakApart {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
}
#breakApart:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
}

#twistAndShout {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}
#twistAndShout:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
  transform: rotate(0deg);
}
</style>

<div class="hoverDot" id="slidingDoors"></div>
<div class="hoverDot" id="slidingDoorsVert"></div>
<div class="hoverDot" id="breakApart"></div>
<div class="hoverDot" id="twistAndShout"></div>

Botones simples con CSS

Estos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.

En principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow

Además, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:

-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));

se transformaría en esto:

-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);

El HTML es genérico, se scribe siempre igual:

<a class="button white" href="#">ejemplo</a>

ejemploejemploejemploejemploejemploejemploejemploejemploejemploejemplo

Este es el CSS de uno de los botones:

.button { /* clase general */
  border: 1px solid #dedede;
  border-radius: 3px;
  color: #555;
  display: inline-block;
  font: bold 12px/12px HelveticaNeue, Arial;
  padding: 8px 11px;
  text-decoration: none;
}

.button.white{
  background: #f5f5f5;
  border-color: #dedede #d8d8d8 #d3d3d3;
  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
  color: #555;
  text-shadow: 0 1px 0 #fff;
  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: linear-gradient(top,  #f9f9f9, #f0f0f0);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
}

.button.white:hover{
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    text-shadow: 0 1px 0 #fdfdfd;
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);
    background: -o-linear-gradient(top,  #efefef, #f8f8f8);
    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);
    background: linear-gradient(top,  #efefef, #f8f8f8);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
}

Sí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.

REFERENCIAS:lab.tommasoraspo.com

Firefox 16: Sin prefijos en el CSS

A partir de la versión 16 de Firefox, ya resulta innecesario agregar prefijos en la mayoría de las propiedades de CSS3 que se utilicen en este navegador con lo cual, poco a poco, nos vamos acercando a la estandarización mínima que requiere el diseño web: hablar el mismo idioma.

Así el -moz- puede desaparecer de las propiedades animation, transition, transform y de las gradientes:

• animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes
• transition, transition-property, transition-delay, transition-duration, transition-timing-function
• CSS3 Transforms transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin
• CSS3 Image Values linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()

Es de esperar que la gente de Chrome haga lo mismo rápidamente y aliviarnos la tarea de estar tecleando y tecleando.

REFERENCIAS:hacks.mozilla.org

El atributo required

El atributo required es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser "llenado" y evitar que un formulario se envíe sin contenido.

Aunque la verificación final de los datos enviados desde un formulario debe ser hecha en el servidor que los procesará, siempre es bueno realizar una validación previa con JavaScript y así reducir los accesos y evitar el envío de datos vacíos o nulos.

leer artículo actualizado

Bordes, listas, el primero y el último

Esta es una solución sencilla a un problema común.

Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:

<div id="demobordes">
  <ul>
    <li>el primer item</li>
    <li>el segundo item</li>
    <li>el tercer item</li>
    <li>el último item</li>
</ul>

Entonces pruebo con una regla básica:

<style>
#demobordes li {
  background-color: #000;
  border-bottom: 2px dotted #ABC;
  border-top: 2px dotted #ABC;
  color: #888;
  padding: 5px 10px;
}
</style>

pero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas "gordos":

• el primer item
• el segundo item
• el tercer item
• el último item

Entonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:

• el primer item
• el segundo item
• el tercer item
• el último item

• el primer item
• el segundo item
• el tercer item
• el último item

Y como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso first-child:

#demobordes li {
  .......
  border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }

Y al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con last-child:

#demobordes li {
  .......
  border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }

Y con eso resuelvo el asunto:

• el primer item
• el segundo item
• el tercer item
• el último item

• el primer item
• el segundo item
• el tercer item
• el último item

One div: Iconos CSS

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>

<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

Una curiosidad: Logos de GMail con CSS3

Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.

Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.

.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}

Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.

Y si alguno cree que eso fue excesivo, es porque no vieron este otro:

     

CSSload: Gráficos de carga con CSS

CSSload es un sitio donde podemos generar "imágenes" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.

No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.

Ese código contiene dos partes, el estilo que es todo lo que está entre <style> </style> que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.

Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.

Ver/Ocultar otro ejemplo:

Flotaciones, fondos, problemas, alternativas

Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.

leer artículo actualizado

El problema de los menús que no se despliegan

Toda etiqueta es un rectángulo, si tiene un borde o un color de fondo esto es evidente pero, si no lo tiene, sigue siendo un rectángulo que ocupa un determinado espacio y se ubica en una determinada posición de la página. Esta es la clave de todo, entender eso y además, tener en cuenta que el orden en que son agregadas influirá en su resultado ya que, aunque las veamos ubicadas gráficamente de cierto modo, para el navegador, eso, sólo es un dibujito ya que todos ellos siguen una regla sencilla: para ellos, el orden natural es secuencial, de arriba hacia abajo y de derecha a izquierda.

Es cierto que pueden mostrarse de cualquier otro modo, para eso están las propiedades (float, position, margin, etc) pero, al navegador, no le interesan esos detalles y eso, justamente, es lo que puede crear conflictos o problemas.

Si toda etiqueta es un rectángulo real (tiene ancho y tiene alto aunque no los definamos) y armamos algo como esto, donde simplemente hay dos DIVs, uno arriba y otro abajo y al de abajo lo "subimos" un poco con un margen negativo, tal vez, dependiendo de las reglas de estilo que tengamos, el enlace que está allí, no funcionará. Si ponen el cursor encima y tratan de hacer click, no pasará nada, ni siquiera veremos la manito indicativa:

A B C D E F

un enlace

¿Por qué pasa esto? porque el de arriba está encima del enlace y, aunque es transparente, sus reglas de estilo TAPAN el enlace. Si le pusiéramos un color de fondo, lo veríamos claramente:
ver | restaurar.

¿Cómo se soluciona? Lo lógico sería repasar las reglas de estilo de esas etiquetas ¿No será que uno es demasiado alto y compensamos eso con márgenes negativos? ¿Es necesaria la propiedad position? Las respuestas pueden ser infinitas y no pretendo darlas, todo dependerá y, llegado el caso, siempre nos queda la opción de usar z-index. En este ejemplo, bastaría invertir el orden:

CORREGIR EL ERROR | ver error

Este mismo problema es el que genera muchísimas consultas sobre menús que no se despliegan aunque, en realidad, no es que no se desplieguen sino que no se ven desplegados.

Si tenemos un contenedor (un DIV) con ese menú que vimos armadito y lo agregamos al header de nuestro sitio, tal vez, dependiendo de dónde lo hayamos puesto y de las reglas de estilo del resto de nuestra página, se verá bien pero ¿no funciona?

• menu 1
• menu 2
  • submenu 2.1
  • submenu 2.2
  • submenu 2.3
• menu 3
  • submenu 3.1
  • submenu 3.2
  • submenu 3.3
• menu 4

Aliquam erat volutpat. Phasellus ligula augue, hendrerit sit amet pharetra et, auctor nec odio! Nunc placerat facilisis volutpat! Donec nisi elit, convallis nec vestibulum ac, aliquam quis magna! In aliquet arcu eget mi mollis at porta erat condimentum. Pellentesque congue ante non felis fringilla mattis. Morbi urna lectus; laoreet id tempor vitae, pretium id nibh. Sed nisl eros, molestie non luctus nec, pretium nec felis. Praesent pharetra egestas interdum. Quisque consequat placerat mi, in pharetra nisl mattis in. Aenean id orci vel enim ultrices eleifend!

¿Por qué sólo se ve un pedacito? Por el mismo motivo que el enlace del ejemplo anterior no funcionaba aunque, en este caso, no se trata de una etiqueta que es demasiado alta y tapa a la de abajo sino de una etiqueta cuya altura es escasa (UL LI) y que contiene otras que sólo se ven cuando se coloca el cursor encima pero, no tienen espacio suficiente ya que la etiqueta que está debajo (el texto), ocupa ese lugar así que queda encima del menú desplegado.

Otra vez, esto se resuelve con z-index:

CORREGIR ERROR | ver error

¿Y que es z-index? Un numero de orden que sólo se aplica a los elementos que tengan definida la propiedad position como relative, absolute o fixed y, dicho muy livianamente, indica cuál está encima de cuál; por defecto, se "apilan" en el mismo orden en que se encuentran en el código así que en este caso, la segunda (el texto) tiene un valor implícito de z-index, superior a la primera (el menú) y bastaría invertir ese orden para que el menú se viera desplegado.

Dependiendo del caso (he usado muchas veces la palabra depender porque nada de todo esto es una ciencia exacta) deberemos agregarle las propiedades z-index al menú y al div inferior (un valor más alto al menú); o bien, simplemente, sólo agregar la propiedad z-index al menú (una valor cualquiera, no hace falta poner valores exorbitantes):

#mi-menu {
  position:relative;
  z-index: 100;
}

Cinco selectores especiales

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

Muchas animaciones con CSS y mucha paciencia

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado

Esa cosa llamada child selector

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

marquee con CSS3

La marquees o marquesinas in spanish, son una forma de mostrar distinto contenido, desplazándolo en cierta dirección. En HTML es una etiqueta bastante sencilla pero carece de opciones sofisticadas y ese desplazamiento es relativamente abrupto y constante con lo que los textos no suelen ser muy legibles.

Con JavaScript es posible generar cosas similares y desplazar textos de distintos modos pero, hongkiat.com muestra una tercera opción que es generar marquees utilizando sólo CSS.

Claro, aparentemente, si uno lee "utilizando sólo CSS" se imagina que es más sencillito pero, lamentablemente, aunque la idea es sencilla, como se utilizan propiedades que aún no están unificadas en todos los navegadores, es engorroso andar escribiendo cada una de ellas, sobre todo, las que que definen las reglas de las animaciones.

De todos modos, acá vamos ...

El HTML donde colocaremos nuestra marquesina es simple, un DIV con cierta clase donde cada texto se incluye con una etiqueta P y si en el ejemplo uso dos clase simultáneamente es para poder controlar las dos variantes, una se moverá horizontalmente y otra, verticalmente:

<div class="marquee marqueeV">
<p> una línea de texto </p>
<p> otra línea de texto </p>
</div>

¿Por qué sólo pongo dos textos? Este sería el CSS genérico:

/* al contenedor lo dimesionamos tanto en su ancho como su alto */
.marquee {
  border: 1px solid #444;
  border-radius: 5px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}
/* cada párrafo */
.marquee p {
  color: #FFF;
  font-family: Tahoma, Arial, sans-serif;
  height: 100%;
  line-height: 50px;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);
  transform:translateX(100%);
}

Y ahora, la animación de cada una de las etqieutas P:

.marqueeH p:nth-child(1) {
  -moz-animation: left-one 20s ease infinite;
  -webkit-animation: left-one 20s ease infinite;
  animation: left-one 20s ease infinite;
}
.marqueeH p:nth-child(2) {
  -moz-animation: left-two 20s ease infinite;
  -webkit-animation: left-two 20s ease infinite;
  animation: left-two 20s ease infinite;
}

/* lo molesto es de tener que crear las animaciones para cada navegador */

/* Mozilla */
@-moz-keyframes left-one {
  0%{-moz-transform:translateX(100%);}
  10% {-moz-transform:translateX(0);}
  40% {-moz-transform:translateX(0);}
  50% {-moz-transform:translateX(-100%);}
  100%{-moz-transform:translateX(-100%);}
}
@-moz-keyframes left-two {
  0% {-moz-transform:translateX(100%);}
  50% {-moz-transform:translateX(100%);}
  60% {-moz-transform:translateX(0);}
  90% {-moz-transform:translateX(0);}
  100%{-moz-transform:translateX(-100%);}
}

/* Chrome/Safari */
@-webkit-keyframes left-one {
  0% {-webkit-transform:translateX(100%);}
  10% {-webkit-transform:translateX(0);}
  40% {-webkit-transform:translateX(0);}
  50% {-webkit-transform:translateX(-100%);}
  100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-two {
  0% {-webkit-transform:translateX(100%);}
  50% {-webkit-transform:translateX(100%);}
  60% {-webkit-transform:translateX(0);}
  90% {-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(-100%);}
}

Donde, la velocidad es controlada por el valor indicado en:

animation: left-two 20s ease infinite;

usando animaciones para crear "marquees" con estilo ...

cada item se encuentra en una etiqueta <p></p>

Animarlo verticalmente es similar, hay que cambiar la clase y luego, crear cada una de las reglas:

<div class="marquee marqueeV">
  .......
</div>

usando animaciones para crear "marquees" con estilo ...

esta otra se mueve verticalmente

.marqueeV p {
  -moz-transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
}
.marqueeV p:nth-child(1) {
  -moz-animation: down-one 20s ease infinite;
  -webkit-animation: down-one 20s ease infinite;
  animation: down-one 20s ease infinite;
}
.marqueeV p:nth-child(2) {
  -moz-animation: down-two 20s ease infinite;
  -webkit-animation: down-two 20s ease infinite;
  animation: down-two 20s ease infinite;
}
@-moz-keyframes down-one {
  0%{-moz-transform:translateY(-100%);}
  10% {-moz-transform:translateY(0);}
  40% {-moz-transform:translateY(0);}
  50% {-moz-transform:translateY(100%);}
  100%{-moz-transform:translateY(100%);}
}
@-moz-keyframes down-two {
  0% {-moz-transform:translateY(-100%);}
  50% {-moz-transform:translateY(-100%);}
  60% {-moz-transform:translateY(0);}
  90% {-moz-transform:translateY(0);}
  100%{-moz-transform:translateY(100%);}
}
@-webkit-keyframes down-one {
  0% {-webkit-transform:translateY(-100%);}
  10% {-webkit-transform:translateY(0);}
  40% {-webkit-transform:translateY(0);}
  50% {-webkit-transform:translateY(100%);}
  100%{-webkit-transform:translateY(100%);}
}
@-webkit-keyframes down-two {
  0% {-webkit-transform:translateY(-100%);}
  50% {-webkit-transform:translateY(-100%);}
  60% {-webkit-transform:translateY(0);}
  90% {-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(100%);}
}

Transiciones en gradientes

Aunque las transiciones con CSS pueden aplicarse a muchas propiedades pero no a las gradientes aunque, como estas son "imágenes de fondo" lo que puede hacerse es aplicar esas transiciones sobre otras propiedades background y de tal modo, simular animaciones.

Los ejemplos de impressivewebs usan dos propeidades especiificas: background-size y background-position pero, podría probarse con cualquier otra y ver qué sale.

<a href="#" class="botonT ejemplo2">ejemplo #1</a>

Todo se reduce a un enlace donde hay dos clases, la primera (botonT ) es general, establece las mismas propiedades de todos los ejemplos:

.botonT:link, .botonT:visited {
  border: solid 2px rgba(0,0,0,0.2);
  border-radius: 10px;
  color: #FFF;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 200px;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

La segunda es exclusiva de cada uno de ellos:

ejemplo #1

.ejemplo1:link, .ejemplo1:visited {
  background: #38B;
  background: -moz-linear-gradient(#38B, #22B);
  background: -webkit-linear-gradient(#38B, #22B);
  background: -o-linear-gradient(#38B, #22B);
  background: -ms-linear-gradient(#38B, #22B);
  background: linear-gradient(#38B, #22B);
  background-repeat: repeat;
  -moz-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
}

.ejemplo1:hover, .ejemplo1:focus, .ejemplo1:active {
  background-position: 0 -120%;
}

ejemplo #2

.ejemplo2:link, .ejemplo2:visited {
  background: #ABC;
  background: -moz-radial-gradient(#ABC, #456);
  background: -webkit-radial-gradient(#ABC, #456);
  background: -o-radial-gradient(#ABC, #456);
  background: -ms-radial-gradient(#ABC, #456);
  background: radial-gradient(#ABC, #456);
  -moz-background-size: 100% 10%;
  -webkit-background-size: 100% 10%;
  background-size: 100% 10%;
}

.ejemplo2:hover, .ejemplo2:focus, .ejemplo2:active {
  background-position: 0 0;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

ejemplo #3

.ejemplo3:link, .ejemplo3:visited {
  background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background-position: center center;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.ejemplo3:hover, .ejemplo3:focus, .ejemplo3:active {
   -moz-background-size: 100% 200%;
   -webkit-background-size: 100% 200%;
   background-size: 100% 200%;
}

Los pseudo-elementos first-letter y first-line

El pseudo-elemento :first-letter permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.

Los pseudo-elementos seleccionan alguna parte de un elemento y su sintaxis es similar a las pseudo-clases aunque a veces, en lugar de usar un carácter dos puntos se utilizan dos.

leer artículo actualizado

Transiciones y paneles deslizantes

Aunque es algo experimental, la idea del diseñador Sergio Camalich es válida y tal vez muestre una alternativa en el uso de las transiciones entre páginas usando sólo CSS sobre la que habrá que seguir trabajando.

Los ejemplos pueden verse en estos demos 1 2 3 y acá veremos si son aplicables a una entrada cualquiera del blog con las limitaciones del caso.

En este ejemplo, coloco todo en un DIV al que debo darle una dimensión precisa; en el ejemplo original eso se resuelve agregando overflow: hidden al body de la página y haciendo que la página tenga siempre una altura precisa de tal modo que no se vea el efecto indeseado del salto que se produce cuando se usa target, algo que acá es inevitable (o no tengo la menor idea si hay alguna forma de evitarlo).

inicio

Nunc nulla purus, malesuada ut vehicula et, suscipit sit amet eros? Duis lacinia luctus erat; nec venenatis nibh lobortis in.

Morbi tempor quam ac nibh sollicitudin rutrum. Sed ornare pretium libero vel viverra. Pellentesque tincidunt purus nulla, ullamcorper mattis risus. Maecenas commodo; massa a adipiscing lacinia, arcu nibh vulputate turpis, sit amet tristique enim ligula sit amet quam. Sed id eros diam; nec sagittis nisl.

Praesent ultrices, dui at egestas dictum posuere.

Cras cursus nulla nec enim euismod posuere. Cras eu leo et lorem dignissim commodo non at enim. Quisque consequat nisl id metus tempor bibendum. Proin eget dolor turpis. Curabitur vitae est erat.

imágenes

• 
• 
• 
• 
• 
• 

otra más

Ut nec nibh quis sapien congue sagittis sit amet at lorem? Nam tellus purus; suscipit non imperdiet in, lobortis sed odio. Proin eget odio non nibh semper massa nunc.

última

Donec elementum scelerisque massa, at accumsan orci fringilla sed. Nunc sed leo at turpis consequat accumsan. Maecenas non augue ac felis varius facilisis. Pellentesque interdum pharetra vestibulum!

seleccionar

• inicio
• imágenes
• otra más
• última

El HTML tiene esta estructura:

<div id="pageTrans">

  <!-- el contenido de cada uno de los "paneles" -->
  <!-- el primero (el visible) es levemente distinto al resto -->
  <div id="panel1" class="content">
    <h4>PANEL 1</h4>
    <!-- cualquier contenido -->
  </div>

  <!-- los otros (los ocultos)  tienen la misma estructura -->
  <div id="panel2" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel3" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel4" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>

  <!-- la navegación a la izquierda -->
  <div id="selector">
    <h5> seleccionar </h5>
    <ul id="navigation">
      <li><a id="link-panel1" href="#panel1"> texto 1 </a></li>
      <li><a id="link-panel2" href="#panel2"> texto 2 </a></li>
      <li><a id="link-about" href="#about"> texto 3 </a></li>
      <li><a id="link-contact" href="#contact"> texto 4 </a></li>
    </ul>
  </div>

</div>

Y ahora el CSS que es donde hay que trabajar y ersonalziar proque todo depende de esas reglas:

<style>
  #pageTrans { /* elcontenedor */
    height: 490px;
    margin: 0 auto;
    position: relative;
    width: 580px;
  }

  /* la navegación izquierda */
  #selector {
    position: absolute;
    top: 20px;
    width: 135px;
    z-index: 2000;
  }
  #selector h5 { /* el texto "seleccionar" del ejemplo */ }
  #navigation {
    display: block;
    list-style: none;
    margin: 10px 0 0;
    z-index: 3;
  }
  #navigation a {
    border: 1px solid #FFFF;
    box-shadow: 0 0 15px #FFF inset;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 45px;
    margin: 0 0 10px;
    padding: 0 10px;
    text-align: center;
    text-transform: uppercase;
  }
  #navigation a:hover { background: Crimson; }

  /* las reglas de los paneles */
  .content {
    left: 180px;
    position: absolute;
    top: 0;
    width: 400px;
  }
  .content h4 { /* el título de cada panel */ }
  .panel {
    -moz-transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-color: #101921;
    height: 100%;
    margin-left: -610px;
    position: absolute;
    width: 580px;
    z-index: 2;
  }
  .panel:target { margin-left: 0px; }

</style>

Listas y bullets

Cuando se crean listas HTML, por defecto, estas incluyen un bullet (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad list-style-type cuyos valores básicos son disc y decimal respectivamente. Si no queremos que se vean, usamos el valor none y desaparecen.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

Una característica de las listas es que ese bullet o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente "grande" o cierto color, esas propiedades también se aplican a la "decoración" por lo tanto, de modo normal, no es posible diferenciarlas:

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:

::-moz-list-bullet permite establecer el estilo del bullet de las etiquetas LI en una lista desordenada (UL)
::-moz-list-number permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)

Por ejemplo:

ul li {color: #FFF; font-size: 16px;}
ul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}
ol li {color: #FFF; font-size: 16px;}
ol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:

<li><span>item 1</span></li>

Y crear reglas de etilo diferentes:

ul li {color: Yellow; font-size: 25px; line-height: 0.9;}
ul li span {color: #FFF; font-size: 16px;}
ol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
ol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5