Фотогалерея на CSS3

14 сентября 2010 года, Размещено в категории: HTML / CSS

Фотогалерея на CSS3

Фотогалерея сделана на одном CSS3, без использования всяких там jQuery и MooTools, очень простая и легкая в коде и использование.
Меня до сих пор удивляют возможности CSS3 и еще долго, наверное, будут удивлять креативные решения, применение CSS3, я уже делал маленький обзор креативных применений CSS3 в посте 10 замечательных примеров применения HTML5 и CSS3

демо Фотогалерея на CSS3

Давайте перейдем к принципу работы самой галереи на CSS3.
Фишка такой фотогалереи в том, что мы с помощью CSS3 добавляем изображением маленькую анимацию, а именно при наведении курсора мыши на изображение оно увеличивается и приближается к пользователю, так и возникает плавная анимация. Также для красоты добавины тени к изображениям.

Шаг 1 HTML:

1
2
3
4
5

<div id="hovergallery"  align="center">
<img src="Airport-text_effect.jpg"/>
<img src="web-galery.jpg"/>
<img src="html5-css3.jpg"/>
</div>

Шаг 2 CSS:
Я написал комментарии к каждой строчки кода, чтобы Вам было понятнее

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: уменьшитьь изображения на 0.8x от оригинального размера*/
-moz-transform:scale(0.8); /*Для Mozilla*/
-o-transform:scale(0.8); /*Для Opera*/
-webkit-transition-duration: 0.5s; /*Webkit: продолжительность анимации*/
-moz-transition-duration: 0.5s; /*Для Mozilla*/
-o-transition-duration: 0.5s; /*Для Opera*/
opacity: 0.7; /*Первоначальный затмение изображения*/
margin: 0 10px 5px 0; /*отступление между изображениями*/
}
 
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Масштабирование изображения 1.1x от торигинального размера*/
-moz-transform:scale(1.1); /*Для Mozilla*/
-o-transform:scale(1.1); /*Для Opera*/
box-shadow:0px 0px 30px gray; /*CSS3 тень в 30px вокруг изображения */
-webkit-box-shadow:0px 0px 30px gray; /*Для Safari*/
-moz-box-shadow:0px 0px 30px gray; /*Для Mozilla*/
opacity: 1;
}

Но есть маленький минус данной галереи, или это скорее минус браузера IE, во всех версия браузера IE данная фотогалерея не работает.
В настоящее время фотогалерея на CSS3 работает в таких браузерах как:
Opera 9.5 +
Firefox 3.6
Google Chrome
Safari 4+



Интересно будет почитать:



  1. webmozg Сказал:
    19 сентября 2010

    Наверное ты забыл про постового за фон для твиттера, по условиям акции :-) или я что то пропустил

  2. luxsal123 Сказал:
    8 октября 2010

    Спасибо за статью давно искал инфу по ксс3
    вот так читаешь и понимаешь что еще учить и учить

Метки: , ,