Duplicamos esta capa. Con el Marco Rectangular seleccionamos una porción de esta última capa y suprimimos esta parte. Sleccionamos la capa que habíamos copiado. Invertimos la selección (Selección>Invertir) y suprimimos la parte ahora seleccionada.

Le aplicamos los siguientes estilos a la capa que se encarga de la parte superior (doble click en la capa en la ventana de capas)

Creamos una nueva capa. Hacemos control+click encima de la capa que se encarga de la parte superior – en la ventana de capas. Esto hará que se haga una seleción entorno a esta. Con la herramienta de Degradado en modo radial y de color blanco a transparente clickamos dentro de la selección y sin soltar el click ajustamos el degradado a nuestro gusto. Ajustamos la opacidad de la capa al 25% (en la ventana de capas)

Añadimos una línea de texto de color #21833f. Yo he escogido Delicious como fuente, a 45pt. Podemos hacer más de una línea de texto, pero siempre en capas distintas. Luego a estas capas les damos el siguiente estilo:

Llegados a este punto tenemos algo así:

Ahora vamos a hacer el logo en una nueva capa. Empezamos creando una base con la herramienta Rectángulo redondeado (con un rádio de 8px) de color #b12a17. Con la herramienta Marco rectangular seleccionamos la parte de abajo y la suprimimos.

Ahora le añadimos el siguiente estilo de capa.

Y ahora añadimos el texto del logo, en color blanco, y le añadimos el siguiente estilo a la capa:

En una nueva capa, con la herramienta línea hacemos dos segmentos, el de arriba oscuro y el de abajo blanco. En otra capa (ajustamos su opacidad al 15%) hacemos un degradado lineal de negro a transparente. Por los lados lo suavizamos con la herramienta Borrador.

Con la herramienta Rectángulo redondeado (con un rádio de 8px), marcamos la área donde se mostrarán trabajos que ya hemos hecho (a la derecha del texto que añadimos anteriormente). Clickando encima de la capa donde hemos hecho la forma, se selecciona esta área que suprimimos de la superficie verde con la que hábíamos estado trabajando antes:

Ahora importamos la imagen de alguna página que ya hayamos hecho y la escalamos a un tamaño un poco superior al de la selección. Inverimos la selección (Sleección>Invertir) y suprimimos esta parte de la imagen importada. Luego añadimos el siguiente estilo a la capa:

Debe quedarnos algo así:

El siguiente paso es añadir una barra de navegazión horizontal. En una capa con la opacidad al 5% añadimos un texto de color blanco a 22pt como el siguiente:

Para continuar vamos a trabajar con  la superficie blanca que creamos al principio del tutorial. A la capa que contiene esta superficie le agregamos, en estilo de capa, un trazo de 1px de color negro al 70% de opacidad. En una nueva capa, por encima de la que contiene esta superficie, creamos una línea blanca de 1px y en otra capa un degradado lineal de negro a transparente. La capa del degradado la ajustamos al 10% de opacidad.

Ahora añadimos algo de texto. Para los títulos seguimos utilizando Delicious, para el texto general Trebuchet. Además podemos añadir algunos iconos como los de Function y algunas líneas para separar contenidos.

Para hacer el footer vamos a utilizar una vez más la herramienta Rectángulo redondeado (con un rádio de 8px). Copiamos el estilo que habíamos utilizado para hacer la superficie verde y lo pegamos en esta capa. Creando capas encima y con degradados de blanco a transparente creamos los efectos de luz deseados (opcional).

Ahora podemos añadir algún texto y algún icono en el footer. Podemos utilizar el estilo de capa del texto del header.

Para acabar vamos a añadir algunos brillos y sombras. Con la herramienta Degradado radial (de blanco a transparente), hacemos uno debajo del logo. Otra vez con la herramienta Degradado (esta vez de negro a transparente), hacemos una sombra debajo del footer.

Ajustamos la opacidad de estas capas al 30% o 40% y HEMOS ACABADO!

