LESS CSS Tutorial Designing A Slick Menu Barra de navegación

Este artículo es parte de nuestro "Serie de tutoriales HTML5 / CSS3" - Dedicado a ayudarlo a ser un mejor diseñador y / o desarrollador.. haga clic aquí Ver más artículos de la misma serie..

El mundo del diseño y desarrollo web realmente está evolucionando rápidamente. Podemos ver esto en la gran cantidad de cosas nuevas lanzadas en la comunidad (casi) todos los días, ya sean aplicaciones o nuevos marcos que ayudan a hacer nuestro trabajo cotidiano como diseñadores o desarrolladores web más efectivo y eficiente..

Uno que me llamó la atención de la evolución del diseño web hoy es LESS, un lenguaje programable de hojas de estilo que amplía la forma en que escribimos la sintaxis CSS al combinar algunos conceptos de programación como Variables, Mixins, Funciones y Operaciones..

Abre nuevas capacidades en la escritura de sintaxis CSS. Por ejemplo, al aplicar Mixins en CSS como lo hacemos en un programa, ahora podemos almacenar estilos y valores predeterminados que se pueden aplicar en todo el archivo siempre que sea posible. Con esto, no necesitaremos escribir los mismos estilos una y otra vez.

Bueno, hagamos algunos ejercicios con MENOS para tener una mejor idea de lo que tiene para ofrecer.

Diseñando con MENOS

En este tutorial, intentaremos diseñar una barra de navegación del menú que esté inspirada en la de Apple.com. Como solo está 'inspirado' por el producto original, tenga en cuenta que nuestro producto tutorial final no será exactamente el mismo que el original.

Para comenzar, es posible que desee leer primero los siguientes recursos útiles. Explican algunas implementaciones básicas del lenguaje LESS, que serán útiles para usted antes de profundizar en este tutorial..

• MENOS es más: haga que su codificación CSS sea más fácil con MENOS
• Escribe mejor CSS con menos
• Una introducción a MENOS, y comparación a Sass

Preparación

En primer lugar, hay algunas cosas esenciales que necesitamos para este pequeño proyecto, es decir:

1. MENOS editor de texto

Necesitaremos un editor de texto para codificar el menú de navegación. Sin embargo, la mayoría de los editores de texto disponibles en el mercado actual (como Dreamweaver, Notepad ++, InType, Sublime Text 2) aún tienen que admitir .Menos extensiones de archivo por defecto, por lo que la sintaxis puede no estar bien resaltada.

Por lo tanto, para el propósito de este tutorial, usaremos un editor de texto especial para LESS llamado ChrunchApp. Podemos abrir y editar .Menos extensión de archivos y compilarlo en CSS estático utilizando esta aplicación. Como es una aplicación de Adobe Air, puede instalarse en todos los sistemas operativos de escritorio principales (Win, OSX y Linux).

Para el editor de HTML puede usar cualquier editor que ya esté cómodo usando ahora. Personalmente me gusta Sublime Text 2.

2. Less.js

A continuación, descargue la Biblioteca de JavaScript MENOS de su sitio web oficial, la versión actual es 1.2.1. Colócalo dentro de tu carpeta de práctica para esto..

Luego vincula el archivo al documento HTML.

3. Libre de prefijo

También utilizaremos algunas características de CSS3 para lograr algunos efectos en el menú de navegación que incluirá prefijos de proveedores (-moz-, -o-, -webkit-) para que se renderice correctamente en diferentes navegadores. Sin embargo, personalmente no estoy a favor de usar prefijos, ya que abultará el archivo CSS.

Por este motivo, decidí usar sin prefijos, una biblioteca de JavaScript creada por Lea Verou que manejará los prefijos de los proveedores automáticamente en segundo plano. Así que solo tendremos que escribir la sintaxis oficial de W3C.

Descarga el archivo y vincúlalo al archivo HTML.

De acuerdo, todos estamos preparados; Ahora vamos a empezar a estructurar el marcado HTML.

Marcado HTML

