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 PhotoShop, porém é muito tedioso e trabalhoso fazer isso a longo prazo. Estas técnicas vão 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.

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

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

Double Border Effect | Efeitos de bordas duplas

Esta técnica é bem comum, criamos bordas duplas fazendo o seguinte:

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

img.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.

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

<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

<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(OFFLINE)