(click para ampliar)

Descarga el PSD

Esta vez voy a ser un poco malo… No voy a colgar el PSD hasta que haya 5 Tweets sobre esta entrada o esté en Meneame. Lo siento!

Un sprite es una imagen imagen grande que contienen a su vez varias imágenes pequeñas. Gracias a la propiedad background-position de CSS podemos utilizar solo una parte de la imagen en el fondo. Así, podemos tener una imagen para todos los iconos del home o una para todas las imagenes de un menú.

¿Por qué molan?

La diferencia entre usar muchas imagenes o una sola que las contenga a todas es el número de peticiones. No se tarda lo mismo en cargar dos archivos de 10kb que uno de 20kb, ya que en el primer caso se hacen dos peticiones y en el segundo solo una. Cada petición augmenta el tiempo de carga y la transferencia.

Por otra parte, con otros sistemas la imagen no se carga hasta que no es requerido, haciendo que haya un intérvalo de tiempo en que no se muestra ninguna imagen. Por ejemplo, hay botones que cambian la imagen al pasar por encima a los que les pasa esto. Con este sistema como son partes de una misma imagen, podríamos decir que se cargan todas a la vez.

¿Como se utilizan los CSS Sprites?

La Imagen

Lo primero que haremos será coger todas las imagines que queremos utilizar y juentarlas en una sola. En nuestoro ejemplo vamos a hacer tres botones que cambirán de imagen cuando pasemos por encima. Por tanto necesitaremos dos imagenes para cada uno de los tres botones – un total de seis imagenes dentro de nuestro sprite.

El HTML

Vamos a centrarnos en el boton de “Suscríbete por Email”, que nos servirá de ejemplo general. Lo único que necistaremos en nuestro HTML será:

<div id="btn_email"><a href=”#”><img class="click" src="transp.gif" /></a></div>

El div será el que tendrá el sprite de fondo. Como queremos que al clickar el botón se abra una página web y sin Java Script no podemos crear un link en un div, insertamos una imagen transparente en el div que enlazará la página deseada. Esta imágen transparente no tiene que medir lo que mida el botón, sino que tiene que ser pequeña.

El CSS

Como hemos dicho, modificaremos el background-position en el css para utilizar la parte de imagen que deseemos. Para empezar vamos a determinar el ancho y la altura del botón, vamos a insertarle el fondo y vamos a posicionarlo:

#btn_email {
width: 155px;
height: 35px;
background: transparent url('sprite.png') no-repeat -170px 0;
}

Ahora lo que hacemos es modificar la posición del fondo para cuando el cursor esté encima del div:

#btn_email:hover {
background-position:-170px -36px;
}

Para acabar vamos a hacer que la imagen transparente que nos permitía clickar ocupe todo el ancho y toda la altura. Es tan fácil como darle las sigueintes propiedades:

.click {
width: 100%;
height: 100%;
}

Como detalle, me gustaría añadir que es posible que salga un borde de puntitos al clickar en la imagen. Podéis hacer que no se muestre añadiendo esto en el CSS:

:focus {
outline: 0;
}

Demo y Descarga

Descargar el PSD

Demo

Es verdad que tenemos font-face en css, pero no funciona en Firefox anteriores a la versión 3.5 ni en Explorer. Hasta hace poco esto solo se podía solucionar con lo que se llamó sIFR, algo complejo y basado en flash – por lo que no lo recomiendo para nada. Afortunadamente ha nacido Cufón, una solución que se basa en javascript y es basatante rápida y sencilla.

Generar un js de la fuente

Ya sé que suena raro, pero no es para tanto. Lo primero que tenemos que hacer es generar un js. a partir de la fuente que hemos de tener (sí, tenemos que tener el archivo ttf o el otf). No hace falta ni que entendamos que es ni como se hace ya que hay un generador que se encarga de hacer esto por nosotros.

