jueves, 2 de febrero de 2012

Botonera con HTML5 y CSS3

Hola a todos!
Hoy vamos a estudiar HTML5 y CSS3 básicos, dos tecnologías del futuro. Haremos una botonera horizontal sencilla con efectos de transición y transformación, bordes redondeados y sombras, que son las innovaciones que trajo CSS3. Y la estructuraremos con HTML5.

Primero trabajaremos con HTML5. Escribimos las siguientes líneas de código en un archivo con extensión .html:


Si probamos la página por ahora se verá así: 


Veamos el significado de cada bloque de código:

<!DOCTYPE html> Línea básica de un documento html. 
<html lang="es"></html> Indica el idioma de la página. 
<head></head> Cabecera de la página. 
<meta charset="utf-8" /> Indica la codificación (acepta "eñes" y acentos). 
<title></title> Lo que pongas entre estas dos etiquetas aparecerá mágicamente en la pestaña/ventana del navegador. 
<link rel="stylesheet" href="estilos.css" /> Enlace a la hoja de estilos CSS.
<body></body> El cuerpo de la página. 
<h1></h1> Lo que está dentro de estas etiquetas es el encabezado nº1, el más importante. Por lo tanto puede haber sólo un h1, de otro modo pierde importancia. 
<ul></ul> Lista no ordenada (en este caso la botonera)
<li></li> Cada uno de los items de la lista (los botones)

Lo que sigue es crear un documento nuevo con el nombre de estilos.css (el nombre debe ser el mismo que el especificado en la etiqueta link). En él le daremos color, movimiento y estética a la botonera. 


Veamos una pequeña introducción a CSS 

En todo documento de CSS se debe escribir el nombre, identificador o clase de la etiqueta y entre llaves las "características" de esa etiqueta. Por ejemplo: 
body
{
       background: green;
       color: white;
       font-family: Jura, Arial;
       font-size: 16;
}
Con esto indicamos que en el cuerpo de la página, el fondo será color verde, la letra blanca, de tamaño 16 y de una fuente Jura (si está disponible) o Arial. 
Una forma de indicar todos estos atributos es mediante la asignación de la etiqueta, en el caso anterior, body. Pero, como ocurre con la etiqueta <p> (párrafo), al haber muchas etiquetas nos vemos obligados a utilizar id o class. Esto se asigna en el documento html. Por ejemplo: 

<p class="color_azul">Texto</p> 

O bien 

<p id="color_azul">Texto</p>

En el primer caso, en la hoja de estilos se escribe: 
.color_azul
       color: blue;  
}
En el segundo se escribe: 
#color_azul
{ 
       color: blue; 
}
Si se quiere utilizar un mismo atributo para varias etiquetas, se debe usar class. En cambio, para una única etiqueta se usa id. En el caso de la botonera no usaremos ni class ni id, ya que hay muy pocas etiquetas y no es necesario. 

Lo primero que haremos será alinear los botones horizontalmente y separarlos unos de otros. 
Para ello escribiremos las siguientes líneas:
ul li 
display: inline-block; /* esta línea hace que estén todos los botones en una línea horizontal */
padding: 0.5em; /* 1em equivale a la medida indicada anteriormente, o sea 16px. Por lo tanto 0.5em equivale a 8px. Esta línea indica la separación entre los botones */ 

}

 Con esto, la página se vería así: 



Ahora colocaremos la botonera en un recuadro con bordes redondeados y una sombra. Para ello escribimos el siguiente código dentro del atributo ul li: 

background: #1383ad; /* fondo individual de cada botón color turquesa */
border-radius: 1em; /* borde redondeado */
box-shadow: 2px 2px 3px rgba(0,0,0,0.6); /* sombra con 2px de desplazamiento en x e y, de color  negro y con una opacidad del 60% */
margin: 0.5em; /* agregamos más separación entre los botones */


Con esto se vería de esta forma: 



Y ahora llega la magia: haremos que al situar el mouse encima del botón, este efectúe una transición hacia el fondo color verde claro, y que además el botón se agrande desplazando a todos los demás. 

ul li:hover 
background: lightgreen;
font-size: 1.5em;
}

Esto es sencillo de entender, con esta sentencia estamos haciendo que al situar el mouse encima del botón cambie el tamaño de fuente y el fondo del mismo. Pero el problema es que lo hace bruscamente y no con una transición, que es lo que estamos buscando. Para ello agregamos estas dos líneas de código: 

transition: all 0.2s linear;
-webkit-transition: all 0.2s linear; 

En realidad son la misma línea, aunque la segunda permite que funcione el efecto en cualquier navegador moderno. Lo que hace esta línea de código es aplicar una transición para todos los cambios efectuados en el hover, que dura unos 0.2 segundos y que es lineal. 
Si probamos la página, al situar el mouse encima del botón este cambiará con una transición, pero al alejar el mouse del botón, volverá a la normalidad bruscamente. Para evitar este "salto", copiamos las últimas dos líneas de código en el atributo ul li

El resultado final es muy bonito y se puede ver aquí. (Funciona con Chrome y Safari)

La plantilla css tuvo que haberte quedado así: 



Bueno, espero que este tutorial les sea útil. 


Saludos, 
Jimena

1 comentarios:

Si tenés dudas, comentarios u opiniones sobre esta entrada, ¡comentá!