Menú border

Hey babies! ¿Sabéis de lo que me he dado cuenta? Que, curiosamente, últimamente procrastino en el blog trabajando en otros proyectos que tengo y luego procrastino en esos proyectos trabajando en el blog 🤣 supongo que ¿hacer ambas cosas me ayuda a hacer ambas? 🤣🤣 

Hoy, tras muchos meses, traigo un nuevo menú para el blog, un menú que me parece muy bonito y que además cuenta con cuatro modelos.

Y aunque los colores están "predefinidos" (por así decirlo) siempre está la opción de cambiarle los colores, basta con cambiar los códigos que vayan precedidos de # (hashtag)

preview

Antes de empezar, el primer código siempre se coloca en nuestro HTML antes de ]]></b:skin> y el segundo en un gadget HTML/Javascript.

Rosa

.pink {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #fbc9d7, 1px 1px 0 #fbc9d7, -1px -1px 0 #fbc9d7, 
-1px 1px 0 #fbc9d7, 1px -1px 0 #fbc9d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(251,215,225, 1.0);
box-shadow: inset 1px 1px 0 #fad5df;
padding: 2px 6px 2px;
border-right: 8px solid #fbc9d7;
border-top: 1px solid #fbc9d7;
border-left: 1px solid #fbc9d7;
border-bottom: 1px solid #fbc9d7;
-webkit-transition-duration: .50s;
}

.pink:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #fbc9d7, 1px 1px 0 #fbc9d7, -1px -1px 0 #fbc9d7, 
-1px 1px 0 #fbc9d7, 1px -1px 0 #fbc9d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(251,215,225, 1.0);
box-shadow: inset 1px 1px 0 #fad5df;
padding: 2px 6px 2px;
border-right: 1px solid #fbc9d7;
border-top: 1px solid #fbc9d7;
border-left: 8px solid #fbc9d7;
border-bottom: 1px solid #fbc9d7;
-webkit-transition-duration: .50s;
}

En un gadget HTML/Javascript pegamos el siguiente código, modificando todo lo que está en negrita:

<center>
<div class="pink"><a href="link" title="home"><font color = "white">home</font></a></div>
</center>

Azul

.blue {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7d6d7, 1px 1px 0 #c7d6d7, -1px -1px 0 #c7d6d7, -1px 1px 0 #c7d6d7, 
1px -1px 0 #c7d6d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(215,227,227, 1.0);
box-shadow: inset 1px 1px 0 #d2dfe0;
padding: 2px 6px 2px;
border-right: 8px solid #c7d6d7;
border-top: 1px solid #c7d6d7;
border-left: 1px solid #c7d6d7;
border-bottom: 1px solid #c7d6d7;
-webkit-transition-duration: .50s;
}

.blue:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7d6d7, 1px 1px 0 #c7d6d7, -1px -1px 0 #c7d6d7, -1px 1px 0 #c7d6d7, 
1px -1px 0 #c7d6d7;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(215,227,227, 1.0);;
box-shadow: inset 1px 1px 0 #d2dfe0;
padding: 2px 6px 2px;
border-right: 1px solid #c7d6d7;
border-top: 1px solid #c7d6d7;
border-left: 8px solid #c7d6d7;
border-bottom: 1px solid #c7d6d7;
-webkit-transition-duration: .50s;
}

En un gadget HTML/Javascript pegamos el siguiente código, modificando todo lo que está en negrita:

<center>
<div class="blue"><a href="link" title="home"><font color = "white">home</font></a></div>
</center>

Púrpura

.purple {
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7bdca, 1px 1px 0 #c7bdca, -1px -1px 0 #c7bdca, -1px 1px 0 #c7bdca, 
1px -1px 0 #c7bdca;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(210,202,211, 1.0);;
box-shadow: inset 1px 1px 0 #ccc4ce;
padding: 2px 6px 2px;
border-right: 8px solid #c7bdca;
border-top: 1px solid #c7bdca;
border-left: 1px solid #c7bdca;
border-bottom: 1px solid #c7bdca;
-webkit-transition-duration: .50s;
}

.purple:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #c7bdca, 1px 1px 0 #c7bdca, -1px -1px 0 #c7bdca, -1px 1px 0 #c7bdca, 
1px -1px 0 #c7bdca;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(210,202,211, 1.0);;
box-shadow: inset 1px 1px 0 #ccc4ce;
padding: 2px 6px 2px;
border-right: 1px solid #c7bdca;
border-top: 1px solid #c7bdca;
border-left: 8px solid #c7bdca;
border-bottom: 1px solid #c7bdca;
-webkit-transition-duration: .50s;
}

En un gadget HTML/Javascript pegamos el siguiente código, modificando todo lo que está en negrita:

<center>
<div class="purple"><a href="link" title="home"><font color = "white">home</font></a></div>
</center>

Gris

.grey{
display: inline;
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #e4e4e4, 1px 1px 0 #e4e4e4, -1px -1px 0 #e4e4e4, -1px 1px 0 #e4e4e4, 
1px -1px 0 #e4e4e4;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(240,239,238, 1.0);;
box-shadow: inset 1px 1px 0 #eeedec;
padding: 2px 6px 2px;
border-right: 8px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
-webkit-transition-duration: .50s;
}

.grey:hover {
padding: 5px;
width: justify;
text-align: center;
font-size: 17px;
text-shadow: 2px 1px 0 #e4e4e4, 1px 1px 0 #e4e4e4, -1px -1px 0 #e4e4e4, -1px 1px 0 #e4e4e4, 1px -1px 0 #e4e4e4;
font-family: georgia;
font-style: italic;
text-shadow: inset 2px 1px 0 #f6f6f6;
background: rgba(240,239,238, 1.0);;
box-shadow: inset 1px 1px 0 #eeedec;
padding: 2px 6px 2px;
border-right: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-left: 8px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
-webkit-transition-duration: .50s;
}

En un gadget HTML/Javascript pegamos el siguiente código, modificando todo lo que está en negrita:

<center>
<div class="grey"><a href="link" title="home"><font color = "white">home</font></a></div>
</center>