Una vez en el generador podemos seleccionar los diferentes opciones. Por una parte podemos subir las diferentes versiones de la fuente que vayamos a utilizar. No subas más de lo necesario, ya que cada añadido hace que el archivo pese más y por consiguiente nuestra página tardará más en cargar. Yo recomiendo:

• Uppercase
• Lowercase
• Numerals
• Punctuation
• and also these single characters: áéíóúñ

Las demás opciones son pan comido para los lectores de tinnta ;)

Añadir el código a nuestra página

Primero descargamos el código javascript que se encarga de hacerlo todo clickando download en esta página.

Ahora, en el header de nuestro html insertamos el siguiente código:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Delicious_700.font.js" type="text/javascript"></script>

Gracias a estas dos líneas de código podremos trabajar con los archivos que hemos descargado – en nuestro caso estarán en una carpeta llamada “js” que estará en el mismo directorio que nuestro archivo html.

Ahora es el momento de decir que queremos hacer con todo ese código que emos importado. En nuestro caso vamos a usar la fuente para los h1. Insertaremos este código.

<script type="text/javascript">
	Cufon.replace('h1');
</script>

Y esto es todo. Podéis ver el ejemplo aquí.

Animar la página 404 que hicimos hace poco en este blog. Lo que queremos que ocurra es lo siguiente:

• Que el cuadro de mensaje caiga desde arriba hasta su posición.
• Que el texto de “Página no encontrada” parpadee dos veces.
• Que las nubes del cielo se muevan lentamente.

HTML y CSS

Usaremos los que hicimos en el screencast con una pequeña modificación. Como queremos que las nubes se muevan vamos a tener que separarlas de la imagen de fondo del documento. Por lo tanto tendremos una imagen para el fondo (sin nubes) y otra con las nubes. Las nubes apareceran en un div después de la etiqueta <body>:

<div id="cielo"></div>

Y su estilo en la hoja css será:

#cielo {
width: 100%;
height: 300px;
margin-bottom: -300px;
background: transparent url('img/cielo.jpg') no-repeat center 0;
z-index: 10;
}

jQuery

Empezamos repasando la teoría:
Todo el código, que se ejecutará cuando se haya cargado el documento, irá dentro de estas líneas:

$(document).ready(function (){
// Aquí va todo el código
});

Para dar estilo a un div con css (se modificará el que se le haya dado en la hoja de estilo), se utiliza el código como el siguiente:

$('#id').css({
// Nuevos valores
});

Y para animarlo de una manera personalizada se sigue el siguiente esquema:

$('#id').animate({ Valores finales }, “velocidad”, callback);

Para animar el fondo, por ejemplo, usaremos un código así:

$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);

Primero hemos definido el estilo inicial, en el que el fondo de #cielo está desplazado 1500px hacia la izquierda, y luego hemos dicho que en 100 segundos (100000ms) queremos que el fondo pase a estar 1300px hacia la derecha. Si os fijáis, en el animate se ha suprimido $(‘#cielo’), ya que ya estábamos trabajando con el.

Para el cuadro de mensaje hacemos más de lo mismo. Primero definimos que queremos que tenga un margen superior negativo muy grande para que quede fuera de la pantalla. Luego lo animamos de tal manera que se coloca donde queremos:

$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
.animate({ marginTop: '75px',}, 1000, function(){});

Si queremos trabajar con más de un div ponemos && entre los dos. Así trabajamos con un grupo formado por los dos. La diferencia respecto al cielo es que vamos a encadenar diferentes animaciones. Para hacerlo se usa el callback, que es una función que se inicia cuando acaba la animación. En este caso la función no contiene nada.

Lo que haremos será hacer que cuando el cuadro esté en su sitio el texto de página no encontrada se desvanezca. Con jQuery esto es tan fácil como usar como esto:

$('.noencontrado').fadeOut('fast')

Encadenando unas cuantas veces fadeIn (aparecer) y fadeOut (desaparecer) junto con la caída del cuadro de mensaje tenemos lo siguiente:

