Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Efecto polaroid en tus imágenes con css





El efecto que os presento hoy es un efecto simulando la popular cámara de fotos instantánea de Polaroid, el efecto en las imágenes, se añadirán sólo con CSS, es un efecto espectacular, divertido, y muy original, para darle luz y originalidad, a tus fotos de tu web o blog. Sí lo quieres insertar en tus imágenes, no esperes más y añádelo donde desees, pero primero una demostración de lo que hablamos, en la siguiente imagen que verás a continuación:



Iván, Dec '06



Para añadir este efecto debes de añadir este css en tu plantilla de Blogger antes...

 ]]></b:skin>

.polaroid {
  position: relative;
  width: 220px;
}

.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}

.polaroid img:hover {
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #888;
}

Y ahora añadir el Html con un div identificativo con la clase polaroid, por ejemplo:

<div class="polaroid">
  <p>Nombre, Dec '02</p>
  <img src="Url_De_La_Imagen">
</div>

Por último deberás de añadir la fuente de Google Web Font, que se llama Kaushan:

</head>

<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">


Aizum Blog, viernes, mayo 10, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9