Mivel többen jeleztétek, hogy több galéria is lehetne az oldalon, úgy gondoltam egy másik számomra érdekes galéria modult mutatnék be nektek. Ez nem más, mint a polaroid technikára hajazó megjelenítés. A példában ismét a HTML5, valamint főként a CSS3-ra fogunk építkezni JavaScript nélkül. Itt is külön mutatnám be nektek a HTML5 és a CSS3 részt. A demókat érdemes Firefox-ban vagy Chrome-ban megtekinteni, mert ugyan az IE egy szuper böngésző, de nem 100%-ig támogatja a CSS3-at. A kódból kiemelném a box-shadow és a transform: rotate elemeket.
Nézzük is meg ezeknek a paraméterezését, hogy is működnek.
- box-shadow – Szerintem az egyik legjobb újdonság, mert kép felhasználás nélkül tudunk árnyékolást készíteni vele. Használata:
box-shadow: horizontális árnyék, vertikális árnyék, homályosítás rgba(szín, átlátszóság) A galériánkban aktívan fogjuk használni. - transform: rotate (deg) – Elforgatás, szintén nagyon hasznos a képgalériák készítéséhez.
Polaroid galéria demo
Akkor lássuk a HTML5 kódunkat, ami igazából legalább annyira egyszerű, mint az előző slider galéria esetében. A div id-ja fogja meghatározni, hogy jobbra, vagy balra forgatjuk a képet (értelemszerűen, right, left). A caption-ba kerül a képfelirat.
<!DOCTYPE html> <html> <head> <title>Polaroid</title> <style></style> </head> <body> <h1>Polaroid demó</h1> <p> </p> <div class="images right"> <img src="kep4.jpg"> <p class="caption">Ez most egy polaroid?!</p> </div> <div class="images left"> <img src="kep4.jpg"> <p class="caption">Ez most egy polaroid?!</p> </div> </body> </html>
A szemfülesek már észre is vehették, hogy a head-ben használtam a <style>-t úgy, hogy nem került bele tartalom, lássuk mit is teszünk oda. Következzen a galériánk ütő-ere a CSS3 rész. A kód nagy részét feliratoztam, a két spéci effektet pedig már fent megnéztük.
<style>
body {
width: 800px;
margin: 10px auto;
text-align: center;
}
.images {
width: 600px; /*képméretezés*/
height: 375px; /*bármekkora lehet, képedtől függően.*/
overflow: hidden; /*ez kiszedhető, ha átméretezted a képeket. én csak azért tettem be, hogy ne kelljen szöszölni vele.*/
padding: 10px 10px 25px 10px;
border: 2px solid #BFBFBF; /*szegély*/
background-color: white; /*háttér színe*/
-webkit-transform: rotate(10deg); /*elforgatás*/
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*árnyék effekt, rgba-ban megadva, hogy szebb legyen.*/
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);/*paraméterek: balról->jobbra horizontális árnyék, vertikális árnyék, */
box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*homályosítás, rgba(szín, átlátszóság)*/
}
.images .caption {/*képfelirat*/
margin: 0;
font-size: 14px;
}
.right { /*finomhangolások jobb illetve bal esetén*/
float: right;
margin: 30px auto;
}
.left {
float: left;
margin: 30px auto;
}
.left.images { /*az alap forgatáshoz képest*/
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
</style>
A Polaroid gallery demo-t (statikus) itt meg tudod tekinteni.
Persze, ez még mindig nem az igazi, hiányzik belőle valami, ezért piszkáljuk meg még egy picit, hátha több is kihozható belőle. 
Csináljuk meg, hogy mikor fölé visszük az egeret, vagy rákattintunk, akkor egy kis animációval mozogjon a képünk vissza egészen 0 fokig. Szebb nem lesz, de talán, mint effekt érdekes lehet. Viszonylag egyszerűen ki tudjuk bővíteni a már meglévő CSS3 kódunkat és egy részét ki is dobhatjuk. A HTML forrásból kivettem a második képet, mivel a demo-hoz nekem egy is elegendő. Ezért a következő lesz:
<!DOCTYPE html> <html> <head> <title>Polaroid animáció</title> <style></style> </head> <body> <h1>Polaroid demó</h1> <p> </p> <div class="images"> <img src="kep4.jpg"> <p class="caption">Ez most egy polaroid?!</p> </div> </body> </html>
És igen, itt is meghagytam a <style> részt, hiszen oda fog kerülni a következő, az előzőekhez képest egy hajszálnyit módosított CSS3 kódsorunk, amit igazából egy új elemmel bővítettünk, az pedig a transition elem. Ez az elem felel az átmenetért a két állapot között, illetve annak időtartamáról (2s). Kigyomláltam belőle a bal-jobb részt, hiszen itt van egy alap állapotom, amiből visszaáll eredetibe a kép, tehát nincs rá szükségünk. Azt hogy merre legyen az alapállapotban forgatva, megadhatjuk a transform: rotate érték módosításával. A végeredményem valahogy így néz ki:
<style>
body {
width: 800px;
margin: 10px auto;
text-align: center;
}
.images {
width: 600px; /*képméretezés*/
height: 375px; /*bármekkora lehet, képedtől függően.*/
overflow: hidden; /*ez kiszedhető, ha átméretezted a képeket. én csak azért tettem be, hogy ne kelljen szöszölni vele.*/
padding: 10px 10px 25px 10px;
border: 2px solid #BFBFBF; /*szegély*/
background-color: white; /*háttér színe*/
-webkit-transform: rotate(10deg); /*elforgatás*/
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*árnyék effekt, rgba-ban megadva, hogy szebb legyen.*/
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);/*paraméterek: balról->jobbra horizontális árnyék, vertikális árnyék, */
box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*homályosítás, rgba(szín, átlátszóság)*/
transition: width 2s, height 2s, transform 2s; /*hogy ne legyen túl gyors az átmenet a kettő között.*/
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-ms-transition: width 2s, height 2s, -ms-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
.images .caption {/*képfelirat*/
margin: 0;
font-size: 14px;
}
.images:hover,
.images:focus,
.images:active { /*Bármilyen esemény esetén visszaforgatjuk*/*/
border-color: #BFBFBF;
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*fentebb már részleteztük.*/
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
-webkit-transform: rotate(0deg); /*visszaforgatjuk egyenesbe*/
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
A Polaroid gallery demo-t (dinamikus) itt meg tudod tekinteni.
Internet Explorer valamilyen időbuborékba került, ezért nem akar menni a lassú átmenet. Aki megfejti, hogy miért nem, annak küldök egy virtuális csokit. 
Ha már eddig eljutottunk, ne álljunk meg itt. Természetesen ezzel már lehet csinálni szép galériákat, de nézzünk egy inkább érdekes, szöszölős példát. Az alapját a fentebb leírtak képezik, viszont ennél a változatnál, képenként kell definiálnunk bizonyos dolgokat (helyzet, méret, elforgatás). Elsőre ijesztőnek tűnhet, de valójában ha sok képet megcsinálunk így, nagyon jól tud mutatni.
Polaroid album
Lássuk először a HTML részt. Nem sokat változott az előzőekhez képest, talán annyi, hogy több class-t használunk.
<!DOCTYPE html> <html> <head> <title>Polaroid Album</title> <style></style> </head> <body> <h1>Polaroid Album</h1> <div class="album"> <p class="large kep img1"><img src="kep1.jpg" alt="">Kép 1</p> <p class="kep img2"><img src="kep2.jpg" alt="">Kép 2</p> <p class="small kep img3"><img src="kep3.jpg" alt="">Kép 3</p> <p class="medium kep img4"><img src="kep4.jpg" alt="">Kép 4</p> <p class="kep img5"><img src="kep5.jpg" alt="">Kép 5</p> </div> </body> </html>
Ezután nézzük a CSS3 részt, ahol tényleg képenként le kell definiálni, hogy mi hol helyezkedik el, viszont pont ezért fog jól kinézni. A változást a már bemutatásra került z-index jelenti, a többi már szerepelt feljebb. A képenkénti definíció pedig magáért beszél. Érdemes próbálgatni, mert tényleg szép dolgok csinálhatóak így.
<style>
p.kep {
display: block;
text-decoration:none;
padding: 10px 10px 25px 10px;
width: 200px;
border: 2px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*árnyék effekt, rgba-ban megadva, hogy szebb legyen.*/
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);/*paraméterek: balról->jobbra horizontális árnyék, vertikális árnyék, */
box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*homályosítás, rgba(szín, átlátszóság)*/
-webkit-transition: -webkit-transform 0.6s ease-in;
transition: width 1s, height 1s, transform 1s; /*hogy ne legyen túl gyors az átmenet a kettő között.*/
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-ms-transition: width 1s, height 1s, -ms-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
p.kep:hover,
p.kep:focus,
p.kep:active {
z-index: 10;
border-color: #BFBFBF;
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /*fentebb már részleteztük.*/
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
-webkit-transform: rotate(0deg); /*visszaforgatjuk egyenesbe*/
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.kep img {
margin: 0 0 15px;
width: 200px;
height: 200px;
}
p img {
border: none;
display: block;
}
.album {
position: relative;
width: 90%;
margin: 0 auto;
height: 500px;
margin-top: 50px;
min-width: 900px;
max-width: 1000px;
}
.album .kep {
position: absolute;
}
.album .small { /*képek különböző méretben*/
width: 150px;
padding: 10px 10px 10px 10px;
font-size: 10px;
}
.album .small img {
width: 150px;
height: 150px;
}
.album .medium {
width: 250px;
padding: 10px 10px 15px 10px;
font-size: 13px;
}
.album .medium img {
width: 250px;
height: 250px;
}
.album .large {
width: 350px;
padding: 10px 10px 20px 10px;
font-size: 16px;
}
.album .large img {
width: 350px;
height: 350px;
}
.album .img1 { /*egyes képek definiálása, hol, mennyire elforgatva.*/
bottom: 10px;
right: 400px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.album .img2 {
top: 50px;
right: 10px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.album .img3 {
left: 400px;
top: 300px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.album .img4 {
top: 30px;
left: 500px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.album .img5 {
bottom: 0;
right: 50px;
-webkit-transform: rotate(11deg);
-moz-transform: rotate(11deg);
transform: rotate(11deg);
}
</style>
A polaroid album demó itt megtekinthető.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.
Az Internet Explorer-ben tényleg nem az igazi a második példa, egyébként teljesen korrekt, ha valaki megfejti, akkor tedd majd ki légyszíves a megoldást. Köszi.
Nagyon jó kép, és jópofa galéria, köszi. A csoki sajnos nem lesz az enyém..
Jo otlet. Viszont ezt a galeriat tipikusan nem hoverre szoktak felloni, hanem clickre es onblurra. Megmondom azt is, hogy miert. A Kep 1 amikor beforog pont teljes egeszeben eltakarja a Kep 3-at, igy az nem valik utana kivalaszthatova. Az egyeduli megoldas a Kep 1-Kep 4-Kep 3 utvonal, ami nem feltetlen idealis. Persze ezen meg lehetne segiteni a Kep 3 elcsusztatasaval.
Amin viszont kevesbe, az az, hogy a felhasznalok altalaban nem celtudatosak. Tehat nem fog kozveltenul arra a kepre navigalni, amit meg szeretne nezni, ha csak gondolkodik az egerrel, es erre megindul az egesz album, az kellemetlen erzeseket tud szulni.
Szoval, bar jo a megoldas, sajnos az esetek tobbsegeben megiscsak kell egy kis javascript, legalabb annyira hogy a plusz osztalyt felrakja a kepekre onclick-re (mivel ez jelenleg CSS-ben meg nem elerheto esemeny).
Igen, csak nem akartam javascriptet használni. Ha van kedved megcsinálni, és hozzájárulsz, akkor szívesen kiteszem ide update-ként a példád.