//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
});    });    });    });

Ahora hacer que el código del cielo y este se ejecuten cuando el documento esté cargado. El código resultante son 10 simples líneas de código jQuery:

$(document).ready(function (){
// Animaci—n fondo
$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);

//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
});    });    });    }); });

Demo y Descarga

Descargar

Demo

Convertir un menú horizontal de un solo nivel en uno de varios niveles. Queremos que al pasar por encima de un ítem del primer nivel se vea un cuadro con las subcategorías. Tomaremos como base el menú del antiguo tutorial sobre menus con css, aunque no es imprescindible haberlo leído.

El HTML

Recordemos que el código que teníamos era este:

<div id="contenido">
 <div class="menu">
 <div id="menu_i"></div>    <div id="menu_d"></div>
 <ul>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Tutoriales</a></li>
 <li><a href="#">Tips</a></li>
 <li><a href="#">Freebies</a></li>
 <li><a href="#">Foro</a></li>
 </ul>
 </div><!-- fin Menu -->
</div><!--  fin Contenido -->

Vamos a añadir las subcategorías del menú. Para hacerlo, vamos a crear una lista dentro de otra lista. Dentro de las etiquetas <li> y </li> a las que van a pertenecer las subcategorías, después del link que finaliza con </a> insertamos otras etiquetas de <ul> y dentro de ellas los distintos ítems entre etiquetas <li>. Tenemos algo así:

<div id="contenido">
 <div>
 <div id="menu_i"></div>    <div id="menu_d"></div>
 <ul>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Tutoriales</a>
 <ul>
 <li><a href="#">Clasicos</a></li>
 <li><a href="#">Screencasts</a></li>
 <li><a href="#">Tips</a></li>
 </ul>
 </li>
 ...
 </ul>
 </div><!-- fin Menu -->
</div><!--  fin Contenido -->

Para las flechitas que salen encima de cada menu desplegable hemos añadido <span></span> al principio de cada submenu, en el código anterior sería después del <ul> de la línea 7.

El HTML fácil ¿verdad? Vamos a por CSS que es un poco más complicado…

El CSS

Antes de empezar con lo de hoy vamos a modificar dos cositas del ejemplo anterior:

1. En vez de usar display inline para alinear los ítems de la lista (li) usaremos el float left. El resultado es el mismo, pero hace que luego los submenus salgan en su sitio.

.menu li {
 float: left;
}

2. A causa de esto, la altura del menu (.menu) se ve reducida. Se podría solucionar con un clear both, aunque nosotros simplemente definiremos la altura con height.

.menu {
 height: 70px;
}

Dicho lo dicho vamos a por lo importante. La bases de este menú van a ser:

• La propiedad display que nos va a permitir hacer desaparecer un elemento de la página (none) o hacerlo aparecer (block).
• Podemos acceder de la siguiente forma a los estilos que hay  dentro de otro estilo cuando pasamos por encima de este último:

.menu ul li:hover ul {...}

El estilo que pongamos entre las dos llaves afectará al último ul cuando el ratón pase por encima del li que lo contiene.

Combinando esto podemos hacer que por defecto el display de .menu ul li ul sea none – es decir, que los submenus por defecto no se vean – pero que cuando pasemos por encima de un ítem de la primera lista aparezca este submenu – el display será block. Nos queda algo así:

.menu ul li ul {
display: none; /* De lo que hablábamos */
background: #cac99e ;
padding: 10px 0;
position: absolute; /* Muy importante */
margin: -12px -20px; /* Lo colocamos donde queremos */
.margin: 69px -170px; /* Hacks para colocarlo bien en ie */
_margin: 69px -170px;
}

.menu ul li:hover ul {
display: block;
}

Como hemos hecho que los li de .menu se alineen con float left, la lista del submenú también se alineeará. Para hacer que cada ítem salga en una línea usaremos float none.

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

Para la flecha de arriba emos usado <span></span> en el html. El código css es realmente sencillo: le damos un alto, un ancho, un fondo y posicionamos.

