Crear una apariencia de notas adhesivas con CSS y HTML 5. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet CSS

¡votar!

Crear una apariencia de notas adhesivas con CSS y HTML 5

En este tutorial vamos a ver la forma de transformar una lista de HTML en un original efecto donde aparecerán como notas adhesivas donde anotar nuestras notas.

Lo primero que hacemos es crearnos nuestra estructura de listas para crear las notas. Cada elemento de la lista será una nota, y estas estarán compuestas por un título y el texto que tendrá esa nota.

<ul>
<li>
<a href="#">
<h2>Title #1</h2>
<p>Text Content #1</p>
</a>
</li>
<li>
<a href="#">
<h2>Title #2</h2>
<p>Text Content #2</p>
</a>
</li>
[…]
</ul>

Lo siguiente que vamos a ver será el estilo que hay que darle para conseguir los cuadrados amarillos que formará parte del efecto.

*{
margin:0;
padding:0;
}
body{
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;
}
ul{
overflow:hidden;
padding:3em;
}
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
}
ul li{
margin:1em;
float:left;
}

Después de esto, deberemos de tener algo parecido a lo siguiente.

El siguiente paso que vamos hacer es darle algo de sombra al cuadro amarillo que hemos creado, y cambiar el tipo de letra que vamos a utilizar.

Para hacerlo más real, utilizaremos un tipo de letra que parezca que haya sido escrita de forma manual. Para ello utilizaremos el API que proporciona Google para tipos de letras, y seleccionaremos el tipo “Reenie Beanie”.

Una vez que tengamos seleccionada el tipo de letra de la API de Google, lo que hacemos es incluir en nuestro desarrollo el enlace hacia ese tipo de letra para que todo el mundo lo vea como nosotros queramos asegurándonos de que los navegadores permitirán ese tipo de letra.

<link  href="http://fonts.googleapis.com/css?
family=Reenie+Beanie:regular"
rel="stylesheet"
type="text/css">

A continuación, lo que hacemos es cambiar en los estilos el tipo de letra y aplicar algo de padding al estilo.

ul li h2{
font-size:140%;
font-weight:bold;
padding-bottom:10px;
}
ul li p{
font-family:"Reenie Beanie",arial,sans-serif;
font-size:180%;
}

Ahora vamos a modificar los estilos para conseguir el efecto de sombra del que hemos hablado antes. Para eso nos aprovecharemos de la característica de CSS 3 que nos facilita esa función, “box-shadow”, en sus distintas versiones para los distintos navegadores.

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);
}

Después de hacer lo anterior, lo que nos queda es algo parecido a la imagen de abajo.

El siguiente paso será inclinar las notas según su posición, para darle un aspecto de desorden y no parezcan que estén perfecta.

Para esto también utilizaremos características CSS 3, en este caso “transform:rotate”.

ul li a{  
-webkit-transform:rotate(-6deg);  
-o-transform:rotate(-6deg);  
-moz-transform:rotate(-6deg);  
}

Para darle una inclinación de forma aleatoria, utilizaremos la propiedad CSS3 “nth-child”.

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;
}

Una vez aplicado esto, debemos de tener algo similar a esta imagen.

El siguiente paso será hacer un zoom de la nota cuando pasemos el ratón por encima de alguna de ellas y que vuelva a su posición normal cuando saquemos el ratón de esa nota.

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 le damos un valor al elemento z-index de 5 para asegurarnos de que cuando se haga el zoom, ese elemento se quede por encima del resto.

Por último lo que hacemos es proporcionar a las notas una transición más suaves y distintos colores.

Para el tema de las transiciones, utilizaremos la característica de CSS “transition” para los diferentes 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;
}

Y para el tema de los colores, volvemos a utilizar la propiedad vista anterior “nth-child” para asignar a los distintos grupos distintos colores. Así a los pares le asignaremos un color verdoso y a los múltiplos de 3 un color morado. Al resto le dejaremos el color amarillo por defecto.

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;
}