Menu Lolly - Exclusivo.

Olá pessoal, tudo bem com vocês? Comigo sim >3< A partir de hoje todas essas sumidinhas minhas já vão acabar, minhas provas já acabaram. Na verdade não ainda tem um simulado, porém não estudo pra ele. Me pediram pra fazer um modelinho de player, eu vou fazer mas é que a dona dele a Roh ainda não me autorizou ,então decidi atender logo á um pedido que me fizeram na ask que foi o menu lolly que eu adorei, espero que também gostem *u*

Modelo 01 .

Sobre o menu : Esse menu não tem nenhum tipo de hover ele é apenas assim, tentei fazer com que ele ficasse fofo e simples como pediram. Esse tom cinza na fonte poderá ser mudado quando você personalizar os links do blog pelo html. Logo abaixo você verá o código.

  .lolly {
font-family: Verdana; /* fonte */
font-size: 10px; /* tamanho da fonte */
background: #D4CDDB;
text-align: center; /* centralização do texto */
width: 46px; /* largura do menu */
color: #fff;
text-shadow: 1px 1px 0 #fff;
border: #c7d4df 1px solid;
display: inline-block;
box-shadow: inset 1px 1px 0 #fff;
background: #d0dbe4;
background: -moz-linear-gradient(top,  #d0dbe4 0%, #e8edf2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(100%,#e8edf2));
background: -webkit-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -o-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -ms-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: linear-gradient(to bottom,  #d0dbe4 0%,#e8edf2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e8edf2',GradientType=0 );
}
border: 1px dotted #e4c9e2;
border-bottom: 2px dotted #d0dbe4;
padding: 2px; */
margin: 2px;
}

Modelo 02 .

 Esse modelo é igualzinho ao primeiro eu só mudei as cores, também não tem hover.

.lolly {

font-family: Verdana; /* fonte */

font-size: 10px; /* tamanho da fonte */

background: #D4CDDB; 

text-align: center; /* centralização do texto */

width: 46px; /* largura do menu */

color: #fff;

text-shadow: 1px 1px 0 #fff;

border: #c7d4df 1px solid;

display: inline-block;

box-shadow: inset 1px 1px 0 #fff;

color: #fff;

border: #ded6dd 1px solid;

box-shadow: inset 1px 1px 0 #f7f4f6;

background: #e8e1e7;

background: -moz-linear-gradient(top,  #e8e1e7 0%, #f4eff3 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e1e7), color-stop(100%,#f4eff3));

background: -webkit-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);

background: -o-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);

background: -ms-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);

background: linear-gradient(to bottom,  #e8e1e7 0%,#f4eff3 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e1e7', endColorstr='#f4eff3',GradientType=0 );

}

border: 1px dotted #e4c9e2;

border-bottom: 2px dotted #d0dbe4; 

padding: 2px; */

margin: 2px; 

}

Depois coloquem esse código abaixo em um html/javascript

<div class="lolly"><a href="LINK DA PÁGINA">menu</a></div>

<div class="lolly"><a href="LINK DA PÁGINA">lolly</a></div>

<div class="lolly"><a href="LINK DA PÁGINA">por</a></div>

<div class="lolly"><a href="LINK DA PÁGINA">anny</a></div>

* Não é possível usar os dois modelos de uma vez em um layout *
Créditos a Mack pelos gradients que eu utilizei >3<