Usar Photoshop para personalizar imágenes puede ser a veces un trabajo tedioso. En ocasiones se tarda mucho tiempo, ralentiza la carga de las páginas… Por eso si algo se puede hacer con CSS, mejor hacerlo. Os vamos a enseñar 5 técnicas para personalizar imágenes usando CSS y una simple imagen pero solo para dar el efecto. Algunas técnicas se pueden realizar simplemente usando CSS3 si miramos la entrada que publicamos anteriormente.

Empezemos:

Efecto de sombra

Podemos crear un efecto de sombra en nuestra imagen usando una imagen de fondo con padding:

HTML

<img class="shadow dtse-img dtse-post-1886" src="sample.jpg" alt="" />

CSS

img.shadow dtse-img dtse-post-1886 {
background: url(shadow dtse-img dtse-post-1886-1000x1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

Estandarización

CSS 2.1 válido

XHTML 1.0 válido

Ejemplo de su funcionamiento

Ver ejemplo de su funcionamiento.

Efecto de doble borde

Una de las técnicas más conocidas. Crearemos un efecto de doble borde alrededor de la imagen:

HTML

<img class="double-border dtse-img dtse-post-1886" src="sample.jpg" alt="" />

CSS

img.double-border dtse-img dtse-post-1886 {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

Estandarización

CSS 2.1 válido

XHTML 1.0 válido

Ejemplo de su funcionamiento

Ver ejemplo de su funcionamiento.

Efecto de frame

Esta técnica crea una capa transparent dtse-img dtse-post-1886e con imagen superpuesta para lograr el efecto:

HTML

<div class="frame-block">
	<span>&nbsp;</span>
	<img src="sample.jpg" alt="" />
</div>

CSS

.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

Estandarización

CSS 2.1 inválido

XHTML 1.0 válido

Problemas con IE 6

IE 6 no reconoce la transparencia, así que debemos aplicar este hack: Solución a la transparencia PNG en IE 6

Ejemplo de su funcionamiento

Ver ejemplo de su funcionamiento.

Marca de agua

Podemos crear un efecto de marca de agua en las imágenes:

HTML

<div class="transp-block">
	<img class="transparent dtse-img dtse-post-1886" src="sample.jpg" alt="" />
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent dtse-img dtse-post-1886 {
	filter:alpha(opacity=75);
	opacity:.75;
}

Estandarización

CSS 2.1 inválido

XHTML 1.0 válido

Ejemplo de su funcionamiento

Ver ejemplo de su funcionamiento.

Imagen con título

Podemos obtener el efecto de un título encima de una imagen si seguimos los siguientes pasos:

HTML

<div class="img-desc">
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

Estandarización

CSS 2.1 inválido

XHTML 1.0 válido

Ejemplo de su funcionamiento

Ver ejemplo de su funcionamiento.

En resumen, es conveniente usar CSS siempre que podamos, nuestra página será mucho más rápida y accesible.

Vía | Sohtanaka

Compartir/Guardar