.menu ul li ul span {
background: url('img/flecha.png');
margin: -20px 50px;
width: 20px;
height: 10px;
position: absolute;
}

Y esto es más o menos todo. Lo demás son detalles que podéis ver descargandos el código. Cualquier duda o comentario, abajo tenéis un formulario, ¡Animaros! Si os ha gustado el tutorial acordaros de suscribiros al feed o seguirme en twitter.

Demo y Descarga

Descargar

Demo

Reproducir

Reproductor más grande

Vista Previa

Demo y Descarga

Descargar

Demo

Si hacéis algun proyecto con 960gs me gustaría verlo, podés dejar un enlace en los comentarios. Acordaros de suscribiros al feed y/o al twitter de Tinnta.

Objetivo

Que cuando pasemos por encima de un icono aparezca una burbuja informativa animada mediante jQuery. Podéis ver la demo.

El HTML

El archivo html es realmente simple. Consta de cuatro divs. Uno será el que contendrá el tooltip y el icono (que a su vez serán un div cada uno) y otro para el footer.

<div id="contenido">
<div class="tooltip">
<h2>Bienvenid@ a casa</h2>
<p>Jack Bach te ha enseñado a hacer espectaculares tooltips con jQuery, totalmente customizables ¡Para que tus diseños sean exactamente como tu quieres!</p>
<p>Si te ha gustado el tutorial, puedes encontrar muchos más en el blog, <b>Tinnta.com</b>, y suscribirte al feed.</p>
</div><!-- fin tooltip -->
<div id="icono"></div>
</div><!-- fin contenido -->
<div id="footer">
Icono de <a href="#">Softfacade</a> para <a href="#">SmashingMagazine</a> | Código por Jack Bach para <a href="http://www.tinnta.com">Tinnta</a>
</div><!-- fin footer -->

Lo importante es acordarse de llamar la librería de jQury (que podéis descargar aquí) y al archivo java que se encargará de toda la animación. Són estas dos líneas que hace falta insertar entre las etiquetas de <header>:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/tooltips.js"></script>

El CSS

El css es un poco más complejo ya que tenemos que pensar en que luego sea compatible  con jQuery – lo bueno de seguir los standars es esto, que luego puedes interactuar con otros lenguajes. Esta vez, como el tutorial no tiene como objetivo el css y no quiero alargar demasiado el post me voy a saltar toda la parte obvia (body, h2, párrafo y footer). Si alguien tiene alguna duda la puede preguntar en los comentarios.

Para empezar, al div #contenido le vamos a definir un ancho de 275px (lo que mide el icono) y lo vamos a centrar:

#contenido {
width: 275px;
margin: 0 auto;
}

Vamos a por el tooltip. Por una parte le ponemos de fondo una imagen de la burbuja, le determinamos el ancho y el alto y le damos un padding para que el texto quede dentro de la imagen.

.tooltip {
background: transparent url('img/tooltip.png') no-repeat;
width: 290px;
height: 300px;
padding: 30px 60px;
...

Hasta aquí todo bien, lo interesante viene en las siguientes líneas. Por una parte vamos a hacer que se colque en la parte superior izquierda del div en que se encuentra sin tener encuenta nada más de lo que haya en este div que lo contiene. Esto se hace dandole posotion absolute. Así tenemos el control de .tooltip sin molestarnos por ver como le afectan los demás elementos de la página. Luego vamos a colocarlo donde queremos ajustando los margenes.

...
position: absolute;
margin: 55px -70px;
...

Si tenemos en cuenta la vista previa, vemos que el tooltip tapa el icono el icono – está encima. Pero si nos fijamos en el HTML, el tooltip aparece antes que el icono, por tanto, en una situación normal el segundo taparía al primero ya que es el que sale más tarde en el código. Para arreglar esto existe la propiedad z-index. Esta puede tomar un valor numérico, siendo 1 la capa superior – que tapa a las demás – y tapando las etiquetas que tomen el valor 2, 3, 4…

...
z-index: 1;
...

Como lo que queremos es que al principio no se vea el tooltip, vamos a darle a la propiedad display el valor none. Además vamos a hacer que su opacidad sea 0. Hace falta tener en centa que si solo pusiésemos la opacidad a 0, el texto del tooltip seguiría siendo seleccionable aunque no se viera.

...
display: none;
opacity: 0;
filter: alpha(opacity = 0); /* Para el señor IE*/
-moz-opacity:0; /* Para los firefox de la edad de piedra */
}

