CSS3 Polaroid Gallery
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.
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.
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 https://html5.ugyesen.com.