sábado, setembro 29

Efeito Wishlist Personalizado



Cole isso no seu CSS

.wish{font-family:tahoma; color:#fff; background:#f7d2e2; 
padding:2px 0px 2px 10px; border-left-width:3px;border-left-style:solid; 
margin-bottom:4px; border-left-color:#EDA4CA; transition:all 2s linear; 
text-shadow: 1px 1px 1px #f1b1cd; -moz-transition:all 2s linear; 
-webkit-transition:all 2s linear; -o-transition:all 2s linear; } 

.wish:hover{font-family:tahoma; color: #fff; margin-bottom:4px; 
background: #b991b7; padding:2px 0px 2px 10px; border-left-width:3px; 
text-shadow: 1px 1px 1px #ba91b6; border-left-style:solid;
border-left-color:#aa79a7; transition:all 2s linear; -moz-transition:all 2s linear;
 -webkit-transition:all 2s linear; -o-transition:all 2s linear; } 


E isso aonde você quer que a listinha apareça

 <div class="wish">Frase</div> 
 <div class="wish">Frase</div> 
 <div class="wish">Frase</div> 
 <div class="wish">Frase</div> 
 <div class="wish">Frase</div> 


Se quiser que apareça riscado, é adicionar o <strike></strike> na frase, assim:

<div class="wish"><strike>ALGO AQUI</strike></div> 

2 comentários:

  1. Ammeii ! Muito bom seu blog :) Vou usar, quando terminar de fazer o layout eu crédito!
    Beijos | i-nventar.blogspot.com

    ResponderExcluir
  2. eu usei no mei tumblr! ficou perfeito.

    ResponderExcluir