Vamos a transforma un lista en llamativas notas adhesivas, como las puestas en un tablón de anuncios. Iremos construyendo el efecto poco a poco, será visible en las últimas versiones de los navegadores (por favor actualiza el navegador de una vez), en navegadores antiguos solamente verás unos cuadros amarillos.
Seguiremos unos sencillas pasos para la creación de las notas adhesivas con HTML5 y CSS
Paso 1: Creamos los elementos básicos en HTML
Paso 2: Creamos las sobras y cargamos las fuentes utilizadas
Paso 3: Inclinamos las notas
Paso 4: Animamos las notas al pasar el ratón por encima
Paso 5: Agregamos transiciones suaves y colores
Resumen del Contenido
Paso 1: Creamos los elementos básicos en HTML
Como se trata de transformar una lista en Notas Adhesivas, lo primero es crear una lista sin orden:
<ul> <li>Nota 1</li> <li>Nota 2 </li> </ul>
Para dar un poco mas de estilo pondremos un título por nota como encabezado 2 (H2) y un párrafo donde irá en contenido de cada nota. Para cada elemento de la lista que tenemos se creará una nota, un posible caso para tres notas sería:
<ul> <li><a href="#"><h2>Título #1</h2> <p>Contenido de texto #1</p></a></li> <li><a href="#"><h2>Título #2</h2> <p>Contenido de texto #2</p></a></li> <li><a href="#"><h2>Título #3</h2> <p>Contenido de texto #3</p></a></li> </ul>
Podemos ver que en la lista he puesto un enlace que mas adelante veremos para que lo utilizaremos.
Es una lista que vamos a dar un poquito de estilos, crearemos los cuadrados amarillos… con CSS de la siguiente forma:
*{
margin:0; /* Resetear valor */
padding:0; /* Resetear valor */
}
body{ /* doy valores al cuerpo de la página */
font-family:arial,sans-serif;
font-size:100%;
margin:3em;
background:#666;
color:#fff;
}
h2,p{
font-size:100%;
font-weight:normal;
}
ul,li{
list-style:none; /* quito el punto de la lista */
}
ul{
overflow:hidden; /* ocultar el texto que salga de la Nota */
padding:3em;
}
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block; /* genera un bloque por cada li */
height:10em; /* altura de la Nota */
width:10em; /* anchura de la Nota */
padding:1em; /* espacio entre texto de las Notas */
}
ul li{
margin:1em; /* espacio entre las notas */
float:left; /* alinear notas */
}
El resultado de todo esto lo podemos ver en esta imagen:
Hasta aquí funciona en todos los navegadores, incluido IE6. A partir de aquí es muy recomendable que los navegadores estén actualizados, actualiza tu navegador
Paso 2: Creamos las sobras y cargamos las fuentes utilizadas
Ahora añadimos sombra a las notas y para que sea mas real utilizaremos un tipo de fuente que tengas la sensación de que está escrita a mano. Para la fuente utilizaremos la fuente llamada «Reenie Beanie» de Google Fonts API. Las fuentes de Google Fonts API las puedes previsualizar desde aquí.
En la cabecera de nuestra página solamente tenemos que incluir la siguiente línea para cargar la fuente: (realmente es una línea, aquí está en cuatro líneas por motivos de espacio)
<link href="http://fonts.googleapis.com/css? family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
La fuente Reenie Beanie para que sea visible tiene que ser grande, por ello tenemos que modificar un poco nuestra hoja de estilos inicial con estos valores:
ul li h2{
font-size:140%; /* aumento el tamaño de la fuente */
font-weight:bold; /* la pongo en negrita */
padding-bottom:10px; /* espacio inferior del texto */
}
ul li p{
font-family:"Reenie Beanie",arial,sans-serif;
font-size:180%; /* aumento el tamaño de la fuente */
}
Añadimos la sombra a la Nota para que destaque en la página, para ello utilizaremos box-shadow, es distinto para cada navegador y por ello pondremos las distintas opciones
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
/* Firefox */
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
/* Safari+Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
/* Opera */
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}
Podemos ver que en la sintaxis hemos utilizado el tamaño de la sombra y como color un gris al 70%, como resultado tenemos:
Paso 3: Inclinamos las notas
Con el fin de inclinar cada Nota utilizaremos la propiedad transform:rotate de CSS3 , agregando nuevamente para uno de los navegadores:
ul li a{
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
Esto inclina todos las Notas seis grados a la izquierda. Ahora para hacer las notas adhesivas parezcan inclinadas al azar, podemos utilizar la propiedad nth-child de CSS3
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
top:-10px;
}
Esto inclina cada segundo nota cuatro grados a la derecha, y se desplaza cinco píxeles desde la parte superior. Cada tercer nota se inclina por tres grados a la izquierda y empujó cinco píxeles. Y cada nota quinta se gira cinco grados a la derecha y el desplazamiento de diez píxeles desde la parte inferior. En suma, da la impresión de las notas adhesivas al azar :
Paso 4: Animamos las notas al pasar el ratón por encima
Para hacer una nota adhesiva destaqeu al pasar con el ratón usamos una sombra más grande y la transformación scale de CSS3. Una vez más, tenemos que definir esto para cada uno de los navegadores:
ul li a:hover,ul li a:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
También añadimos un z-index mayor para asegurar que la nota adhesiva ampliada cubre las otras. Lo aplicamos para que al mover el ratón por encima destaque así como al pulsar con el tabulador del teclado:
Paso 5: Agregamos transiciones suaves y colores
El último paso es hacer el cambio de inclinación al realizar el zoom de una forma suave y elegante. Para ello se utiliza el módulo de transición de CSS3 en sus diferentes implementaciones para los navegadores:
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;
}
En esencia, dice: si algo es para cambiar a este elemento lo hace gradualmente durante un cuarto de segundo. Como un extra, vamos a añadir un poco de color a la mezcla, amarilla la primera, verde la segunda, azul claro la tercera y así sucesivamente:
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
background:#cfc;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf;
}
