Share
Hoy vamos a tomar el diseño de las insignias de notificación del menú de Orman Clark y compilarlo utilizando HTML y CSS. Veremos un par de formas para lograr el efecto, incluido el uso de atributos de datos HTML5 con los que puede que no esté familiarizado. Vamos a bucear en!
Comencemos por lanzar en un marcado básico. Usaremos el doctype HTML5 a lo largo del tutorial. Crearemos el propio menú agregando primero un div principal seguido de elementos de la lista que crearán cada enlace del menú. También hemos incluido el script HTML5 shiv (o shim) en el encabezado de nuestro documento. Esto se aplica a las versiones anteriores de Internet Explorer, lo que les permite reconocer y diseñar elementos HTML5.
Insignias de notificación del menú
Para crear la estructura de nuestro menú, utilizaremos una lista sin ordenar con 4 elementos de lista y una etiqueta de anclaje dentro. También puede anidar la lista dentro de un etiqueta para el despliegue.
Por el bien de esta demostración, crearemos un div alrededor del menú con una clase de envoltorio. Solo se utilizará para mover el menú a la mitad de la página..
Su marca debe verse algo como esto;
Insignias de notificación del menú
- Perfil
- Ajuste
- Notificaciones
- Cerrar sesión
Antes de comenzar a diseñar el menú, agregaremos algunos restablecimientos y algunos estilos de página. Primero lanzaremos un reinicio para eliminar cualquier margen, relleno, etc. de la hoja de estilo predeterminada del navegador. A continuación, aplicaremos un color de fondo al cuerpo y un tamaño de fuente de 16 px. Este tamaño de fuente fijo garantiza el tamaño base para nuestra demostración, pero es posible que prefiera configurarlo al 100% para que el usuario pueda definir el tamaño de fuente del navegador. Aplicaremos un ancho de 70% a la envoltura y la centraremos con un margen superior de 200px.
html, body, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, big, cite, code, del, dfn, em, fuente, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td margen: 0; relleno: 0; borde: 0; esquema: 0; tamaño de letra: 100%; alineación vertical: línea de base; Backound: transparente; body line-height: 1; ol, ul estilo de lista: ninguno; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus outline: 0; ins text-decoration: none; del text-decoration: line -through; table border-collapse: collapse; espacio entre bordes: 0; a text-decoration: none; body background: #ededed; font-size: 16px; .wrapper width: 70%; margen: 200px auto;
Para iniciar el diseño del menú, primero nos centraremos en la base del mismo. Dirigirse primero a la lista no ordenada, a la que se le dio una clase de 'menú'. Le daremos una visualización del bloque en línea, lo que nos permite determinar el ancho / alto del mismo en función de su contenido como un elemento de bloque..
A continuación, aplicaremos un fondo degradado con todos los prefijos del navegador. A continuación, agregue un radio de borde, pero hey, ¿cuáles son esos ems ?! Estamos utilizando ems (en lugar de píxeles) para ajustar el radio del borde en relación con el tamaño de la fuente. Echa un vistazo a la demostración; Verás que el radio crece proporcionalmente junto con el texto más grande..
Para calcular el tamaño que necesitamos, tomaremos 3 (nuestro tamaño de radio de borde deseado en px) y lo dividiremos por 16 px (nuestro tamaño de fuente de cuerpo). Entonces 3px / 16px = 0.188 pero redondearemos eso a 0.2.
A continuación, aplicaremos un borde gris simple, luego una sombra de cuadro con una sombra de inserción e inserción. No olvides esos prefijos del navegador también!
.menu display: inline-block; imagen de fondo: -webkit-linear-gradient (arriba, rgb (249, 249, 249), rgb (240, 240, 240)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (249, 249, 249), rgb (240, 240, 240)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (249, 249, 249), rgb (240, 240, 240)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (249, 249, 249), rgb (240, 240, 240)); imagen de fondo: gradiente lineal (arriba, rgb (249, 249, 249), rgb (240, 240, 240)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0.2em; - radio-borde-borde: 0.2em; radio del borde: 0.2em; borde: 1px sólido #cecece; -webkit-box-shadow: inserción 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, 0,06); -moz-box-shadow: inserción 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, 0,06); cuadro de sombra: recuadro 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, 0,06);
Continuando, mejoremos el menú diseñando los elementos de la lista. Primero, haremos flotar los elementos de la lista a la izquierda para que estén todos en una línea y no en la lista. Luego los posicionaremos relativamente, esto será necesario más adelante cuando creemos las insignias. A continuación, agregaremos un borde a la izquierda y un borde a la derecha..
Ahora tendremos que apuntar al primer elemento de la lista y al último elemento de la lista, así que lo haremos usando los pseudo selectores; :primer hijo y :último niño (ten en cuenta el soporte del navegador cuando utilices estos). Para el primero eliminaremos el borde izquierdo y eliminaremos el borde derecho del último elemento de la lista.
.menu li float: left; posición: relativa; borde derecho: 1px sólido # d8d8d8; borde izquierdo: 1px sólido #ffffff; .menu li: first-child border-left: none; .menu li: last-child border-right: none;
Lo siguiente que tendremos que hacer es diseñar las etiquetas de anclaje. Primero les daremos una familia de fuentes de Helvetica Neue con un poco de pila de fuentes para las personas que no tienen la fuente de Helvetica. A continuación les daremos un tamaño de fuente de 0.75em (13px / 16px = 0.75). Luego aplicaremos un grosor de fuente en negrita, seguido de un color de # 666666 y aplicaremos una sombra de texto.
Ahora aplicaremos algunos rellenos a la izquierda y derecha de 1em (13px / 13px = 1) y un poco de altura de línea para centrar el texto verticalmente. Hemos basado la altura de línea en 30px, interpretada en ems.
.menu li a font-family: 'Helvetica Neue', Helvetica, sans-serif; tamaño de fuente: 0.75em; font-weight: negrita; color: # 666666; text-shadow: 0px 1px 0px #ffffff; bloqueo de pantalla; relleno: 0 1em; altura de la línea: 2.5em;
Nuestro menú está empezando a verse bastante bien ahora.!
Es hora de añadir las pequeñas burbujas de notificación. Primero deberá reemplazar el marcado HTML de su menú con lo siguiente. Crearemos las burbujas utilizando etiquetas de separación, luego, para cada color, aplicaremos una clase apropiada. He añadido rosa, amarillo y azul..
- Perfil2
- Ajuste3
- Notificaciones6
- Cerrar sesión
Para crear las burbujas de notificación, primero aplicaremos estilo a las etiquetas span con todo excepto el color y el color del borde. De esta manera podemos cambiar los colores fácilmente simplemente cambiando los nombres de clase.
Primero crearemos algunos anchos y alturas, tomar 18px / 12px = 1.5em. Entonces necesitaremos posicionarlos absolutamente (0.5em desde la derecha y -2em desde la parte superior). A continuación, se aplicará una altura de línea para centrar el número verticalmente y el centro de alineación de texto se utiliza para centrar horizontalmente.
Se aplicará una familia de fuentes con Helvetica Neue, de nuevo con alternativas para usuarios sin Helvetica. Lo pondremos en negrita, aplicaremos un color blanco y luego agregaremos una sombra de texto. A continuación, agregaremos algunas sombras de cuadro (agregaremos dos; una sombra paralela y una sombra insertada). Recuerde crearlos mientras usa los prefijos del navegador. Ahora agregaremos un radio de borde de 4em (aproximadamente 50px).
Para la siguiente etapa del proceso, aprovecharemos algunas técnicas de CSS3 y conseguiremos que funcione el efecto de desplazamiento. Primero esconderemos la burbuja usando una opacidad de 0. Luego, para crear nuestras pequeñas animaciones, usaremos algunas transiciones. Nos enfocaremos en la parte superior y la opacidad y le diremos que se alivie durante un período de 0,3 segundos (3 milisegundos). Estos necesitarán los prefijos del navegador aplicados, incluyendo -o- y -ms-.
span posición: absoluta; arriba: -2em; derecha: 0.5em; ancho: 1.5em; altura: 1.5em; altura de la línea: 1.5em; text-align: center; ont-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: negrita; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: recuadro 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inserción 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); caja-sombra: recuadro 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; radio del borde: 4em; opacidad: 0; filtro: alfa (opacidad = 0); -webkit-transition: .3s top eas-in, .3s opacity eas-in; -mocz transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; -o-transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; -ms-transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada;
Tiempo para los toques estéticos finales sobre las burbujas; Añadiendo algo de CSS para estilizar los colores. ¿Recuerdas las clases que agregamos a las etiquetas span? Esto simplificará las cosas, orientaremos cada color, aplicaremos un degradado y un color de borde..
.rosa imagen de fondo: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: gradiente lineal (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); borde: 1px sólido # ce4f5e; .yellow background-image: -webkit-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: gradiente lineal (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); borde: 1px sólido # dea94f; .blue background-image: -webkit-linear-gradient (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: gradiente lineal (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); borde: 1px sólido # 79b5cb;
Por supuesto, nuestras burbujas están bellamente diseñadas, pero son completamente invisibles. Necesitaremos agregar algo de CSS para permitir que las burbujas se muestren al pasar el cursor. Primero agregue un poco de color a las etiquetas de anclaje cuando estén suspendidas, solo un simple gris oscuro. A continuación, nos dirigiremos al intervalo cuando el elemento de su lista principal se desplace por encima. Agregaremos una opacidad de 1 para que sea visible y cambiaremos el valor de la posición superior para que parezca que se está deslizando hacia abajo..
.menú li: desplazarse a color: # 343434; .menu li: desplaza un tramo arriba: -1em; opacidad: 1; filtro: alfa (opacidad = 100);
Entonces, ¿qué pasa con los atributos de datos HTML5?
Me alegra que hayas preguntado ...
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 de datos donde el nombre del atributo puede ser cualquiera, siempre que tenga al menos 1 carácter y comience con 'datos-'.
Para este tutorial usaremos 'burbuja de datos'. Esto nos permitirá almacenar y acceder a nuestros valores de notificación sin agregar una estructura de marcado innecesaria a nuestro documento. Note que también hemos movido nuestras clases de color a las etiquetas de anclaje.
- Perfil
- Ajuste
- Notificaciones
- Cerrar sesión
Como ya no vamos a trabajar con los elementos span, deberás volver a tu CSS y eliminar las siguientes reglas;
span posición: absoluta; arriba: -2em; derecha: 0.5em; ancho: 1.5em; altura: 1.5em; altura de la línea: 1.5em; text-align: center; Familia tipográfica: "Helvetica Neue"; font-weight: negrita; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: recuadro 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inserción 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); caja-sombra: recuadro 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; radio del borde: 4em; opacidad: 0; filtro: alfa (opacidad = 0); -webkit-transition: .3s top eas-in, .3s opacity eas-in; -mocz transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; -o-transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; -ms-transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; transición: .3s máxima facilidad de entrada, .3s opacidad de facilidad de entrada; .pink imagen de fondo: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: gradiente lineal (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); borde: 1px sólido # ce4f5e; .yellow background-image: -webkit-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: gradiente lineal (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); borde: 1px sólido # dea94f; .blue background-image: -webkit-linear-gradient (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: gradiente lineal (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); borde: 1px sólido # 79b5cb; .menu li: desplaza un tramo arriba: -1em; opacidad: 1; filtro: alfa (opacidad = 100);
Ahora apuntemos a nuestros atributos de datos, necesitaremos agregar algunas reglas a nuestro CSS.
Se verá muy similar a lo que usamos para nuestros elementos span. Esta vez, sin embargo, nos dirigiremos a los: después de pseudo elementos de etiquetas de anclaje con un atributo de "burbuja de datos". Para ello estamos utilizando selectores de atributos CSS.
Como estamos usando un: después de un pseudo (y, por lo tanto, generando contenido), tendremos que definir algo de carne dentro con contenido: ". Una vez más, usaremos nuestro atributo personalizado que creamos en nuestro HTML e insertaremos ese.
Nuevamente, para administrar la visibilidad de nuestra burbuja, le daremos una opacidad de 1 cuando el enlace esté sobre el mismo. Desafortunadamente, debido a las limitaciones con los selectores de atributos, no podemos animarlos con el propio CSS.
.menu li a [burbuja de datos]: después de contenido: attr (burbuja de datos); posición: absoluta; arriba: -1.25em; derecha: 0.5em; ancho: 1.5em; altura: 1.5em; altura de la línea: 1.5em; text-align: center; Familia tipográfica: "Helvetica Neue"; font-weight: negrita; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: recuadro 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inserción 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); caja-sombra: recuadro 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; radio del borde: 4em; opacidad: 0; filtro: alfa (opacidad = 0); .menu li: desplaza un [burbuja de datos]: después de opacidad: 1; filtro: alfa (opacidad = 100);
Por último, debemos diseñar el contenido generado dentro de las distintas clases para poder cambiar los colores fácilmente (exactamente como lo hicimos con los elementos de rango).
a.pink [burbuja de datos]: después de background-image: -webkit-linear-gradient (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); imagen de fondo: gradiente lineal (arriba, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); borde: 1px sólido # ce4f5e; a.yellow [burbuja de datos]: después de background-image: -webkit-linear-gradient (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); imagen de fondo: gradiente lineal (arriba, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); borde: 1px sólido # dea94f; a.blue [burbuja de datos]: después de background-image: -webkit-linear-gradient (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); imagen de fondo: gradiente lineal (arriba, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); borde: 1px sólido # 79b5cb;
¡Hemos creado con éxito un menú junto con algunas burbujas de notificación ordenadas y las animamos! Incluso hemos ido más lejos y aprovechado las nuevas técnicas dentro de HTML5..
Espero que hayas disfrutado este tutorial, gracias por leerlo.!
Accentsconagua