наверх





Простенько размещаем любимые пейзажи в один блок, который будет служить нам мини-галереей. Насчет оформления, то тут все просто, а выглядит прекрасно.


В этом примере создадим простенький блок-галерею, который будет наполнен изображениями. Для блока будем использовать верхнюю обводку и фон, а вот с изображениями будет посложнее. Будет использована тень, прозрачность и максимальная ширина. А эти свойства не работают в старых браузерах, а максимальная ширина в Опере. Блок будет красивый, но не практичный.

Начнем с разметки:

HTML


<div class="gallery">
<img src="1.jpg"><br>
<img src="2.jpeg"><br>
<img src="3.jpg"><br>
<img src="4.jpg"><br>
<img src="5.jpg"><br>
</div>


Разметка простая, без лишних тегов. Перейдем к стилям.

CSS



Начнем с создания самого блока:

.gallery {
background-color: #F9F9F9; /* Фон */
padding:12px; /* Внутренние отступы */
width:200px;     /* Ширина */
border-top:5px solid #478cfb;    /* Верхняя обводка */
}


Блок простой, да и объяснять тут нечего. Теперь перейдем к самим изображениям. Для начала создадим прозрачность и максимальную ширину:

img {
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
max-width:200px;
}


При написании свойства максимальной ширины, высота регулируется сама, пропорционально. Прозрачность я автоматически сгенерировал в BlueCode Opacity Generator.

Основа готова. Теперь добавим тень, а точнее размытость.

img {
...
-moz-box-shadow: 0px 0px 10px #478cfb;
-webkit-box-shadow: 0px 0px 10px #478cfb;
box-shadow: 0px 0px 10px #478cfb;
margin-bottom:4px; /* Отступ вниз */
}


Так как отступ вниз небольшой, то кажется, будто у изображений есть еще один, свой фон.
Теперь перейдем к эффекту при наведении. Здесь просто напросто уберем все свойства, то есть уберем прозрачность и тень:

img:hover {
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1);
-moz-box-shadow: 0px 0px 0px #478cfb;
-webkit-box-shadow: 0px 0px 0px #478cfb;
box-shadow: 0px 0px 0px #478cfb;
}


Получилось просто и аккуратно просто.

Но сейчас, при наведении, состояние резко меняется. Лучше сделать, что бы оно менялось плавно, добавив свойство transition к тегу:

img {
...
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}


Наш блок-галерея готов. Но повторяю, что данный блок будет криво отображен в старых браузерах.




Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 1


peecaboo 08 апреля, 17:42 ответить #

спасибо за все статьи, что тут есть! а вот как сделать подобный блок горизонтальным с, допустим, 20 картинками и полосой прокрутки?

У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.