Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Crear un Efecto de Nota Adhesiva en 5 Pasos con CSS3 y HTML5

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called HTML5 and You.
HTML5 Apps: What, Why, and How

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En este tutorial, aprenderemos como transformar una lista HTML en una pared de "notas adhesivas"  que se ven y funciona como se muestra a continuación:

El efecto está construido gradualmente y funciona en los últimos navegadores con tecnología Webkit como Safari, Chrome, Firefox y Opera. En otros navegadores sencillamente conseguirá cuadros amarillos.


Paso 1: El HTML y los cuadros básicos

Empecemos con la versión más sencilla que funciona a través de todos los navegadores. Mientras estamos usando HTML5 para el efecto, el HTML básico de nuestras notas adhesivas es una lista sin ordenar con un enlace que contiene todos los demás elementos en cada item de la lista:

Observe que cada nota está envuelta por un enlace que, siempre, es un buen elemento para usarlo aunque ésto automáticamente signifique que nuestras notas se convierten en teclados accesibles. Si usamos los ítem de lista para el efecto, entonces necesitaríamos ajustar la propiedad tabindex para conseguir el mismo acceso.

El código CSS para cambiar esto en los cuadros amarillos es sencillo:

Reiniciamos las cosas que el navegador, por lo general, nos da como márgenes y paddings y la lista de estilos para quitar las viñetas de las listas.

Luego, le damos al elemento UL algo de padding y ajustamos su propiedad overflow a hidden, esto asegura que cuando vayamos a flotar los items de la lista en donde están contenidos y los siguientes elementos en el documento automáticamente flotarán.

Arreglamos el enlace como un rectángulo amarillo y hacemos flotar todos los items de la lista hacia la izquierda. El resultado es una serie de cajas amarillas para nuestra lista:

Step1: a series of yellow boxes

Esto funciona para todos los navegadores, incluyendo IE6. Esto es, además, donde terminamos apoyando este navegador como no debería soportar los efectos visuales por tecnologías modernas en anticuadas tecnologías.


Paso 2: Sombras paralelas y Fuentes garabateadas

Ahora es el momento de añadir una sombra paralela a las notas para hacerlas resaltar y usar una fuente garabateada o escrita a mano para la fuente de las notas. Para eso usamos Google Fonts API y la fuente que nos proporcionan, llamada "Reenie Beanie". La forma más fácil para usar esta API es jugar con el previsualizador de Google font.

The Google font previewer allows you to play with the fonts API and get copy+paste CSS code

Usando esto, conseguimos una sola línea de HTML para incluit esta fuente nueva en la página. Esto es respaldado por todos los navegadores modernos.

Luego, podemos ajustar algo de padding a los encabezados en la notas adhesivas y ajustar la fuente de los párrafos con la nueva fuente que incluimos. Observe que la fuente Reeni Beanie necesita ser grande para ser legible.

Para dar a las notas adhesivas una sombra para hacerlas resaltar de la página, necesitamos aplicar un box-shadow. Para esto, debemos añadir una línea para cada uno de los diferentes navegadores que queremos soporte para el estilo de los enlaces:

La sintaxis es, por fortuna, la misma para cada uno: offset [desplazamiento], spread [desplazar] y color - en este caso un color gris oscuro con una opacidad de 70%. Junto con la fuente nueva de nuestras notas adhesivas ahora se ve así:

Step2: adding new fonts and drop shadows

Paso 3: Inclinando las notas

Advertencia: Tanto la inclinación de las notas como el efecto zoom los añadiremos en el siguiente paso que ya hemos explicado anteriormente, en este artículo escrito por Zurb, pero estos efectos carecen de soporte para otros navegadores, como los que estaban fuera al momento de escribir éste tutorial. Así que muchas gracias a ellos por publicar éste truco.

Para inclinar un elemento, use la propiedad CSS3; transform:rotate y, otra vez, añada el prefijo para cada uno de los navegadores:

Esto inclina todos los enlaces a seis grados hacia la izquierda. Ahora, para hacer las notas adhesivas que parezcan inclinadas de forma aleatoria, podemos usar la propiedad CSS3; nth-child.

Esto inclina cada segundo enlace cuatro grados a la derecha, y lo desplaza un poco, más o menos, cinco pixeles desde arriba. Cada tercer enlace es inclinado tres grados a la izquierda y empujado hacia arriba cinco pixeles. Y cada quinto enlace es rotado cinco grados a la derecha y desplazado diez pixeles desde el fondo. En conjunto esto da la impresión de notas adhesivas en forma aleatoria.

Step3: seemingly random sticky notes

Paso 4: Acercando las Notas Adhesivas durante el evento on Hover y Focus

Para hacer que las notas adhesivas resalten, usamos una sombra paralela grande y la propiedad de transformación scale de CSS3. De nuevo, necesitamos definir estos para cada uno de los navegadores:

Además, añadimos un valor z-index muy alto para asegurarnos que la nota adhesiva que es agrandada cubra las demás. Como aplicamos éste on hover y focus, significa que al mover el mouse sobre o al tabular hacia en enlace, ahora lo hace resaltar.

Step4: Zooming the current sticky note

Paso 5: Añadiendo Transiciones Suaves y Colores

El último paso es hacer los cambios del título para acercar suavemente y sea más interesante en lugar de que sea un efecto brusco. Para esto usamos el módulo de transición de CSS3 en sus diferentes implementaciones de los proveedores de navegadores.

En esencia esto dice: si algo es para cambiar a éste elemento, no sólo cambie para esa otra definición, sino que hágalo gradualmente durante un cuarto de segundo. Como otro extra, vamos añadir algo de color en la mezcla para hacer cada segunda nota adhesiva verde y cada tercer nota azul.

Para ver la diferencia del último paso, usted necesitaría probar el último demo en un navegador.

Step 5:Coloured and smoothly zooming sticky notes

Resumen y Descarga

Ahí lo tiene, una animación suave y unas notas adhesivas con títulos sin usar ninguna imagen o JavaScript, que tiene soporte en Firefox, Opera, Safari y Chrome y se vuelve un conjunto de cajas amarillas en los navegadores antiguos. A través del uso ingenioso del selector nth-child y de las propiedades de transformación y transición de CSS, nos hemos ahorrado algo de código. Además, la API de Fuentes para la Web de Google hizo fácil usar una fuente personalizada. Usando las eventos hover y focus para los efectos, también, implica que los usuarios con el uso del teclado pueden observar los resultados.

Descargue el ejemplo de las notas adhesivas como un archivo zip.


Acerca del Autor

Christian Heilmann es un Desarrollador Internacional que trabaja para la Red de Yahoo en la encantadora ciudad de Londres, Inglaterra. Estos son dos libros que él ha escrito: "Comenzando JavaScript con código del DOM en AJAX" y "Soluciones del Desarrollo Web".

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.