En este breve tutorial, vamos a crear un pie de página deslizable interesante con un poco de CSS. Tome el zip del botón de descarga de arriba, ábralo en su editor de código favorito y ¡siga leyendo!
La Idea
El efecto que buscamos es dar la impresión de que la página se levanta para revelar un pie de página, fijo en su lugar. Para lograr esto:
- Todo el contenido de la página, excepto el pie de página, debe residir en un único elemento envolvente (
<div id="main">en nuestro caso). Este elemento recibirá un valor de índice z de 1; - El pie de página debe establecerse en un valor de índice z negativo. Proporcionará el color de fondo y dejará espacio para la parte fija del pie de página (los enlaces y los encabezados coloridos);
- Debe haber un elemento que esté configurado en una posición fija en relación con la parte inferior de la ventana, y debe tener un índice z más bajo que el elemento #principal, pero más alto que el pie de página.
Puede obtener más información sobre la idea en la siguiente ilustración:
¡Ahora veamos algo de código!
El HTML
A continuación puede ver el marcado de la página. Este es básicamente un documento HTML5 regular, en el <head> de los cuales incluyo una fuente de Google Webfonts y el shim HTML5 para navegadores IE más antiguos.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Tutorial: A CSS3 slide-out footer</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet" />
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<h1>A CSS3 slide-out footer.</h1>
</div>
<!-- The footer will go here -->
</body>
</html> El #principal El elemento envuelve el contenido de la página. Como verá en la siguiente sección, le asignaremos un valor de índice z positivo, de modo que se muestre encima del pie de página. Y aquí está el marcado del pie de página:
<footer>
<ul>
<li>
<p class="home">Home</p>
<a class="logo" href="#">Company Name <i>© 2013</i></a>
</li>
<li>
<p class="services">Services</p>
<ul>
<li><a href="#">3D modeling</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Mobile development</a></li>
<li><a href="#">Web & Print Design</a></li>
</ul>
</li>
<li>
<p class="reachus">Reach us</p>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li>555-123456789</li>
</ul>
</li>
<li>
<p class="clients">Clients</p>
<ul>
<li><a href="#">Login Area</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
</ul>
</footer>
Dentro de la etiqueta de pie de página, tenemos una lista desordenada que contiene cuatro grupos de enlaces (definidos usando <li> elementos). Cada grupo tiene un párrafo, que se transforma en un encabezado colorido para el grupo, y otro <ul> que contiene los enlaces. El <ul> más externo se establecerá en position:fixed , que lo hará estático con respecto a la parte inferior de la ventana del navegador.
El CSS
Como puede suponer, este es el lugar donde las cosas se ponen interesantes. Al comienzo del tutorial, mencioné que vamos a trabajar con índices z negativos para que el pie de página quede fijo en la parte inferior de la pantalla. Hay un artículo muy bueno que explica los índices z en detalle, que recomiendo leer antes de continuar. No te preocupes, esperaré.
Lo primero que tenemos que hacer es crear un contexto de apilamiento en el elemento del cuerpo (cualquier elemento que contenga tanto el pie de página como el #div principal funcionará). Si no hace esto, en mi experiencia, los índices z negativos no funcionan en Safari móvil y IE más antiguos. Para crear un contexto de apilamiento, solo tenemos que darle un índice z y una posición:
activos/css/estilos.css
body{
font:15px/1.3 'PT Sans', sans-serif;
color: #5e5b64;
/* Create a page-wide stacking context
(so that negative margins work as you expect) */
position:relative;
z-index:0;
} Ahora todos los demás elementos de la página con un valor de índice z se apilarán de acuerdo con el cuerpo. A continuación, debemos asignar un índice z al #main elemento, de modo que cubra el pie de página (de lo contrario, siempre estaría visible, fijado en la parte inferior de la ventana).
#main{
position:relative;
z-index:1;
background-color: #fff;
background-image:-webkit-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
background-image:-moz-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
background-image:radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
padding: 120px 0 600px;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
} Un valor de índice z de 1 es suficiente para colocar el elemento por encima de todos los demás elementos de la página que no tienen establecidos índices z explícitos. En la mayoría de los navegadores, esto es suficiente para lograr el comportamiento que buscamos, pero desafortunadamente Safari móvil tiene un problema de redibujado, lo que requiere establecer índices z negativos en el pie de página. Otra cosa que tenemos que hacer es establecer un fondo en el elemento #main, de lo contrario, veríamos el pie de página a través de él.
Y aquí está el pie de página:
footer{
height: 245px;
color:#ccc;
font-size:12px;
position:relative;
z-index:-2;
background-color:#31353a;
background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
background-image:-moz-linear-gradient(top, #31353a, #2f3337);
background-image:linear-gradient(top, #31353a, #2f3337);
} He establecido un valor de índice z de -2. Lo que lo empuja detrás del #main div. Tenga en cuenta que tenemos que darle una altura a este elemento, porque el elemento UL que está dentro tiene una posición fija y no expandirá su padre a su tamaño.
El siguiente es el elemento UL en su interior, que está fijo en la ventana del navegador:
/* Set a width to the outermost UL, center it and fix it to the window */
footer > ul{
width:960px;
position:fixed;
left:50%;
bottom:0;
margin-left:-480px;
padding-bottom: 60px;
z-index:-1;
} Se establece en un índice z de -1, lo que hace que se muestre debajo del elemento #main, pero arriba del pie de página, que es exactamente lo que queremos. Esto concluye el truco del índice z, pero hay algunos estilos más que vale la pena mencionar:
/* The four columns of links */
footer > ul > li{
width:25%;
float:left;
}
footer ul{
list-style: none;
}
/* The links */
footer > ul > li ul li{
margin-left:43px;
text-transform: uppercase;
font-weight:bold;
line-height:1.8;
}
footer > ul > li ul li a{
text-decoration: none !important;
color:#7d8691 !important;
}
footer > ul > li ul li a:hover{
color:#ddd !important;
}
Tenemos que tener mucho cuidado al configurar estos estilos, porque el pie de página contiene UL anidados que podrían confundirse. Para limitar el efecto de los estilos, estoy usando el selector de niños CSS > .
El siguiente es el logotipo de la empresa. La imagen se muestra desde un sprite como un :before elemento.
/* The company logo */
footer a.logo{
color: #e4e4e4 !important;
text-decoration: none !important;
font-size: 14px;
font-weight: bold;
position: relative;
text-transform: uppercase;
margin-left: 16px;
display: inline-block;
margin-top: 7px;
}
footer a.logo i{
font-style: normal;
position: absolute;
width: 60px;
display: block;
left: 48px;
top: 18px;
font-size: 12px;
color: #999;
}
footer a.logo:before{
content: '';
display: inline-block;
background: url('../img/sprite.png') no-repeat -19px -70px;
width: 48px;
height: 37px;
vertical-align: text-top;
} Después de esto, podemos diseñar los elementos del párrafo, que deben transformarse en encabezados de colores brillantes para cada una de las cuatro secciones.
footer p{
width: 90%;
margin-right: 10%;
padding: 9px 0;
line-height: 18px;
background-color: #058cc7;
font-weight: bold;
font-size: 14px;
color:#fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,0.1);
box-shadow: 0 0 3px rgba(0,0,0,0.3);
margin-bottom: 20px;
opacity:0.9;
cursor:default;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
footer > ul > li:hover p{
opacity:1;
}
footer p:before{
content: '';
display: inline-block;
background: url('../img/sprite.png') no-repeat;
width: 16px;
height: 18px;
margin: 0 12px 0 15px;
vertical-align: text-bottom;
} Otro truco que usé aquí es que configuré la opacidad de los elementos en 0.9 y definí una transición que animará suavemente la opacidad cuando cambie. Al pasar el mouse, la opacidad se establece en 1, lo que activa la animación.
Por último, aquí están los diferentes temas de color, creados con la ayuda de algunos degradados CSS:
footer p.home{
background-color: #0096d6;
background-image:-webkit-linear-gradient(top, #0096d6, #008ac6);
background-image:-moz-linear-gradient(top, #0096d6, #008ac6);
background-image:linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before{
background-position: 0 -110px;
}
footer p.services{
background-color: #00b274;
background-image:-webkit-linear-gradient(top, #00b274, #00a46b);
background-image:-moz-linear-gradient(top, #00b274, #00a46b);
background-image:linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before{
background-position: 0 -129px;
}
footer p.reachus{
background-color: #d75ba2;
background-image:-webkit-linear-gradient(top, #d75ba2, #c75496);
background-image:-moz-linear-gradient(top, #d75ba2, #c75496);
background-image:linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before{
background-position: 0 -89px;
}
footer p.clients{
background-color: #e9ac40;
background-image:-webkit-linear-gradient(top, #e9ac40, #d89f3b);
background-image:-moz-linear-gradient(top, #e9ac40, #d89f3b);
background-image:linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before{
background-position: 0 -69px;
} Esto hace que los encabezados sean bonitos y coloridos, sin imágenes.
¡Hemos terminado!
Espero que te haya gustado esta sencilla técnica. Incluso funciona en dispositivos móviles, aunque probablemente querrás escribir una consulta de medios o dos para que encaje mejor en el factor de forma.