Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Insignias de Notificación de Menú Utilizando Atributos de Datos HTML5

by
Length:LongLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Skin Orman Clark's Video Interface Using jPlayer and CSS
Build a Popup Modal Window Using the jQuery Reveal Plugin

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

Hoy vamos a tomar el diseño de Insignias de Notificación de Menú de Orman Clark y construirlo usando HTML y CSS. Examinaremos un par de maneras de lograr el efecto, incluyendo el uso de atributos de datos HTML5 con los que quizá no esté familiarizado. ¡Vamos a empezar!


Paso 1: Marcado Base HTML5

Comencemos por esbozar un marcado básico. Estaremos utilizando el doctype de HTML5 en todo el tutorial. Crearemos el menú en sí añadiendo primero una div principal seguida de elementos de lista que crearán cada enlace de menú. También hemos incluido el script HTML5 shiv (o shim) en el encabezado de nuestro documento. Esto funciona con versiones anteriores de Internet Explorer, permitiéndoles reconocer y dare estilo a elementos HTML5.


Paso 2: Marcado del Menú

Para crear la estructura de nuestro menú usaremos una lista no ordenada con 4 elementos de lista y una etiqueta ancla dentro de los mismos. También querrá anidar la lista dentro de una etiqueta <nav> para la implementación.

Por el bien de esta demostración, crearemos una div alrededor del menú con una clase de wrapper. Esta sólo se utilizará para mover el menú a la mitad de la página.

Su marcado debe verse algo así;


Paso 3: Algunos CSS Básicos

Antes de comenzar a diseñar el menú, agregaremos algunos restablecimientos y estilo de página. Primero insertaremos un restablecimiento para eliminar cualquier margen, relleno, etc. de la hoja de estilo predeterminada del navegador. Luego aplicaremos un color de fondo al cuerpo y un tamaño de fuente de 16px. Este tamaño de fuente fijo asegura el tamaño base para nuestra demostración, pero puede que prefiera establecerlo al 100%, así le permitirá al usuario definir el tamaño de la fuente del navegador. Vamos a aplicar un ancho de 70% a la envoltura y lo centramos con un margen superior de 200px.


Paso 4: Estilos Básicos del Menú

Para comenzar el estilo del menú, primero nos centraremos en la base del mismo. Apunte primero a la lista no ordenada, a la cual se le dio una clase de "menu". Vamos a darle un display de inline-block, lo que nos permite determinar la anchura/altura de la misma en función de su contenido como un elemento de bloque.

A continuación aplicaremos un fondo degradado con todos los prefijos de navegador. Luego, añadimos algo de radio en el borde, pero bueno ¡¿qué son esos ems ?! Estamos usando ems (en lugar de píxeles) para dimensionar el radio del borde en relación con el tamaño de la fuente. Mire la demostración; usted verá el radio crecer proporcionalmente junto con el texto más grande.

Para calcular el tamaño que necesitamos, tomaremos 16px (tamaño de fuente de nuestro cuerpo) y lo dividiremos por 3 (nuestro tamaño de radio de borde deseado en px). Así que 16px/3px = 0.188 pero vamos a redondear eso hasta 0.2.

Posteriormente aplicaremos un simple borde gris, luego una sombra paralela y una sombra insertada. ¡Tampoco  se olvide de los prefijos de navegador!


Paso 5: Elementos de Lista

Sigamos adelante, vamos a mejorar el menú mediante el estilo de los elementos de la lista. Primero flotaremos los elementos de la lista a la izquierda de tal manera que estén todos en una línea y no en una lista. Posteriormente los posicionaremos relativamente, esto será necesario más adelante cuando creemos las insignias. Luego agregaremos un borde a la izquierda y un borde a la derecha.

Ahora tendremos que apuntar al primer elemento de la lista y el último elemento de la lista, así que lo haremos usando los pseudo selectores; :first-child y :last-child (tenga en cuenta el soporte de navegador al usar estos). Para el primero vamos a quitar el borde a la izquierda y vamos a eliminar el borde derecho del último elemento de la lista.


Paso 6: Etiquetas Ancla

Lo siguiente que debemos hacer es diseñar las etiquetas ancla. Primero les daremos una familia de fuente de Helvetica Neue con algunas fuentes de reserva para las personas que no tienen la fuente Helvetica. A continuación les daremos un tamaño de fuente de 0.75em (13px/16px = 0.75). Posteriormente aplicaremos un peso de fuente de negrita, seguido por un color de #666666 y aplicaremos una sombra de texto.

Ahora aplicaremos un relleno a la izquierda y derecha de 1em (13px/13px = 1) y algo de altura de línea para centrar el texto verticalmente. Hemos basado la altura de línea en 30px, interpretada en ems.

¡Nuestro menú está empezando a verse muy bien ahora!

Anchor Tag Styles

Paso 7: Marcado de Burbujas de Notificación

Hora de agregar las increíbles pequeñas burbujas de notificación. Primero necesitará reemplazar el marcado HTML del menú con lo siguiente. Vamos a crear las burbujas usando etiquetas de span, luego para cada color aplicaremos una clase apropiada. He añadido rosa, amarillo y azul.