El icono es mucho más sencillo. Por una parte le ponemos el fondo deseado y le damos valores al ancho y a la altura (los que mide la imagen). Luego le aplicamos el position absolute, así a la hora de posicionarlo con los márgenes no se ve afectado por el tooltip. Esto es muy importante, ya que al ir jugando con hacer aparecer y desaparecer el tooltip, si el margen fuera relativo a los demas objetos se iría moviendo. De esta manera lo tenemos fijo.

#icono {
background: transparent url('img/icono.png') no-repeat;
height: 215px;
width: 275px;
position: absolute;
margin:350px auto;
}

Introducción a jQuery

Lo que ahy que tener claro es que todo el código, que se ejecutará cuando se haya cargado el documento, irá dentro de estas líneas:

$(document).ready(function (){
  // Aquí va todo el código
});

También hace falta saber que lo que esté entre las siguientes líneas se ejecutará cuando el puntero del ratón esté encima de el div que digamos (en nuestro caso sera #icono):

$('#icono').mouseover(function (){
  // Aquí va el código
});

Y el código que va entre las siguientes líneas se ejecutará cuando el puntero salga de la zona del div:

$('#icono').mouseover(function (){
  // Aquí va el código
});

Además hace falta conocer las siguientes estructuras. Para dar estilo a un div con css (se modificará el que se le haya dado en la oja de estilo), se utiliza el código como el siguiente:

$('____').css({
  top: 0, // Los numeros no llevan comillas
  display: 'block', // Las palabras sí
  opacity: 0, // Y fijaros que no se pone punto y coma sino una coma
});

Y para animarlo de una manera personalizada se sigue el siguiente esquema:

$('____').animate({_____}, “velocidad”, callback);

En la primera parte dentro de las propiedades del animate, entre las llaves, damos el estilo final del css. Así podemos hacer que se mueva modificando los margins, que cambie su opacidad, que cambie de dimensiones, que se mueva su fondo..
Pasará de los valores que tenía en el css a los nuevos que se le den, y para definir la velocidad podemos pooner un valor numérico (en milisegundos) o ‘slow’, ‘normal’ o ‘fast’.

El callback nos permite ejecutar una funcion cuando se haya acabado la animación. Un ejemplo de como quedaría:

$('____').animate({
  top: '20px',
  opacity: 1,
}, 'normal', function (){
  ocupado = 0;
});

Y ya está casi todo. Solo hace falta añadir que se pueden utilizar estructuras como la de if (si alguien todavía no la controla no creo que haya llegado aquí; si es así se explica aquí).

El jQuery

Vamos a aclarar que es lo que queremos. Cuando se cargue el documento queremos que si pasamos por encima de #icono aparezca .tooltip con una opacidad 0 y que se anime hasta subir 20 px y llegue a una opacidad de 1. Cuando el puntero salga de #icono, queremos que .tooltip se anime de manera que suba 50 px más y que su opacidad pase a ser cero. Luego que desaparezca .tooltip y se situe en su posición inicial. Con esto ya nos podemos imaginar cómo será el código.

Hace falta añadir una variable que llamaremos ocupado. Al principio le daremos el valor 0 (no está ocupado). En el momento que se pase por encima de #icono se comprobará que ocupado esté en 0. Si es así se le dará valor 1 a ocupado y se pasará a hacer todo lo que habíamos planeado. Cuando acabe de hacerlo se le vuelbe a dar valor 0 a ocupado. Lo mismo pasa cuando sacamos el puntero. Solo se llevará a cabo lo planeado si no se está ocupado, si es así (else) se hace desaparecer directamente .tooltip para que no se líe el código. El resultado es el siguiente:

$(document).ready(function (){
  var ocupado = 0;
  //Cuando se pasa por encima del icono
  $('#icono').mouseover(function (){
    if (ocupado == 0){
      ocupado = 1;
      $('.tooltip').css({
        //Aparece (ya que estaba en display none)
        top: 0,
        display: 'block',
        opacity: 0,
      }).animate({
        //Sube 20px y pasa a ser opaco
        top: '-=20px',
        opacity: 1,
        }, 'normal', //a velocidad normal
        function (){
        ocupado = 0;
      });
    }
  });
  //Cuando sale de la zona del icono
  $('#icono').mouseout(function (){
    if (ocupado == 0){
      ocupado = 1;
      $('.tooltip').css({
        // Aeguramos que sea opaco
        opacity: 1,
      }).animate({
        // Sube 50 px y desaparece
        top: '-=50px',
        opacity: 0,
      }, 'slow',
      function(){
        $('.tooltip').css({
          // Lo recolocamos
          display: 'none',
          top: 0
        });
        ocupado = 0;
      });
    }else {
      // Si salimos de la zona antes de que se haya acabado la animacion
      $('.tooltip').css({
        // Pasamos de todo y desaparece
        display: 'none',
      });
      ocupado = 0;
    }
  });
});

Solución de Bugs

(30 julio 09)

Como muchos me habéis dicho que hay bugs, he estado toda la noche despierto para solucionarlos. Supongo que los que hubiérais seguido el tutorial os haríais dado cuenta de que el problema era que las animaciones duraban un tiempo determinado. Si durante el transcurso de la animación entrabamos o salíamos de la area con el puntero, líabamos el código. Para solucionar esto puse una pausa de medio segundo entre animación y animación con:

clearTimeout();

El código finalmente funciona con ie, firefox y safari (comprobado) y ha quedado así:

$(document).ready(function (){
var ocupado = 0;
var pausa = null;

//Cuando se pasa por encima del icono
$('#icono').mouseover(function (){
if(pausa) clearTimeout(pausa);
if (ocupado == 0){
ocupado = 1;
$('.tooltip').css({
//Aparece (ya que estaba en display none)
top: 0,
display: 'block',
opacity: 0
}).animate({
//Sube 20px y pasa a ser opaco
top: '-=' + '20px',
opacity: 1
}, 'normal',
function (){
ocupado = 0;
});
}
});
//Cuando sale de la zona del icono
$('#icono').mouseout(function (){

pausa = setTimeout(function () {
pausa = null;
if (ocupado == 0){
ocupado = 1;
$('.tooltip').css({
opacity: 1
}).animate({
top: '-=' + '50px',
opacity: 0
}, 'slow',
function(){
$('.tooltip').css({
display: 'none',
top: 0
});
ocupado = 0;
});
}else {
$('.tooltip').css({
display: 'none'
});
ocupado = 0;
}
}, 500)
});

});

Demo y Descarga

Descargar

Demo

En fin, espero que te haya gustado el tutorial. Acuerdate de dejar tu comentario y suscribirte a nuestro feed o a nuestro twitter.

Crear un menú vistoso y atractivo para una página web con CSS y HTML. El HTML de este menú será en forma de lista para seguir los estandares. Nos basaremos en la siguiente imagen:

Necesitaremos:

• La imagen de fondo del menú (bgmenu.png)
• Las imagens de la izquierda y la derecha del menú (bgmenu_i.png y bgmenu_d.png)

El HTML

Empezamos con un div al que damos la clase menu. Dentro de este creamos la lista. Para crear una lista en HTML lo único que tenemos que hacer es meter dentro de las etiquetas <li> y </li> cada uno de los ítems. En este ejemplo voy a añadir los ítems Blog, Tutoriales, Tips, Freebies y Foro. Nos queda, por tanto, el siguiente código:

<div>
<li><a href="#">Blog</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Foro</a></li>
</div><!-- fin Menu -->

Pero falta un pequeño detalle. Para que por los dos lados sobresalga el final del menú añadimos dos divs que mostraran las dos imagenes correspondientes alineadas una a la izquierda y la otra a la derecha. Les pondremos las IDs <em>menu_i</em> y <em>menu_d</em>. La manera más fácil de situar un div es antes de la parte del código que queremos que lo rodee. Por tanto lo pondremos antes que la lista:

<div class="menu">
<div id="menu_i"></div>    <div id="menu_d"></div>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Foro</a></li>
</ul>
</div><!-- fin Menu -->

Y este es todo el código HTML que necesitamos.

El CSS

Aquí está toda la magia del tema. La cuestión principal es que hemos hecho una lista pero no queremos salga cada ítem en una nueva línea, queremos que se alineen. Además no queremos que salga un puntito delante de cada ítem. Esto lo conseguinos con el siguiente código:

.menu li {
list-style-type: none; /* no queremos puntitos*/
display: inline; /* queremos que se alineen todos los ítems*/
}

Además vamos a añadirle unos cuantos estilos más para conseguir el diseño de la imagen que mostré anteriormente. Vamos a poner todo el texto en mayúsculas, a un tamaño de 20px y en negrita. También lo vamos a alinear y a separar cada ítem añadiéndole un padding de 20px por cada lado.

.menu li {
list-style-type: none;
display: inline;
text-transform: uppercase; /* Mayusculas*/
font-size: 20px;
font-weight: bold;
line-height: 80px; /* Posicionamiento */
padding: 0 20px; /* Padding por los lados*/
}

Y ahora vamos a darle estilo a los links. Queremos que no estén subrayados y que sean de color gris (#222). Cuando pasemos por encima se pondrán de color negro:

.menu li a {
text-decoration: none;
color: #222;
}

.menu li a:hover {
color: #000;
}

Lo siguiente es darle estilo al div menu. Queremos que ocupe todo el ancho y que tenga como fondo bgmenu.png repitiendose a lo largo del eje de las Xs:

.menu {
width: 100%;
background: transparent url('img/bgmenu.png') repeat-x;
}

Y ya para acabar, el toque diferente. Vamos a hacer que se salga por los lados el final del menú. Para ello nos vamos a ayudar del margin negativo. Los dos divs que habíamos hecho para cumplir esta función eran #menu_i y #menu_d. El primero lo vamos a alinear a la izquierda, el segundo a la derecha. Les vamos a poner las dimensionesd de las magenes (54×100) y les vamos a poner a cada uno su imagen de fondo. Luego vamos a ponerle un margin-left al primero de -16px y un margin-right al segundo de -16px. tenemos que:

#menu_i {
float: left;
width: 54px;
height: 100px;
background: transparent url('img/bgmenu_i.png') no-repeat;
margin-left: -16px;
}

#menu_d{
float: right;
width: 54px;
height: 100px;
background: transparent url('img/bgmenu_d.png') no-repeat;
margin-right: -16px;
}

¡Y ya está!

Descarga y Demo

He colgado la demo para que podáis ver cómo queda y también os dejo todo el código y las imagenes – al código le he añadido un cuadro para ver cómo queda el menú en situación, pero lo bueno de nuestro menú es que funciona mida lo que mida el cuadro de ancho.

Descargar

Demo

¿Te ha gustado este post? Pues habrán muchísimo mejores, por eso te recomiendo que agregues nuestro feed ¡También me he registrado en Twitter!

De Edit CSS ya hablé en otro post. El PSD inicial y la carpeta que utilizo en el tutorial para empezar los subiré cuando pueda.

Archivo PSD

Carpeta “Nuevo Proyecto”