Beleza galera, aqui veremos uns efeitos legais com images png transparentes que servem de molduras apara as imagens
Download arquivos
Site de referência
CSS – Efeitos em galeria de imagens from Felipe Girotti on Vimeo.
Código da video aula HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galeria</title>
<link rel="stylesheet" type="text/css" href="galeria.css" />
<!--[if lt IE 7]>
<style type="text/css">
ul li span { behavior: url(iepngfix.htc); }
</style>
<![endif]-->
</head>
<body>
<div class="icons">
<ul>
<li><span></span><img src="images/inverno.jpg" height="80" width="100" /></li>
<li><span></span><img src="images/montanha.jpg" height="80" width="100" /></li>
<li><span></span><img src="images/ninfeia.jpg" height="80" width="100" /></li>
<li><span></span><img src="images/porsol.jpg" height="80" width="100" /></li>
</ul>
</div>
<div class="molduras">
<ul>
<li><span></span><img src="images/inverno.jpg" height="120" width="172" /></li>
<li><span></span><img src="images/montanha.jpg" height="120" width="172 "/></li>
<li><span></span><img src="images/ninfeia.jpg" height="120" width="172" /></li>
<li><span></span><img src="images/porsol.jpg" height="120" width="172" /></li>
</ul>
</div>
<div class="mol">
<ul>
<li><span></span><img src="images/inverno.jpg" height="120" width="172" /></li>
<li><span></span><img src="images/montanha.jpg" height="120" width="172 "/></li>
<li><span></span><img src="images/ninfeia.jpg" height="120" width="172" /></li>
<li><span></span><img src="images/porsol.jpg" height="120" width="172" /></li>
</ul>
</div>
</body>
</html>
Código da video aula CSS
*{margin:0;padding:0}
.icons{ padding:10px;}
.icons ul{ list-style:none;}
.icons li{ padding:4px;width:110px; height:90px;float:left;position:relative;margin:10px;display:inline;}
.icons ul li img{ padding:3px;border:1px solid #c0c0c0;}
.icons ul li span{position:absolute; left:50px; top:-8px; height:21px; width:28px; background:url(images/pin.png) no-repeat;display:block;}
.molduras{ padding:10px;clear:both;}
.molduras ul{ list-style:none;}
.molduras li{ padding:4px;width:200px; height:150px;float:left;position:relative;margin:10px;display:inline;}
.molduras ul li span{position:absolute;top:-5px; left:-1px; height:134px; width:181px; background:url(images/brush-border.png) no-repeat;display:block;}
.mol{ padding:10px;clear:both;}
.mol ul{ list-style:none;}
.mol li{ padding:4px;width:200px; height:150px;float:left;position:relative;margin:10px;display:inline;}
.mol li img{ padding:3px;}
.mol ul li span{position:absolute;top:-13px; left:-10px; height:72px; width:122px; background:url(images/floral-corner.png) no-repeat;display:block;}
como colocar marca dagua em uma galeria de imagens com uploads,galeria ligth box.
aquela galeria que voce ensinou a montar ,aquela administravel nao funciona no uol,pois o sistema nao conseguiu renomear a pasta pelo id,me ajude por favor ok?
@luiz alberto, Para colcoar marca d’agua automaticamente com php tem que criar um scrip e muitas outras coisinhas ara fazer, e Luiz se não esta dadno certo ai no UOL, vem pra WEBGTi preços mais em conta qualidade nos serviços, e estes sistema funciona perfeitamente na WEBGTi
muito boa a video aula! parabéns felipão…
valeuuuuu felipe valeuu mesmoooo so uma coisa ruim a imagem do video nao ficou muito boa nao mais valeu…
@marcus, coloquei o video no vimeo ao inves do videolog que tava antes, agora ta melhor