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

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>&nbsp;</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>&nbsp;</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 galéria

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

Creative Commons Licenc
CSS3 Polaroid Gallery  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...