THECIRCUS: Menú estilo cintas decorativas

La idea de este tutorial, como bien muestra la imagen o como se puede apreciar en el ejemplo de muestra, es colocar un menú estilo "cinta", esas cintas decorativas para regalos ~

Este estilo de menú es muy utilizado en varios diseños en los diferentes sitios de la red; ya que son muy llamativos y adecuados para diferentes tipos de blogs.

Coloquemos el menú:

Vamos a Diseño / Añadir gadget / HTML/javascript donde pegaremos el siguiente codigo:

<style type="text/css">
.hCT {
padding: 3px 5px 7px 5px;
position: relative;
background: #94ae2a; /* FONDO DEL MENU */
border-radius: 0;
z-index: 1;
outline-offset: -3px;
outline: 1px dashed #ddd; /* BORDE ENTRECORTADO */
}
.DRAGONS {
position: relative;
width: 570px; /* LARGO DEL MENU */
}
/* COLORES DE LAS PUNTAS Y DOBLES IZQ. */
.DRAGONS:after {
border-color: #b0cd3a transparent #b0cd3a #9db92c;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
right: -16px;
top: 14px;
}
/* COLORES DE LAS PUNTAS Y DOBLES DER. */
.DRAGONS:before {
border-color: #b0cd3a #9db92c #b0cd3a transparent;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
left: -16px;
top: -14px;
}
a.linksCT {
color: #eee; /* COLOR DE LINKS */
text-decoration: none;
text-shadow: 0px -0px 0px transparent,
0px 0px 0px transparent;
}
.linksCT {
font: 9px georgia; /* TIPO DE LETRA DE LINKS */
text-transform: uppercase;
-webkit-transition-duration: 0.5s;
margin: 3px;
letter-spacing: 2px;
}
.linksCT:hover {
color: transparent;
text-shadow: 0px -1px 0px #bfdb4b, /* COLOR DE LINK HOVER */
1px 1px 0px #7c9222; /* COLOR DE SOMBRA */
}
</style>
<div class="DRAGONS">
<div class="hCT">
<center>
<a href="URL" class="linksCT">TITLE</a>
<a href="URL" class="linksCT">TITLE</a>
<a href="URL" class="linksCT">TITLE</a>
<a href="URL" class="linksCT">TITLE</a>
<a href="URL" class="linksCT">TITLE</a>
<a href="URL" class="linksCT">TITLE</a>
</center>
</div>
</div>

Ahora editemos lo marcado.

Como formar el efecto de profundidad ¿?

Observemos como editar las puntas & el dobles de nuestro menú; para esto nos centraremos en la siguiente parte del codigo anterior:

/* COLORES DE LAS PUNTAS Y DOBLES IZQ. */
.DRAGONS:after {
border-color: #b0cd3a transparent #b0cd3a #9db92c;border-style: solid;
border-width: 15px;
content: "";
position: absolute;
right: -16px;
top: 14px;}
/* COLORES DE LAS PUNTAS Y DOBLES DER. */
.DRAGONS:before {
border-color: #b0cd3a #9db92c #b0cd3a transparent; border-style: solid;
border-width: 15px;
content: "";
position: absolute;
left: -16px;
top: 14px;}

Como vemos, se encuentran marcadas las siguientes lineas:

border-color: #b0cd3a transparent #b0cd3a #9db92c;
border-color: #b0cd3a #9db92c #b0cd3a transparent;

Respectivas a cada punta, donde lo que debemos cambiar son los colores. Los colores aquí son muy importantes, ya que darán el efecto de que se encuentran detrás de la cinta principal & formaran el dobles.

Las puntas, deberán ser mas oscuras que el fondo del menú o darle un toque mas original & colocarlas mas claras que el fondo del menú, como se puede observar en el ejemplo.

Los colores se posicionan de la siguiente forma:

border-color: #COLOR1 transparent #COLOR1 #COLOR2;
border-color: #COLOR1 #COLOR2 #COLOR1 transparent;

COLOR1: hace referencia al color de las puntas de la "cinta" que sobresalen debajo del menú.

COLOR2: hace referencia al color del "doblez" que forma entre el menú &la punta que sobresale por debajo.

Cambiar el "movimiento" de la cinta

Como habrán visto en el ejemplo que se muestra a comienzos de este tutorial, hay tres opciones de colocar nuestro menú. Cada opción le da un "movimiento" distinto al efecto de "cinta" que buscamos.

Para editar la posición de las puntas & el dobles, debemos buscar las 2 ultimas lineas que se encontraron subrayadas en el paso anterior:

top: 14px;top: 14px;

En este caso, vemos que en ambas puntas, la posición se encuentra idéntica. Lo que haremos es colocarle un signo negativo (-) a ambas o solo a una; sin cambiarle el valor {es decir el nro}.

