tecnicas-personalizar-imagen-css

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

efecto-sombra-css

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

HTML

CSS

img.shadow {
background: url(shadow-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

efecto-doble-borde-css

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

HTML

CSS

img.double-border {
	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

efecto-frame-css

Esta técnica crea una capa transparente con imagen superpuesta para lograr el efecto:

HTML

<div class="frame-block">
	<span>&amp;nbsp;</span>
	
</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

efecto-marca-agua-css

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

HTML

<div class="transp-block">
	
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	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

efecto-titulo-css

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

HTML

<div class="img-desc">
	
	<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