Gadgets em Hover

Olá uvas verdes!

Eu estou muito ausente ultimamente não é?! rsrs vocês nem devem ter percebido sqn- hehehe

Mais na verdade estava cheia de preguiça para fazer um post, sem falar nas provas, testes e trabalhos, mais tudo bem pois hoje não estou com preguiça, e já que irei passar o dia fora então resolvi fazer uma postagem rapidinha aqui.

Eu estava sem ideias do que trazer para vocês, mais então vi um pedido na C-Box, e irei atendê-lo, o pedido é da Ana, ela pediu um tutorial de como fazer gadgets coloridos, assim como o nosso.

Para fazer gadgets assim, usei o tutorial de gadgets em hover, e modifiquei, então irei ensinar para vocês.

Vamos lá amoras?

Vá em seu HTML e procure por Widgets, aparecerá isso:

/* Widgets

----------------------------------------------- */

Apague tudo que estiver dentro do Widgets, ou seja, em baixo, e substitua por esse código:

h2 {

font: normal  29px 'Arial';

text-shadow:#A58281 0px 0px 2px;

text-align: center;

color:  #A58281;

}

.sidebar .widget {

border-bottom: 2px solid #8fcfd2;

-webkit-transition-duration: .50s;

border-top: 2px solid #8fcfd2;

padding-bottom: 20px;

margin: 10px 0;

background:#fff ;

padding:12px;

box-shadow: inset 0 0 100px #73CACE, 0 0 6px #ccc;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomleft: 5px;

border-top-right-radius: 5px;

border-bottom-left-radius: 5px;

}

.sidebar .widget:hover {

border-bottom: 2px solid #8fcfd2;

border-top: 2px solid #8fcfd2;

padding-bottom: 20px;

-webkit-transition-duration: .50s;

margin: 10px 0;

background:#000 ;

padding:12px;

box-shadow: inset 0 0 100px #89CDD0, 0 0 6px #ccc;

}

.sidebar .widget:first-child {

margin-top: 0;

}

.sidebar .widget:last-child {

margin-bottom: 0;

padding-bottom: 0;

}

.footer-inner .widget,

.sidebar .widget {

font: normal normal 11px Verdana, Geneva, sans-serif;

color: #6e6e6e;

}

.footer-inner .widget a:link {

color: #000000;

text-decoration: none;

}

.footer-inner .widget a:visited {

color: #000000;

}

.footer-inner .widget a:hover {

color: #8B658B;

text-decoration: none;

}

.widget .zippy {

color: #000000;

}

.footer-inner {

background: transparent none repeat scroll top center;

}

No código background:#000 ; que se repete duas vezes, coloquei o hover do branco para o preto, vocês podem mudar as cores do hover, podem deixar transparente também como aqui no A.N que deixei só as bordas.

Espero que tenham gostado do tutorial e agradeço pelo pedido da Ana ^^'