• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

16 de junho de 2013

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 ^^'

9 comentários:

  1. Fica super lindo *-*

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  2. Fica muito bonito obrigada pelo ótimo tutorial!!

    http://sarang-cute.blogspot.com.br/

    ResponderExcluir
  3. Ótimo tutorial, deixa o blog bem fofinho :3
    xoxo ♥

    ResponderExcluir
  4. Já conhecia o tutorial, acho bem útil e legal, fica bem bonito quando aplicado ^^

    @catching--stars

    ResponderExcluir
  5. Fica super lindo, adorei.
    Beijos!!

    http://adoramosmeianoiteemeia.blogspot.com.br/

    ResponderExcluir
  6. Esse tuto fica super lindo <3

    Kissus!
    http://criticas-on.blogspot.com.br/

    ResponderExcluir
  7. Fica fofo e claro eu gosto bastante de usar <333
    Poxa, nem me fale, minahs provas estão começando e cara, não paro de pensar em férias <3333

    ResponderExcluir
  8. MDSS genial e super lindo *-* adorei!

    XOXO-
    jovenclube(.blogspot.com.br)

    ResponderExcluir