Colors Filters

Hola blogueras y blogueros hoy les traigo un tuto con mucho color para sus imagenes..aww hoy me toco descanso asi que aprovecho para un tutorial n.n

empezemos ^^

las imagenes se verian asi..al pasar el cursor sobre ellas, vuelven a su color original

Dar Click Aqui Para Ir A La Demostracion

  codigo y ponlo antes de ]]></b:skin>

 .wrap {
    overflow: hidden;
    width: 840px;
    margin: 0 auto;
   }
.tint {
    position: relative;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    -moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  }
  .tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5);
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
  }
  .tint:hover:before {
    background: none;
  }
  .t2:before {
    background: rgba(0,0,255, 0.5);
  }
  .t3:before {
    background: rgba(255,0,0, 0.5);
  }
  .t4:before {
    background: rgba(0,255,0, 0.5);
  }
  .t5:before {
    background: rgba(255,0,240, 0.5);
  }
  .t6:before {
    background: rgba(255,102,0, 0.6);
  }

 das la opcion guardar.

Ahora este codigo es donde pones tus imagenes y el tipo de color de filter que desees.....ya sea un solo color o todos los colores. (recuerda poner este codigo en la pestañita de tu entrada HTML o en un gadget html oki)

<figure class="tint">
      <img alt="" height="200" src="http://i2.esmas.com/galerias/fotos/2012/7/verde_8-ba7e8290-15d2-1030-a6a8-0019b9d5c8df.jpg" width="160" />
    </figure>
    
    <figure class="tint t2">
      <img alt="" height="200" src="http://i2.esmas.com/galerias/fotos/2012/7/verde_7-b0561774-15d2-1030-a6a8-0019b9d5c8df.jpg" width="160" />
    </figure>
    
    <figure class="tint t3">
      <img alt="" height="200" src="http://marcianos.com.mx/wp-content/uploads/2011/12/Katy-Perry-vestidos_8.jpg" width="160" />
    </figure>
    
    <figure class="tint t4">
      <img alt="" height="200" src="http://todokatyperry.com/wp-content/uploads/images/38/katy-perry-0__400x250.jpg" width="160" />
    </figure>
    
    <figure class="tint t5">
      <img alt="" height="200" src="http://st.gdefon.ru/wallpapers_original/actors/67243_kyeti-perri_or_katy-perry_1600x1200_(www.GdeFon.ru).jpg" width="160" />
    </figure>
    
    <figure class="tint t6">
      <img alt="" height="200" src="http://todokatyperry.com/wp-content/uploads/images/30/katy-perry-0.jpg" width="160" />
    </figure>


Explicando:

el color rosa es donde pondras la direccion de la imagen.


Colores de los filtros:

.tint:before { --> Corresponde al filtro color azul celeste (0,255,255, 0.5).

.t2:before {  --> Corresponde al filtro color moradito (0,0,255, 0.5)

.t3:before {  --> Corresponde al filtro color rojo claro (255,0,0, 0.5)

.t4:before { --> Corresponde al filtro color verde (0,255,0, 0.5)

.t5:before {  --> Corresponde al filtro color fushia (255,0,240, 0.5)

.t6:before { --> Corresponde al color naranja (255,102,0, 0.6)

NOTA: Si quieres un solo color solo tienes que cambiar el color en donde señalo con color rojo y quitar el parte del codigo desde t2:before {

osea que el codigo para un solo color seria asi:

.wrap {
    overflow: hidden;
    width: 840px;
    margin: 0 auto;
   }

  .tint {
    position: relative;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    -moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  }
  
  .tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5);
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
  }
  
  .tint:hover:before {
    background: none;
  }



impressivewebs.com

uff se me hizo un poco largo el tuto T.T espero haberme explicado bien n.n besos a todas :)