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.
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.
