SpotGeek.net » images

Beautiful icons for your applications

Filipe Teixeira Nunes — Sat, 04 Feb 2012 14:42:19 +0000

http://www.ourtuts.com/30-fresh-and-free-icon-sets-for-your-web-applications/

Legenda em Imagens

Filipe Teixeira Nunes — Mon, 22 Nov 2010 16:09:07 +0000

Um efeito bonito , quando se passa o rato por cima da imagem é aparecer a sua legenda, poupa algum espaço na página e dá um efeito porreiro

HTML

Saiba Mais

Lorem Ipsum
Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley.

CSS
.imgefeito { margin: 0; overflow: hidden; float: left; position: relative; } .imgefeito a { text-decoration: none; float: left; } .imgefeito a:hover { cursor: pointer; }

Estilização da imagem onde aparecerá o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.

.imgefeito a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; }

Em seguida estilizamos o texto Saiba Mais e a “caixa” da legenda que será mostrada quando passarmos o mouse sobre o texto. Perceba o uso de um comando proprietário da Microsoft, –ms-filter para o efeito funcionar no Internet Explorer 8.

.imgefeito a .mais { position: absolute; right: 20px; bottom: 20px; font-size: 1.2em; color: #fff; background: #000; padding: 5px 10px; filter:alpha(opacity=65); opacity:.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/ } .imgefeito a:hover .desc{ display: block; font-size: 1.2em; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 615px; border-top: 1px solid #999; } .imgefeito a:hover .desc strong { display: block; margin-bottom: 5px; font-size:1.5em; }

retirado de kadunew.com

Galeria de Imagens

Filipe Teixeira Nunes — Sun, 15 Aug 2010 21:36:40 +0000

Boa selecção de galeria de imagens para adicionar em sites.

http://desizntech.info/2010/08/25-fresh-jquery-plugin-that-will-rock-your-world/

Pixlr — editor de imagens online

Filipe Teixeira Nunes — Sun, 13 Jun 2010 00:35:53 +0000

Agora editar as suas imagens nunca foi tão fácil, já não precisa de instalar um programa de edição de imagens no seu computador, basta aceder ao site http://www.pixlr.com/editor/ e editar as suas imagens o interface é bastante simples e acessível é muito parecido ao interface do photoshop

http://www.pixlr.com/editor/