Juanma Santoyo

En ocasiones me llaman friki

Barra estilo facebook con CSS

| No hay comentarios

Hoy he entrado en facebook y me he llevado una sorpresa y una decepción. La sorpresa era que me han aplicado el nuevo diseño, ahora parece aún más simple. La decepción era que el nuevo diseño implicaba la desaparición de la barra inferior. Esa barra que tantos tutoriales ha inspirado, esa barra que parecía inmune al scroll del ratón. De ella sólo queda ya una sombra de lo que fue, una pequeña caja de chat en la esquina inferior derecha.

En homenaje a ella, hoy comentaré cómo podemos hacer nosotros la nuestra (demo).

Conociendo el problema

La técnica que se usa para este tipo de posicionamiento, no es JavaScript como muchos pueden pensar; eso es de principios de la década pasada. Con CSS2 llegaron nuevos tipos de posicionamiento para los elementos que nos permitirán crear el efecto.

El posicionamiento que a nosotros nos ocupa es “position: fixed”. Este tipo de posicionamiento coloca el elemento respecto a la ventana del navegador, y podemos especificar las coordenadas con las propiedades “top”, “right”, “bottom” y “left”.

Programamos la barra

Lo que haremos será aplicar estilos CSS a una capa con el id “facebookBar”. Esta clase determinará el posicionamiento a la capa, además de otros aspectos gráficos como color, borde, etc.

Una página para probar

Para que el efecto se aprecie bien, vamos a crear una página con bastante contenido y que nos permita hacer scroll.

facebookBar.html

Como veis, nada del otro mundo. La última capa en el archivo, es a la que se aplicará el efecto de posicionamiento. Sólo destacar el Doctype. Es muy importante para que los navegadores apliquen correctamente los CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

El CSS

Os habréis fijado que en el HTML hay un link al CSS. Lo que contendrá ese archivo será un poco de maquetación básica para el contenido de la página, y un par de reglas CSS para aplicar el posicionamiento a la barra de facebook.

facebookBar.css

Comentemos un poco el código.

La clase más importante, es #facebookBar:

#facebookBar
{
	position: fixed; /* Posicionamiento */
	bottom: 0px;
	left: 20px;
	right: 20px;

	border: solid 1px #666666; /* Los bordes de la barra */
	border-bottom: none;

	background-color: #cccccc; /* Un color de fondo */

	height: 25px; /* Altura que tomará la barra. 25 (height) + 4 (padding) + 1 (borde superior) = 30 */
	padding: 2px;
}

Por una parte, está el código de posicionamiento. Como hemos comentado, tiene el position en fixed. También tiene bottom en 0px para que la capa quede pegada al borde inferior de la ventana, y left y right a 20px para dejar 20 píxeles de margen a cada lado.

Aparte de eso, poca cosa más. Un poco de bordes y de color de fondo para dejarla bonita.

Lo último que queda por comentar, es la clase #contenido. Es muy importante, porque hace un pequeño ajuste que evitará que nuestra barra de facebook pise parte del texto al llegar al final de la página.

#contenido
{
	margin-bottom: 50px; /* Evitará que nos quede contenido oculto al llegar al final de la página */
}

El ajuste en cuestión consiste en añadir un margen inferior. Como la barra mide 30 píxeles de alto, y el margen es de 50 píxeles; al llegar al final de la página quedará una separación entre el contenido y la barra de 20 píxeles.

¡Hemos acabado!

Y con sólo estas dos clases CSS tenemos acabada nuestra barra de facebook. El position fixed colocará la capa por encima de cualquier elemento que no tenga un z-index superior, así que modificando las reglas top, right, bottom, left, width y height de #facebookBar podemos adaptarla para muchos tipos de usos. Te invito a que experimentes.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Deja un comentario

Los campos obligatorios están marcados con *.