La navegación es bastante simple. Tendrá cinco menús dentro de una etiqueta de lista desordenada. Abre tu editor de HTML favorito y coloca el siguiente marcado:

MENOS estilo

En esta sección comenzaremos a diseñar la navegación con MENOS idiomas. Para aquellos que son nuevos en el lenguaje de programación, escribir la sintaxis CSS con LESS sería un poco extraño e incómodo. Pero no te preocupes, una vez que tengas algo de práctica, seguramente será más divertido que la forma en que escribimos CSS puro (es mi experiencia, también es un poco adictivo).

Examinemos el estilo de navegación de nuestra fuente de inspiración..

Como podemos ver en la captura de pantalla anterior, la navegación de Apple.com tiene los siguientes 6 estilos comunes principales:

• sombra
• frontera
• divisor
• gradientes
• efecto de desplazamiento
• texto

Almacenaremos estos estilos y los guardaremos dentro. config.less como el estilo por defecto Configuración; algunos diseñadores también podrían nombrarlo lib.css que significa Biblioteca. Enlace este archivo a nuestro documento.

Asegúrate de colocarlo antes de la biblioteca de LESS JavaScript.

Definir la base de color con variables

En este paso definiremos la base de color de navegación utilizando Variables. La variable en MENOS se declara usando el @ símbolo.

@tema: # 555;

Esta @tema La variable es nuestro color estándar. Lo utilizaremos de todas las formas posibles para unir el esquema de color perfecto y para que la composición del color sea más consistente..

Definir el estilo de sombra predeterminado con Mixins

Una de las características que amo de LESS es Mixins. Es un concepto de programación que almacena varios estilos predefinidos que en LESS se pueden heredar en clases o identificadores más adelante en la hoja de estilo..

.shadow box-shadow: 0 1px 2px 0 @theme; 

En el código anterior no incluí la versión prefijada de la sombra de la caja propiedad, ya que la biblioteca sin prefijos los manejará automáticamente. Además, el color de sombra se hereda de la variable de tema color.

Definir el estilo de borde con Mixins paramétricos

La barra de navegación necesitará un color de borde distinto con una esquina ligeramente redondeada. Podemos compilar el estilo de borde utilizando Mixins paramétricos. En realidad, tiene la misma funcionalidad que Mixins, la única diferencia es que también tiene parámetros modificables, por lo que los valores son más ajustables..

.border (@radius: 3px) border-radius: @radius; borde: 1px sólido @tema - # 050505; 

En el código anterior, configuramos el borde predeterminado @radio para 3px y como mencionamos anteriormente, este valor se puede cambiar más adelante..

Defina el estilo de degradado, divisor y desplazamiento con la operación

La operación es simplemente un lenguaje de programación donde podemos aplicar fórmulas matemáticas como la suma, la división, la resta y la multiplicación para obtener el resultado deseado. Echemos un vistazo al siguiente código:

.divisor estilo de borde: sólido; ancho del borde: 0 1px 0 1px; color de borde: transparente @tema - # 111 transparente @tema + # 333; 

En el código anterior restamos @tema variable por # 111, De esta manera, la salida de color del borde izquierdo sería un poco más oscura. Mientras que el color del borde derecho se deriva de la adición de @tema variable con color hexadecimal # 333, la salida sería más ligera.

Nivel de esquema de color

Bueno, para algunos de ustedes que podrían confundirse con fórmulas, examinemos el diagrama de esquema de colores a continuación para obtener una mejor comprensión:

El tono máximo oscuro es # 000 (negro), mientras que el tono de luz máximo es #fff (blanco) y nuestra base de color actual es # 555. Entonces, si queremos que la base de color sea 3 niveles más oscuros de la corriente, simplemente podemos restarlo por # 333. De igual manera se puede aplicar para aclarar el color..

A continuación, operaremos el color degradado..

