Galeria de imagens em css

[vini_loock]

Olá.

Estava passeando pela net e encontrei uma galeria de imagens sem nenhuma linguangen além de css.

Muito boa vale apena conferir.

http://www.3site.eu/examples/gallery/

O código fonte é todo comentado. eu nem olhei ainda, mas não deve ser coisa de outro mundo, afinal... é css

Se alguém tiver um tutorial que ensine a fazer isso, seria legal se postasse ai, é bem mais fácil aprender com tutooriais do que olhando o código fonte.

Vlw

[djne]

fiz com os codigos q estao no codigo-fonte ....

ADICIONE O SEGUINTE STYLE (HEAD) :

html, body, ul.thumb, ul.thumb li {
    padding: 0;
    margin: 0;
}
html, body, ul.thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
ul.thumb {
    position: relative;
    list-style: none;
    /* a gradient background with wide diffusion is quite hard
       to handle without Direct2D or better hardware strategies but
       it could make the box-shadow effect more real at the same time.
       Setting it as important we can be sure supported browser will use it
       while other browser will use just the normal background color
    */
    background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important;
    background: #333;
}
ul.thumb li {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 6px 24px 6px;
    background: #FFF;
    width: 150px;
    height: 130px;
    /* box shadow is heavy as well if we need
       to rotate it during the animation or if
       we have not a flat background behind
       The alpha channel needs to work a lot
       but it gives 3D feeling    
    */
    -moz-box-shadow:1px 1px 6px #222;
	-webkit-box-shadow:1px 1px 6px #222;
	box-shadow:1px 1px 6px #222;
    /* to activate transiction FXs
       this is all we need
       specifying "all" means that 
       the browser will try to resolve
       and computate everything
       z-index included
    */
    -webkit-transition: all 3s ease-in-out;
    /* to create a better 3D feeling
       z-index will be in a range from 0 to 10
       this means while another pic is going
       back to its position another rollovered one
       will gradually reach higher z-index
    */
    z-index: 0;
}
ul.thumb li img {
    width: 100%;
    height: 100%;
}
/* each image will have a fake rotation
   to emulate a disordered desk
   It's not clear to me why we like so much
   rotated stuff ... probably because we
   like to put order without effort
   and simply with an hover, or a click?
*/
ul.thumb li:nth-child(1) {
    margin-top: -130px;
    margin-left: -130px;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
ul.thumb li:nth-child(2) {
    margin-top: -120px;
    margin-left: -10px;
    -moz-transform: rotate(19deg);
    -webkit-transform: rotate(19deg);
    transform: rotate(19deg);
}
ul.thumb li:nth-child(3) {
    margin-top: -10px;
    margin-left: -180px;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
ul.thumb li:nth-child(4) {
    margin-top: -50px;
    margin-left: -80px;
    -moz-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
}
ul.thumb li:nth-child(5) {
    margin-top: 20px;
    margin-left: 30px;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
/* here is how the LI element should look
   at the end of the transition which
   will be activated on hover special selector
*/
ul.thumb li:hover{
    z-index: 10;
    /* original image size */
    width: 480px;
    height: 322px;
    /* put the LI in the center (almost due to bottom padding) */
    margin-top: -151px;
    margin-left: -240px;
    /* the effect is a "zoom" one, the shadow will be bigger */
    -moz-box-shadow:8px 8px 24px #111;
	-webkit-box-shadow:8px 8px 24px #111;
	box-shadow:8px 8px 24px #111;
    /* and finally order via zero degrees rotation */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
/* just some credit fixed on the bottom of the page ... */
div.copyright {
    position: fixed;
    width: 100%;
    bottom: 20px;
    color: #666;
    text-align: center;
    font-family: sans-serif;
    font-size: 8pt;
}
div.copyright a {
    color: #555;
    text-decoration: none;
    border-bottom: 1px dotted #999;
}
div.copyright a:hover {
    color: #888;
    border-bottom: 1px dotted #555;
}
[/codebox]

AGORA NO BODY ADICIONE :

[codebox]
<ul class="thumb">
<li>
<img src="IMAGE 01" width="480" height="322" />
</li>
<li>
<img src="IMAGE 02" width="480" height="322" />
</li>
<li>
<img src="IMAGE 03" width="480" height="322" />
</li>
<li>
<img src="IMAGE 04" width="480" height="322" />
</li>
<li>
<img src="IMAGE 05" width="480" height="322" />
</li>
</ul>

é ISSO AEWW.... só DA PRA CINCO FOTOS .. TEM COMO EDITAR LA MAS IRIA SER RUIM DE MAS =D

abraxx!

[_Vinny_]

Movido: de Tutoriais & Dicas - HTML, XHTML, CSS para HTML, XHTML, CSS

------------------------------

@vini_loock

Nem precisa de tutorial. Se você seguir o CSS e HTML você criar a sua própria galeria. O código-fonte fala por si só.

@djne

Para adicionar mais imagens, basta inserir mais:

<li>
<img src="imagem6.jpg" width="480" height="322" />
</li>

Conforme a necessidade da galeria.

[vini_loock]

Sim, sim..

Eu nem tentei fazer. Eu saberia fazer sem copiar aquele exemplo, por isso que coloquei na área de dicas e tutoriais, eu apenas comentei que seria legal se alguém tivesse a fim de fazer um tutorial, ou se tivesse um que postasse la.

Vocês entenderam errado. Mas tudo bem estão perdoados xD.

Se possivel move pra la de novo.

Ah.. e uma correção para adicionar uma nova foto, não é apenas colocar no html:

<li>
<img src="imagem6.jpg" width="480" height="322" />
</li>

Tem que colocar no css:

ul.thumb li:nth-child(5) {
margin-top: 20px;
margin-left: 30px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}

E substituir o numero 5 logo no começo por 6, 7, 8 e assim sucessivamente, por que aqui você está trabalhando com hm.. éh.. hã.. é tipo array, não sei se no css tem o mesmo nome. E mudar o atributo rotate, se não assim vai ficar 2 imagen rotacionadas a mesma quantidade, e não iria aparecer todas.

É isso ai.

Vlw

Editado Maio 23, 2010 por vini_loock

[Betosantanna]

Muito bom esse post comigo a Galeria funcionou perfeitamente no Chrome porem ao tentar abrir a mesma no Internet Explorer aparece apenas a ultima foto, como se as fotos estivessem empillhadas e sem efeito de transição.

alguém sabe que que ta acontecendo?

se só é possivel visualisar essa galeria no Chome.

[*FIT*]

Na verdade o que ocorre é que isso foi feito em CSS3, e o IE ainda não da suporte à ele!

[Betosantanna]

Visto que o IE não da suporte ao CSS3, teria como eu restringir a visualização da minha pagina aos Navegadores que suportam tal linguagem, e para os que não suportam receberem um aviso tipow:

"para visualizar a pagina, utilizar os navegadores tal e tal..."

[*FIT*]

Dê uma lida nesse tópico, http://scriptbrasil.com.br/forum/index.php?showtopic=146842

Com uma pequena alteração você faz o que precisa! ;)

[o_FiGuRa]

isso é facinho de fazer hehehe!