5 maneiras de incrementar suas imagens com CSS | CSS

Aqui estão algumas dicas de como incrementar suas imagens, geralmente estes efeitos são feitos no Photo Shop, porém é muito tedioso e trabalhoso fazer isso a longo prazo. Estas técnicas a seguir vão lhe ajudar a amenizar esta dor rsrs . É claro que se você tiver mais técnicas sobre este assunto você poderá compartilhar conosco.

Drop Shadow Effect | Efeitos de sombra

Adiciona uma sombra usando uma imagem de fundo com algum padding.
Demo

<img class="shadow" src="sample.jpg" alt="" />

img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}[/pre]

<h2>Double Border Effect | Efeitos de bordas duplas</h2>
Esta técnica é bem comum, criamos bordas duplas fazendo o seguinte:
<a href="http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm" target="_blank">Demo</a>

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

Framed Image Effect | Efeitos moldura em imagens

Este efeito é bem legal, a primeira vez que o vi achei que era feito tudo em Photo Shop e depois feito MAP da imagem (engano meu rsrs =)), você poderá ter uma descrição melhor dele no www.webdesignerwall.com. Este efeito basicamente coloca uma camada transparente em cima da imagem. Caso tenha problemas com o IE6 (quem não tem?) você pode ver este tutorial do sohtanaka.com.
Demo

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

.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;
}

Watermark Effect | Efeitos marca de água

Você pode adicionar uma marca de água a uma imagem diminuindo a opacidade da imagem de cima, passando assim a aparecer mais a imagem de baixo. Este efeito é apensa visual, para implementar uma proteção você terá que olhar este tutorial CSS Watermark Tutorial (em breve em PT-Br aqui).
Demo

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

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

Image with Caption | Imagem com caption – legenda

Adicionar uma rápida legenda com posicionamento absoluto e transparência. Caso deseje fazer isso com jQuery você poderá ver um post meu que fala sobre isso que é o Captions em Imagens com Captify | jQuery plugin
Demo

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

.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;
}

Nota:
Post original – O autor do post detem todos os direitos intelectuais dos códigos e exemplos, por isso não foram traduzidos. Site do autor