CSS sombra interior para una imagen

Comment

Cliente (HTML, Javascript, CSS) Informática Programación

Si quieres darle sombra interior a una imagen en tu página web, no es necesario recurrir a un editor de imagines. Es posible hacerlo con CSS, utilizando la propiedad que además es compatible con Webkit (Safari & Chrome), Firefox, Opera, and IE9, por lo que no hay razón para dejar de aprovechar.

Es como agregar un efecto viñeta a las fotos (con Photoshop).


<div class="vigneta">
<img src="fiesta.png" alt="fiesta" class="foto_auto"/>
</div>


.vigneta{
box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
}
img.foto_auto{
z-index: -1;
position: relative;
}

Este es el resultado:

fiesta

Deja un comentario