Paso 8: Estilo de las Burbujas de Notificación

Para crear las burbujas de notificación, primero diseñaremos las etiquetas de span con todo excepto el color y el color de borde. De esta manera podemos cambiar los colores fácilmente cambiando simplemente los nombres de las clases.

Primero vamos a crear algunos anchos y alturas, tome 18px/12px=1.5em. Necesitaremos posicionarlos absolutamente (0.5em desde la derecha y -2em desde arriba). A continuación, se aplicará una altura de línea para centrar el número verticalmente y text-align center se utiliza para centrar horizontalmente.

Una familia de fuentes se aplicará con Helvetica Neue, de nuevo con fuentes de reserva para usuarios sin Helvetica. Vamos a hacerlo en negrita, aplicar un color blanco y luego añadiremos una sombra de texto. A continuación agregaremos algunas sombras de caja (agregaremos dos, una sombra paralela y una sombra insertada). Recuerde crear estas utilizando prefijos de navegador. Ahora vamos a añadir un radio de borde de 4em (aproximadamente 50px).

Para la siguiente etapa del proceso, aprovecharemos algunas técnicas de CSS3 y conseguiremos que el efecto de hover funcione. Primero ocultaremos la burbuja usando una opacidad de 0. A continuación, para crear nuestras pequeñas animaciones, usaremos algunas transiciones. Vamos a apuntar a la parte superior y la opacidad y pedirle que haga una transición a lo largo de un período de 0,3 segundos (3 milisegundos). Estos necesitarán los prefijos del navegador, incluyendo -o- y -ms-.


Paso 9: Colores de las Burbujas

Tiempo para los toques estéticos finales en las burbujas; añadiendo CSS para dar estilo a los colores. ¿Recuerda las clases que añadimos a las etiquetas de span? Estas harán las cosas lo suficientemente simples, vamos a apuntar a cada color, aplicar un degradado y un color de borde.


Paso 10: Estilos de Hover

Por supuesto, nuestras burbujas están bellamente diseñadas, pero son completamente invisibles. Tendremos que añadir un poco de CSS para permitir que las burbujas se muestren en hover. Primero añada un poco de color a las etiquetas de ancla cuando se pase el ratón sobre ellas, sólo un simple gris oscuro. A continuación, apuntaremos al span cuando a su elemento padre de lista principal se le haga hover. Vamos a añadir una opacidad de 1 para que sea visible y cambiar el valor de la posición superior para que parezca como si se estuviera deslizando hacia abajo.

Hover Styles

¿Qué hay acerca de los atributos de datos HTML5?

Me alegra que haya preguntado..


Paso 11: Cambiar el Marcado HTML del Menú

Para crear nuestro menú con atributos de datos HTML5 primero tendremos que cambiar nuestro Marcado HTML. Vamos a utilizar algunos atributos personalizados para crear las burbujas. HTML5 introdujo un nuevo atributo data- en el que el nombre del atributo puede ser cualquier cosa, siempre y cuando tenga al menos 1 carácter de longitud y empiece por 'data-'.

Para este tutorial utilizaremos 'data-bubble'. Esto nos permitirá almacenar y acceder a nuestros valores de notificación sin agregar estructura de marcado innecesaria a nuestro documento. Tenga en cuenta que también hemos cambiado nuestras clases de color hacia las etiquetas ancla.


Paso 12: Eliminando Algo del CSS

Como ya no vamos a trabajar con los elementos span, necesitaremos volver a su CSS y borrar las siguientes reglas;


Paso 13: Añadiendo Algo del CSS

Ahora vamos a apuntar a nuestros atributos de datos en su lugar, necesitaremos agregar algunas reglas a nuestro CSS.

Se verá muy similar a lo que hemos utilizado para nuestros elementos span. Esta vez sin embargo, vamos a apuntar a los pseudo-elementos :after de las etiquetas ancla con un atributo de "data-bubble". Para ello, estamos utilizando Selectores de Atributos CSS.

Como estamos usando un pseudo :after (y por lo tanto la generando contenido) deberemos definir algo de contenido dentro de ella con content: ''. Una vez más utilizaremos nuestro atributo personalizado que creamos en nuestro HTML y lo insertaremos.

Una vez más, para manejar la visibilidad de nuestra burbuja, le daremos una opacidad de 1 cuando se pase el ratón por encima del enlace. Desafortunadamente, debido a limitaciones con los selectores de atributos no podemos animarlos con CSS.


Paso 14: Colores Para los Atributos

Finalmente, necesitamos dar estilo al contenido generado dentro de las distintas clases para que podamos cambiar los colores fácilmente (exactamente como lo hicimos con los elementos span).


Conclusión

¡Hemos creado con éxito un menú junto con algunas bonitas burbujas de notificación y las animamos! Incluso hemos ido más allá y hemos aprovechado las nuevas técnicas dentro de HTML5.

Completed

Espero que haya disfrutado este tutorial, ¡gracias por leer!

Advertisement
Advertisement
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.