.gradiente fondo: gradiente lineal (arriba, @tema + # 252525 0%, @tema + # 171717 50%, @tema - # 010101 51%, @tema + # 151515 100%);  .hovereffect background: lineal-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definir el estilo de texto con Guard Mixins

Planeamos tener 2 colores en la barra de navegación, ne color oscuro y uno claro. Aplicamos dos sentencias condicionales para el texto usando Guard Mixins.

Primero, cuando el texto recibe un color que tiene una luminosidad igual o superior al 50%, sombra de texto Debe oscurecerse, en este caso el color. # 000000.

.textcolor (@txtcolor) when (lightness (@txtcolor)> = 50%) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Luego, cuando el texto recibe un color que la luminosidad es inferior al 50% del sombra de texto se volverá blanco.

.textcolor (@txtcolor) when (lightness (@txtcolor) 
Importando MENOS
 
Vamos a crear otra. .Menos archivo llamado styles.less e importar config.less en ello:
 
@import "config.less";
 
Añadir familia de fuentes
 
Para que la barra de navegación se vea más atractiva, incluiremos una nueva familia de fuentes usando @Perfil delantero regla. Asombrosamente, @Perfil delantero regla en realidad ya es compatible desde IE6!
 
Esta vez usaremos la fuente Asap. Descárgalo de la colección de fuentes de Font Squirrel. Luego inserte los siguientes estilos en nuestro recientemente creado styles.less expediente.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formato ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') formato ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formato ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formato ('svg'); fuente-peso: normal; estilo de letra: normal;  
 
Estilo del cuerpo con funciones de color.
 
Ahora, le daremos un color de fondo a la cuerpo (eso debería ser más claro que el color base), así como especificar la familia de fuentes y el tamaño de la fuente. Podemos acercarnos al efecto utilizando las funciones de color:
 
El siguiente código aligerará el fondo al 30%..
 
cuerpo fondo: aclarar (@tema, 30%); familia de fuentes: AsapRegular, sans-serif; tamaño de letra: 11 puntos; 
 
 
 
Diseño de la navegación con regla anidada
 
En MENOS podemos anidar estilos directamente debajo de su padre. Echemos un vistazo al siguiente código..
 
los nav La etiqueta que contiene todos los elementos necesarios para la navegación recibirá los siguientes estilos..
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; 
 
Tenga en cuenta que, en lugar de dar un montón de reglas CSS de nuevo, solo inserté .frontera Para dar el estilo de la frontera y .sombra para añadir sombra. En casos reales, este conjunto de clases también se puede reutilizar en otro elemento, donde sea necesario.
 
 
 
A continuación, damos estilos para la ul dentro de nav Tener cero relleno y margen. No hace mucho tiempo abordaremos el estilo escribiendo algo como esto:
 
nav … nav ul …
 
No hay nada malo con este enfoque, de hecho, solía hacerlo cada vez y me siento bastante cómodo con él. Sin embargo, este método, según han dicho muchos de los diseñadores de CSS, es detallado y, en algunos casos, no es fácil de manejar..
 
Ahora, podemos hacer algo como esto:
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; ul relleno: 0; margen: 0; 
 
 
 
Y luego el menú se mostrará en una fila usando pantalla: en línea propiedad.
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; ul relleno: 0; margen: 0; li display: inline; 
 
 
 
En la sintaxis a continuación, especificamos el estilo de la etiqueta de anclaje del menú y agregamos nuestros estilos predefinidos, que son: .color de texto, .divisor, .gradiente.
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; ul relleno: 0; margen: 0; li display: inline; a texto-decoración: ninguno; pantalla: bloque en línea; flotador izquierdo; ancho: 156px; altura: 45px; text-align: center; línea de altura: 300%; .textcolor (# f2f2f2); // Puedes cambiar esta línea .divider; .gradiente; 
 
En el código anterior aplicamos color hexadecimal. # f2f2f2 en el que la luminosidad se considera superior al 50%, por lo que esperaríamos ver que la sombra se oscurece (automáticamente). El resto del código que estoy seguro es bastante autoexplicativo..
 
 
 
Sin embargo, si nos fijamos en el resultado actual anterior, cada uno de los menús tiene divisiones, por lo que la última sección se desborda hacia la parte inferior. Por lo tanto, debemos omitir el estilo de borde del primer y último elemento secundario de la barra de navegación..
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; ul relleno: 0; margen: 0; li display: inline; a texto-decoración: ninguno; pantalla: bloque en línea; flotador izquierdo; ancho: 156px; altura: 45px; text-align: center; línea de altura: 300%; .textcolor (# f2f2f2); // Puedes cambiar esta línea .divider; .gradiente;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Hover State
 
Para el último paso añadiremos el efecto hover. En MENOS podemos añadir pseudo-elemento como :flotar utilizando Y símbolo.
 
nav margen: 50px auto 0; ancho: 788px; altura: 45px; .frontera; .sombra; ul relleno: 0; margen: 0; li display: inline; a texto-decoración: ninguno; pantalla: bloque en línea; flotador izquierdo; ancho: 156px; altura: 45px; text-align: center; línea de altura: 300%; .textcolor (# f2f2f2); // Puedes cambiar esta línea .divider; .gradiente; &: hover .hovereffect;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Cambiar el tema de color
 
Aquí está la parte fresca de MENOS. Si queremos cambiar el tema general del color, podemos hacerlo en menos cambios de línea de los que necesitamos en CSS puro.
 
En este caso, cambiaré el color de navegación para que sea un poco más claro. Simplemente cambia las siguientes dos líneas.
 
@tema: #ccc; //Cambia esto
 
.color de texto (# 555); //Y esto
 
y aqui esta el resultado.
 
 
 
Compilar MENOS en CSS
 
Cuando todavía estemos usando el MENOR JavaScript, tomará el .Menos archívelo y conviértalo en CSS estático para que el navegador estándar pueda interpretarlo. Este es un trabajo doble en el lado del cliente, por no hablar de redundante y desperdicia ancho de banda. El punto principal de LESS está en el flujo de trabajo para simplificar nuestra práctica de compilar CSS estático para que sea más dinámico y programable..
 
Entonces, cuando estamos a punto de poner la barra de navegación en vivo en un sitio web, es importante compilar el archivo MENOS en CSS estático.
 
Haga clic en el Cruje! botón grande.
 
 
 
Guarde el archivo .less en nuestro archivo de ejercicios, vincúlelo al documento HTML y desvincule el .Menos Y less.js archivo del documento.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; ancho del borde: 0 1px 0 1px; color de borde: transparente # 444444 transparente # 888888;  .gradient background: gradiente lineal (arriba, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: gradiente lineal (arriba, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formato ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') formato ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formato ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formato ('svg'); fuente-peso: normal; estilo de letra: normal;  cuerpo fondo: # a2a2a2; familia de fuentes: AsapRegular, sans-serif; tamaño de letra: 11 puntos;  nav margen: 50px auto 0; ancho: 788px; altura: 45px; radio del borde: 3px; borde: 1px sólido # 505050; cuadro de sombra: 0 1px 2px 0 # 555555;  nav ul padding: 0; margen: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; pantalla: bloque en línea; flotador izquierdo; ancho: 156px; altura: 45px; text-align: center; línea de altura: 300%; color: # f2f2f2; text-shadow: 1px 1px 0px # 000000; estilo de borde: sólido; ancho del borde: 0 1px 0 1px; color de borde: transparente # 444444 transparente # 888888; fondo: gradiente lineal (arriba, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover background: gradiente lineal (arriba, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
Echemos un vistazo al resultado una vez más..
 
 
 
Y hemos terminado, siéntete libre de experimentar con ello..
 
Conclusión
 
Hoy hemos aprendido muchas cosas sobre el lenguaje MENOS, tales como:
 

• Variables.
• Mixins
• Mixins paramétricos
• Operaciones
• Mixins Guardados
• Y reglas anidadas

Aunque hay muchas cosas que se pueden cubrir más allá y hay muchas posibilidades para mostrar y explicar, esperamos que hayan disfrutado este tutorial básico..

• Manifestación
• Descargar fuente