[CSS] Galeria zdjęć typu Polaroid

W tym artykule postanowiłem Tobie zaprezentować pewną technikę tworzenia ciekawych galerii zdjęć z użyciem CSS3.

CSS3 jest najnowszą wersją języka stylów dla stron WWW, która zapewnia kilka ciekawych opcji. Jedynym mankamentem tej nowej wersji tego języka jest niepoprawne działanie w innych przeglądarkach niż Mozilla Firefox. Dlatego też, zachęcam do pobrania Firefoxa, aby w pełni móc się delektować efektem pracy.

Przeglądarkę Mozilla Firefox można ściągnąć TUTAJ.

Przed tworzeniem galerii warto sobie przygotować pewien zestaw zdjęć. Mój zestaw wygląda następująco:

Teraz czas na kod HTML, który zapewni nam odpowiednią podstawę dla tejże galerii:

<ul class="galeria">
<li><a href="#" class="img-1"><img src="img/1.jpg" alt="Zdjęcie nowego Ferrari" /></a></li>
<li><a href="#" class="img-2"><img src="img/2.jpg" alt="Zdjęcie cudownej plaży" /></a></li>
<li><a href="#" class="img-3"><img src="img/3.jpg" alt="Zdjęcie surfera na fali" /></a></li>
<li><a href="#" class="img-4"><img src="img/4.jpg" alt="Zdjęcie urokliwej przystani na jeziorze" /></a></li>
<li><a href="#" class="img-5"><img src="img/5.jpg" alt="Zdjęcie Paryża" /></a></li>
<li><a href="#" class="img-6"><img src="img/6.jpg" alt="Zdjęcie niebiańskiej plaży" /></a></li>
</ul>

Następnie dodajemy kod CSS (w kodzie znajdują się komentarze odnośnie nowych właściwości CSS):

ul.galeria {
	display: inline;
}
ul.galeria li a {
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
	-moz-box-shadow: 0px 2px 15px #333;/*nowa właściwość CSS3 zapewnia efekt cienia*/
	-webkit-box-shadow: rgb(51, 51, 51) 0px 2px 15px;/*podobnie jak wyżej*/
}
ul.galeria li a.img-1 {
	z-index: 1;/*dzięki temu otrzymujemy wrażenie przestrzeni w obrazkach, że jeden obrazek jest bardziej wysunięty ku oglądającemu niż drugi*/
	-webkit-transform: rotate(-10deg);/*nowa właściwość CSS3 zapewnia obrót o określoną liczbę stopni*/
	-moz-transform: rotate(-10deg);/*podobnie jak wyżej*/
}
ul.galeria li a.img-2 {
	z-index: 5;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
}
ul.galeria li a.img-3 {
	z-index: 3;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
}
ul.galeria li a:hover {
	z-index: 10;
	-moz-box-shadow: 3px 5px 15px #333;
}

Jak widać, to wszystko wygląda bardzo prosto i poza faktem, że jest przydatne głównie przy tworzeniu galerii pod Firefoxa, byłoby to cudowne rozwiązanie problemu z pokazaniem przestrzeni w galeriach.

Demo z tej porady można obejrzeć tutaj: galeria zdjęć a'la Polaroid.