Creando mi logotipo con LESS
LESS es un lenguaje que nos permite elementos de programación con nuestras hojas de estilo CSS, permite el uso de variables, funciones y que requiere de una compilación posterior para generar la hoja de estilos CSS.
Como es bastante complicado entender su funcionamiento he creado el siguiente ejemplo en codepen
Declaración de variables
En la parte superior del documento he declarado las variables, como mi objetivo era crear mi logotipo únicamente con CSS y este está generado por cuadrados, he añadido 2 variables la primera “@box” se encarga del tamaño del cuadrado y la segunda “@boxBorder” del tamaño del desplazamiento en el color de fondo, esta a su vez se formula recalculando el tamaño de @box.
Si probáis a modificar el tamaño de @box veréis como se modifica todo el tamaño del logotipo.
Como de mis 10 cuadros algunos colores se repiten he generado 1 variable por cada uno de los diferentes colores de mi paleta, añadiendo un color para la sombra y otro para el fondo este último será utilizado tanto por el desplazamiento como por el fondo de la página.
Decalración de Mixins.
Los mixins son pequeñas partes de CSS reutilizable son muy útiles para hacer compatibles funcionalidades que requieran prefijos como por ejemplo para la propiedad de CSS box-shadow, fusionan el funcionamiento de una función con el de una clase de CSS.
En este caso “.box-shadow” recibe como parámetro @shadow, a su vez se aplica las diferentes propiedades con sus prefijos para la compatibilidad de navegadores.
El código HTML
<div class="logo"> <div class="box n1"></div> <div class="box n2"></div> <div class="box n3"></div> <div class="box n4"></div> <div class="box n5"></div> <div class="box n6"></div> <div class="box n7"></div> <div class="box n8"></div> <div class="box n9"></div> <div class="box n10"></div> </div>
El div .logo se encarga del centrado y cada uno de los diferentes div .box representa uno de los cuadros del logotipo, disponen de 2 clases box que se encarga de las opciones genéricas de estos cuadros y nNUM para poder disponer cada uno de estos cuadros de forma diferente y asignarles el color correspondiente.
Disposición del div logo
El div con la clase “logo” se encarga de hacer un centrado horizontal y vertical, para marcar el tamaño de la caja he multiplicado el valor de la variable @box *4 que es el ancho máximo en cuadrados de mi logotipo, como los diferentes cuadros seran posicionados de forma absoluta es importante que este div tenga la propiedad position:absolute, así todos los cuadros harán su posición absoluta respecto a este div.
.logo{
width:@box*4;
height:@box*4;
position:absolute;
top:50%;
left:50%;
margin:-(@box*4+@boxBorder)/2;
}
Disposición de los div box
Todos los div box disponen de posicion absoluta, de un ancho y alto igual al tamaño de la variable @box.
box{
position:absolute;
width:@box;
height:@box;
}
Disposición de los diferentes cuadros por su numeración.
La numeración de los diferentes div por n1,n2,n3, etc… la utilizo para disponer cada uno de estos cuadros mediante posición left y posición top, y les asigno el color correspondiente con la variable del color.
Para trabajar la posición left y top utilizo la variable @box multiplicada por el numero de espacios necesarios.
.n7{
top:@box*2;
left:@box*2;
background-color: @red;
}
Creación del desplazamiento y la sombra
Hasta aquí es todo bastante sencillo, el problema principal de pasar mi logotipo a CSS es que quería aplicarle ese efecto de desplazamiento con una sombra, sin necesidad de generar más etiquetas HTML.
Aquí es donde entran los selectores CSS :after y :before.
El selector :before en este caso se encarga de hacer el desplazamiento en el color del fondo almacenado en la variable @background.
Esta regla se encarga de duplicar todos los cuadros de box es muy importante asignarles un content:”” para que interprete estos elementos el navegador, estos nuevos cuadros son los que utilizaremos como desplazamiento.
Para que el desplazamiento se centre y amplíe bajo uso el valor de @boxBorder añadiéndolo al tamaño de @box, para rectificar su posicion y centrarlo bajo el cuadro aplico un top y un left con valores negativos dividiendo entre 2 el valor de @boxBorder, como este desplazamiento ha de ir bajo el cuadro aplico un z-index:-1.
.box:before {
position:absolute;
top:-(@boxBorder/2);
left:-(@boxBorder/2);
content:"";
width:@box + @boxBorder;
height:@box + @boxBorder;
z-index: -1;
background-color:@background;
}
El selector :after se encarga de generar una sombra bajo el desplazamiento del cuadro.
Esta regla se encarga de duplicar todos los cuadros de box es muy importante asignarles un content:”” para que interprete estos elementos el navegador, y les damos una box-shadow mediante el mixin que tenemos en la parte superior.
.box:after {
position:absolute;
content:"";
width:@box;
height:@box;
z-index: -2;
.box-shadow(0px 0px @boxBorder*2 fade(@shadow,50%));
}
.box-shadow(0px 0px @boxBorder*2 fade(@shadow,50%));
.box-shadow es el nombre del mixin.
0px 0px @boxBorder*2 fade(@shadow,50%) son los parametros que pasamos al mixin.
La propiedad box-shadow de CSS acepta 4 valores, desplazamiento X, desplazamiento Y, desenfoque y color.
@boxBorder*2
Se encarga de dar la cantidad de desenfoque en este caso quiero un desenfoque igual al desplazamiento * 2.
fade(@shadow,50%)
LESS dispone de funciones que permiten trabajar el color, en este caso estoy utilizando fade que se encarga de darle una opacidad del 50% al color @shadow.
Como tiene que ir por debajo del desplazamiento para que no se superpongan las sombras sobre los desplazamientos, le marco un z-index:-2.
Como podemos ver LESS es un lenguaje muy potente para trabajar CSS que simplifica la creación y modificación de nuestras hojas de estilos.
Si te ha gustado dale a en codepen