❶ Si queremos ambas puntas & sus dobleces hacia arriba: colocaremos ambas lineas con signo negativo, quedándonos el codigo de esta forma:

/* COLORES DE LAS PUNTAS Y DOBLES IZQ. */
.DRAGONS:after {
border-color: #b0cd3a transparent #b0cd3a #9db92c;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
right: -16px;
top: -14px;}
/* COLORES DE LAS PUNTAS Y DOBLES DER. */
.DRAGONS:before {
border-color: #b0cd3a #9db92c #b0cd3a transparent;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
left: -16px;
top: -14px;}

❷ Si queremos intercalar hacia arriba & hacia abajo: colocaremos una linea con signo negativo & la otra la dejaremos como se encuentra; ten en cuenta que, la primera linea corresponde al lado izquierdo & la segunda al derecho.

Nos quedara el codigo de esta forma:

/* COLORES DE LAS PUNTAS Y DOBLES IZQ. */
.DRAGONS:after {
border-color: #b0cd3a transparent #b0cd3a #9db92c;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
right: -16px;
top: -14px;}
/* COLORES DE LAS PUNTAS Y DOBLES DER. */
.DRAGONS:before {
border-color: #b0cd3a #9db92c #b0cd3a transparent;
border-style: solid;
border-width: 15px;
content: "";
position: absolute;
left: -16px;
top: 14px;}

❸ Si dejamos el codigo como muestra el tutorial, nos quedaran ambas puntas hacia abajo, como normalmente se encuentran este estilo de efectos.

Estilo extra!

Y como un obsequio, o mejor dicho un "adelanto" les traigo un menú de este estilo, pero este es un diseño exclusivo de THECIRCUS.

❝VER EJEMPLO DEL MENÚ AQUÍ❞

Para colocar esta Versión del menú cinta decorativa, nos dirigimos a Diseño / Añadir gadget / HTML/javascript donde colocaremos el siguiente codigo:

<style type="text/css">
.hTC {
padding: 3px 5px 7px 5px;
position: relative;
background: #6d6d6d; /* FONDO DEL MENU */
outline-offset: -3px;
outline: 1px dashed #aaa; /* COLOR DEL BORDE ENTRACORTADO */
}
.BASTILLE {
position: relative;
width: 570px; /* LARGO DEL MENU */
}
.BASTILLE:before {left: -20px;}
.BASTILLE:before {
border-color: #ffd100 transparent #00c2c2 transparent; /* COLOR DE LA CINTA DOBLE */
border-style: solid;
border-width: 14px;
content: "";
position: absolute;
right: -20px;
top: 0px;
}
a.linksTC {
color: #eee; /* COLOR DELOS LINKS */
text-decoration: none;
text-shadow: 0px 17px 0px transparent,
0px -17px 0px transparent;
}
.linksTC {
margin: 3px;
font: 9px georgia; /* LETRA DE LOS LINKS */
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition-duration: 0.5s;
}
.linksTC:hover {
color: transparent;
text-shadow: 0px -5px 0px #00c2c2, /* COLOR1 DE LINKS HOVER */
0px 5px 0px #ffd100; /* COLOR2 DE LINKS HOVER */
}
</style>
<div class="BASTILLE">
<div class="hTC">
<center>
<a href="URL" class="linksTC">TITLE</a>
<a href="URL" class="linksTC">TITLE</a>
<a href="URL" class="linksTC">TITLE</a>
<a href="URL" class="linksTC">TITLE</a>
<a href="URL" class="linksTC">TITLE</a>
<a href="URL" class="linksTC">TITLE</a>
</center>
</div>
</div>

Editamos lo marcado.

Si observamos el codigo, veremos la siguiente linea resaltada en negrita:

border-color: #ffd100 transparent #00c2c2 transparent;

que como bien se indica, se donde podremos editar los colores que forman la "cinta doble" detras de nuestro menu.

¿Donde va cada color? Bien, en esta versión, no tenemos dobles, ni dos puntas diferentes, sino que es una cinta de doble color; esto indica que solo aquí haremos dos cambios de colores, pero hay que tener en cuenta cual es el color superior & cual el inferior:

border-color: #COLORa transparent #COLORb transparent;

COLORa: indica el color superior, en la imagen/ejemplo, se encuentra de color amarillo.

COLORb: indica el color inferior, en la imagen/ejemplo, se encuentra color celeste.

una vez esto editado, podrás utilizar un nuevo menú mas original!

Nota:

Al colocar tu menú en un gadget, trata de ubicarlo o sobre tus entradas o debajo de la cabecera de tu blog; de esta forma no se posicionara sobre ninguna de tus columnas impidiendo la lectura de tu contenido.

Dar créditos por uso de este tutorial &/o

su ultimo recurso como versión del menú.