Imagenes con sombra en CSS Enero 4, 2007
Publicado por lineadecodigo en : CSS , trackbackCSS nace con la idea de ayudarnos en el diseño de nuestras páginas web. Con la finalidad de dar vida y colorido a las encorsetadas páginas HTML. Este ejemplo nos explica como utilizar CSS para poner una sombra a una imágen, de tal manera, que esta, nos quede más "resultona".
La idea general será la de poner una imagen dentro de una capa. Posteriormente mover la imágen hacia la izquierda y hacia arriba. De esta manera queda "como por encima" de la capa. De esta manera podremos utilizar la capa para crear la sombra.
Lo primero que tenemos que hacer es crear una capa con una imágen dentro.
<div class="sombra"> <img src="lineadecodigo.jpg" title="linea de codigo"/> </div>
A dicha capa le asignaremos un estilo CSS. En este caso lo hemos llamado sombra. A si que ahora deberemos de empezar a manipular dicho estilo y las imagenes contenidad dentro del mismo.
Hemos dicho que la imagen hay que desplazarla a la izquierda y arriba. Para ello jugamos con la propiedad .margin de CSS. De esta manera sus margenes izquierdo y superior serán negativos.
Veamos el código:
.sombra img {
display: block;
position: relative;
margin: -6px 6px 6px -6px;
}
Además hemos añadido otros atributos como la forma de visualización (display). La cual hemos indicado que sea un bloque. El tipo de posicionamiento (position), el cual hemos indicado que sea relativo. Es decir, hace referencia al sitio donde está ubicada la imágen.
Ahora que tenemos desplazada la imagen, lo que deberemos de hacer es definir el estilo de la capa. Esta, al quedar detras de la imágen vendra a tener la sombra. Para ello tenemos dos alternativas:
- Utilizar una imágen de fondo de la capa. Si queremos una sombra degradada
- Un fondo gris. Si queremos una sombra más compacta.
Quizas la segunda forma sea más rustica, pero es la más simple y la que hace que no requeramos de algún programa de manejo de gráficos para generar el difuminado.
Es por ello que nuestro estilo sombra quedará de la siguiente forma:
.sombra {
float:left;
background-color: #A7A7A7;
}
Utilizamos el atributo background-color para indicar el color gris (#A7A7A7) como sombra.
Solo nos queda un pequeño inconveniente. Y es que al desplazar los margenes de la imagen, estos se comerán el contenido que pongamos fuera de la capa. Es por ello que deberemos de aumentar los margenes de la clase sombra. Finalmente nuestra clase sombra queda como sigue:
.sombra {
float:left;
background-color: #A7A7A7;
margin: 10px 0 0 5px;
}
El efecto será el siguiente:
La página HTML sería:
<html>
<head>
<style>
.sombra {
float:left;
background-color: #A7A7A7;
margin: 10px 0 0 5px;
}
.sombra img {
display: block;
position: relative;
background-color: #fff;
margin: -6px 6px 6px -6px;
}
</style>
</head>
<body>
<div class="sombra">
<img src="lineadecodigo.jpg" title="linea de codigo" width="100px" height="100px"/>
</div>
</body>
</html>
Podeis leer más sobre el tema y ver como se utiliza el degradado de la sombra con imagenes en CSS Drop Shadows
Articulos Similares:
- Boton con imagen de fondo en CSS
- Color de fondo del textarea
- Margenes de una página web
- Poner un color de fondo a nuestra web
- Resaltando los enlaces
Enviar entrada por email
| 
Imprimir
| 15572 visitas
(1 votos, media: 5.00 de 5)
Loading ...
Comentarios»
Muy buena técnica
Excelente técnica. Simple y muy efectiva. Mis felicitaciones.
Excelente camarada ahora hay que aplicarla en nuestros desarrollos WEB
Buenisimo, muy facil y practico
Quiero imagenes de las clases de lineas ok.