Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Crear Notas Adhesivas en HTML5 y CSS

3 abril, 2012
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

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
  • 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

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:

Paso 1: Notas Adhesivas
Paso 1: Notas Adhesivas

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 2: Notas Adhesivas CSS
Paso 2: Notas Adhesivas CSS

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 3: Notas Adhesivas CSS3
Paso 3: Notas Adhesivas CSS3

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 4: Notas Adhesivas CSS3
Paso 4: Notas Adhesivas CSS3

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

Paso 5: Notas Adhesivas CSS3
Paso 5: Notas Adhesivas CSS3

Fuente

Descargar ficheros de ejemplo

Etiquetas: box-shadowcssCSS3HTML5nth-childReenie Beaniescaletransform:rotate
ANUNCIO
Post anterior

Ideas de fotografía: contraste tonal

Próximo Post

La impresionante obra de Fredrik Ödman

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

10 Sitios donde descargar imágenes libres para tu web

10 Sitios donde descargar imágenes libres para tu web

14 octubre, 2019
Tipografía Happy Fox

50 Tipografías gratis y de alta calidad

17 febrero, 2012
Tutorial crear efecto metálico en un botón

Trabajando con capas en Photoshop

18 enero, 2011
¿Qué es y para qué sirve el email marketing?

Cómo puede ayudar el e-mail marketing dentro de una campaña publicitaria

31 enero, 2021

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .