Ponownie wracamy do tematu CSS3, niewątpliwie cały czas czekając aż wszystkie przeglądarki zaczną wspierać ten nowy standard, który rewolucjonizuje kasadowe arkusze styli.
Dzisiaj pokaże jak w naprawdę prosty sposób można stworzyć atrakcyjną galerię wykorzystując jedynie CSS3, bez konieczności użycia JavaScriptu. Zaproponowane rozwiązanie wykorzystuje silnik webkit, więc efekt jest widoczny na Chromie i Safari – na innych przeglądarkach galeria również funkcjonuje, jednakże nie korzysta z dobrodziejstw animacji CSS3.
Struktura HTML
Całość znajdować się będzie w pojemniku #boxMain. Z kolei pojemnik .boxContainer, wraz z jego zawartością stanowić będzie pojedynczy element galerii, który będzie zawierał 2 strony: .front – czyli obrazek widoczny na awersie oraz .back czyli tekst widoczny na rewersie:
-
<div id="boxMain">
-
<div class="boxContainer">
-
<div class="boxSingle">
-
<div class="front"> <img src="img/1.jpg" alt="" /> </div>
-
<div class="back">
-
<h1>Witamina A</h1>
-
<p>Odpowiada za prawidłowe widzenie, zmniejsza rogowacenie naskórka, poprawia koloryt skóry, chroni skórę przed promieniami UV, zwiększa zawartość kolagenu w skórze właściwej.</p>
-
</div>
-
</div>
-
</div>
-
</div>
CSS – podstawowa struktura
W następnej kolejności definiujemy podstawowe parametry poszczególnych pojemników, takie jak tło strony, kolor i krój czcionki. Główny pojemnik wyśrodkowujemy oraz ustawiamy wielkość i wygląd pojemników na poszczególne elementy galerii.
-
body {
-
background: #000 url(../img/bg.png);
-
font-family: Helvetica, Arial, Sans-Serif;
-
color: #fff;
-
}
-
-
#boxMain {
-
margin:0 auto;
-
width:900px;
-
}
-
-
.boxContainer {
-
float: left;
-
margin:10px;
-
cursor: pointer;
-
}
-
-
-
.boxSingle {
-
width: 250px;
-
height: 250px;
-
border: 8px solid #fff;
-
-
}
-
-
.boxSingle p{
-
margin: 20px;
-
}
CSS podmiana stron po najechaniu kursorem
Teraz dodajemy style dla awersu i rewersu elementów w galerii, sprawiając by ich wygląd odpowiadał naszym oczekiwaniom stawianym galerii. Dodatkowo ważnym aspektem tego kroku jest rotacja z-index dla awersu (.front) elementu galerii, zwiększając go i zerując zależnie od obecności kursora nad nim. Dzięki temu zabiegowi w przeglądarkach które nie posiadają silnika webkit pozostanie efekt przejścia pomiędzy jedną, a drugą stroną elementu galerii.
-
body {
-
background: #000 url(../img/bg.png);
-
font-family: Helvetica, Arial, Sans-Serif;
-
}
-
-
#boxMain {
-
margin:0 auto;
-
width:900px;
-
}
-
-
.boxContainer {
-
float: left;
-
margin:10px;
-
cursor: pointer;
-
}
-
.boxContainer .back h1 {
-
color: #333;
-
font-size: 35px;
-
font-weight: bold;
-
line-height: 40px;
-
overflow:hidden;
-
padding-top:10px;
-
text-align:center;
-
width: 250px;
-
}
-
-
.boxSingle {
-
width: 250px;
-
height: 250px;
-
border: 8px solid #fff;
-
}
-
-
.boxSingle p{
-
margin: 20px;
-
}
-
-
.boxContainer .back {
-
position: absolute;
-
width: 250px;
-
height: 250px;
-
background: #a3a3a3 url(../img/texture.jpg);
-
}
-
.boxContainer:hover .front {
-
z-index: 0;
-
}
-
.front {
-
position: absolute;
-
z-index: 10;
-
}
Odrobina magii świąt, czyli dodanie CSS3
Efekt animacji przejścia pomiędzy rewersem, a awersem zrealizuje dla nas CSS3, ale najpierw musimy dodac trochę realizmu podczas wykonywania się animacji. W tym celu wykorzystamy -webkit-perspective, dzięki czemu przejście nie będzie się wydawało być płaskie oraz -webkit-transform-style, co umożliwi nałożenie na wszystkie potomne elementy efektu perspektywy. Dodatkowo wykorzystując -webkit-transition ustawiamy czas trwania animacji na 0.3s.
Teraz należy wprawić wszystko w ruch – zrealizujemy to wykonując-webkit-transform: rotateY(180deg); na zdarzenie hover, czyli obrót o 180 stopni po osi Y. Po wyjściu kursora z obszaru wykonywany jest kolejny obrót nałożony na klasę rewersu. Ostatnim ciekawym elementem jest -webkit-backface-visibility: hidden;, pozwalającym na ukrycie elementu jeżeli nie powinien byc widzialny. Niby oczywiste i po co wykorzystywać taki atrybut – jednakże bez niego może się zdarzyć tak, że zamiast po obrocie zobaczyć rewers, może się jedynie wyświetlić obicie lustrzane awersu.
-
body {
-
background: #000 url(../img/bg.png);
-
font-family: Helvetica, Arial, Sans-Serif;
-
}
-
-
#boxMain {
-
margin:0 auto;
-
width:900px;
-
}
-
-
.boxContainer {
-
float: left;
-
margin:10px;
-
-webkit-perspective: 1000;
-
cursor: pointer;
-
}
-
.boxContainer .back h1 {
-
color: #333;
-
font-size: 35px;
-
font-weight: bold;
-
line-height: 40px;
-
overflow:hidden;
-
padding-top:10px;
-
text-align:center;
-
width: 250px;
-
text-shadow: 0 1px 1px #c3c1c1;
-
}
-
-
.boxSingle {
-
width: 250px;
-
height: 250px;
-
border: 8px solid #fff;
-
-webkit-transform-style: preserve-3d;
-
-webkit-transition: 0.3s linear;
-
}
-
-
.boxSingle p{
-
margin: 20px;
-
}
-
-
.boxContainer:hover .boxSingle {
-
-webkit-transform: rotateY(180deg);
-
}
-
-
.boxContainer .back {
-
position: absolute;
-
-webkit-backface-visibility: hidden;
-
width: 250px;
-
height: 250px;
-
-webkit-transform: rotateY(180deg);
-
background: #a3a3a3 url(../img/texture.jpg);
-
}
-
.boxContainer:hover .front {
-
z-index: 0;
-
}
-
.front {
-
position: absolute;
-
-webkit-backface-visibility: hidden;
-
z-index: 10;
-
}
2 komentarze do “Galeria zdjęć wykorzystując tylko CSS3”
naprawdę fajny efekt – szkoda tylko, że nie można jeszcze wykorzystywać CSS3 w profesjonalnych, komercyjnych stronach i aplikacjach ze względu na brak obsługi w głównych przeglądarkach :/
Kris, css3+html5 jak nie teraz to nigdy, do projektow komercyjnych css3 juz byl wykorzystywany na poczatku 2008 roku