Фотогалерея html css – Галерея на CSS. Создание галереи с помощью CSS

03.11.2017 alexxlab

Содержание

Фотогалерея CSS | Веб-мастерская Ларисы Ворониной

В этой статье я приведу простой пример создания фотогалереи на чистом CSS, без использования JavaScript и JQuery.

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

Создаём папку Gallery, в ней создаём папку Images идва файла index.html и style.css.

В index.html пишем разметку галереи.

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» type=»text/css» href=»style.css» >
<title>Фотогалерея CSS</title>
</head>
<body>
<div>
<input type=»checkbox»>
<label for=»img1″><img src=»images/img1.jpg»></label>

<input type=»checkbox»>
<label for=»img7″><img src=»images/img7.jpg»></label>
<input type=»checkbox»>
<label for=»img8″><img src=»images/img8.jpg»></label>
<input type=»checkbox»>
<label for=»img9″><img src=»images/img9.jpg»></label>
<input type=»checkbox»>
<label for=»img10″><img src=»images/img10.jpg»></label>
<input type=»checkbox»>
<label for=»img11″><img src=»images/img11.jpg»></label>
<input type=»checkbox»>
<label for=»img12″><img src=»images/img12.jpg»></label>
<input type=»checkbox»>
<label for=»img13″><img src=»images/img13.jpg»></label>
<input type=»checkbox»>
<label for=»img14″><img src=»images/img14.jpg»></label>
<input type=»checkbox»>
<label for=»img15″><img src=»images/img15.jpg»></label>
<input type=»checkbox»>
<label for=»img16″><img src=»images/img16.jpg»></label>
<input type=»checkbox»>
<label for=»img17″><img src=»images/img17.jpg»></label>
<input type=»checkbox»>
<label for=»img18″><img src=»images/img18.jpg»></label>
<div>
<label for=»img1″><img src=»images/img1.jpg»></label>
<label for=»img2″><img

www.fly-webmaster.ru

Простая фотогалерея на CSS для сайта

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

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

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

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

Для начала нам нужно заготовить парочку вот таких картинок:

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превью (превью — уменьшенная копия фотографии).

Так как превью могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость: привяжем первую картинку фоном к тэгу div, а вторую — к тэгу p, который задействуем для подписи.

В результате нижний край превьюшки будет всегда на одном и том же расстоянии от подписи, независимо от длинны подписи.

Еще нам понадобятся сами превьюшки фотографий. Большие фотографии мы разместим каждую на своей отдельной странице, с которой будет возврат на главную при помощи кнопки BACK.

Итак, запишем для начала код нашей главной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Фотогалерея | Урок с сайта Websovet.com</title>
</head>
<body>
<div></div>
<div>
<div>
<a href="foto1.html"><img src="1_sm.jpg" alt="okno_v_nebo" /></a>
<p>Окно в небо</p>
</div>
<div>
<a href="foto2.html"><img src="2_sm.jpg" alt="zloy_indeets" /></a>
<p>Злой индеец</p>
 </div>
<div>
<a href="foto3.html"><img src="3_sm.jpg" alt="pod_krylom_samoleta" /></a>
<p>Под крылом самолета</p>
</div>
<div>
<a href="foto4.html"><img src="4_sm.jpg" alt="nasyp_kamney_na_pirse" /></a>
<p>Насыпь камней на пирсе</p>
</div>
<div>
<a href="foto5.html"><img src="5_sm.jpg" alt="tsvetushy_kust" /></a>
<p>Цветущий куст</p>
</div>
<div>
<a href="foto6.html"><img src="6_sm.jpg" alt="goryachaya_kamennaya_baba" /></a>
<p>Горячая каменная баба</p>
</div>
 </div>
</body>
</html>

Код совсем простой. Мы поместили содержимое страницы в «коробочку» — container, которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div с классом tumb.

Рассмотрим теперь подробнее файл стилей CSS:

* { margin: 0; padding: 0; border: 0; } a { text-decoration: none; } body { background: #fff; } #container { width: 860px; margin: 0 auto; } #header { background: url(header.gif) no-repeat; width: 860px; height: 160px; margin: 0 auto; clear: both; } div.tumb { background: url(tumb01.gif) no-repeat; width: 210px; float: left;

margin: 0 30px 20px;
}
div.tumb img {
margin:5px 4px;
}
div.tumb p {
background: url(tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, sans-serif;
color: #333;
margin: 0;
padding: 0 25px 20px 10px;
}

Начнем по порядку. Для всей страницы разом мы установили поля, отступы и границы равными 0. Фон указали белого цвета, у ссылок выключили подчеркивание, а размер контейнера задали в 860 пикселей по ширине и автовыравнивание.

Для шапки нарисовали симпатичный зоголовок и поместили его там в виде фона, задав ширину и высоту. Это все просто. А вот дальше будет хитрость.

Для превьюшек, как уже говорилось, мы использовали div с классом tumb. При этом самому селектору tumb мы в правилах задали отображение фона в виде первой нашей картинки, показанной выше, указав ее ширину в 210 пикселей и запретив повтор. Высоту при этом не указываем!

Кроме того, мы сюда же добавили правило обтекания слева float: left, ибо хотим расположить по горизонтали несколько превьюшек. Если этого не сделать, то все превьюшки будут располагаться на странице в столбик одна под другой.

В следующем наборе правил мы уже задали самим превьюшкам с тэгом img отступы, чтобы картинки не лепились одна к другой.

Обратите внимание на запись — div.tumb img. Она показывает, что мы не просто какому-то произвольному тэгу img задаем эти правила, а именно тому, который входит в блок div с классом tumb.

Далее мы для тэга p, опять же, входящего в блок div с классом tumb, задали размер и цвет шрифта, поля и отступы и, самое важное, указали в качестве фона вторую нашу замечательную картинку. При этом кроме запрета на повтор мы показали ее координаты относительно осей х и у, 0 и 100% соответственно.

То есть, несмотря на размер наших превьюшек и описательного текста (в разумных пределах конечно), эта фоновая картинка всегда будет показывать свою нижнюю часть и правый край, автоматически подстраиваясь под длину и ширину превьюшки.

Вот, собственно, и все!

Еще совет: не делайте с превьюшек ссылку просто на картинку в такой-то папке. Оформите каждую фотографию на отдельной странице, с более подробным описанием и ссылкой возврата на главную страницу. Это будет гораздо красивее и правильнее, нежели сиротливо прилепленная к левому верхнему углу фотка в окне браузера.

Готовый пример галереи можно посмотреть здесь: Фотогалерея, пример на CSS.

Надеюсь, вам понравилось. Enjoy!

Если есть вопросы, задавайте их в комментариях. С удовольствием отвечу.

UPD от 03.11.2018: На сегодняшний день это уже морально устаревший способ — использовать в качестве подкладки фон из пары картинок. Все делается элементарно инструментами из арсенала CSS3.

Автор: Игорь Квентор
www.websovet.com

www.websovet.com

80 галерей для сайта на jquery mootools CSS на любые случаи

1. jQuery галерея с эффектом перелистывания страницы

Подобное решение можно использовать для вывода последних статей в блоге либо для презентации товаров.

2. Галерея с круглыми миниатюрами

Уникальный способ отобразить ваши фотографии в виде jQuery необычной галереи.

3. jQuery галерея изображений для товара, плагин «slideJS»

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

4. Мини-галерея на jQuery

Изображение увеличивается при наведении на него курсора мыши.

5. Элегантная Lightbox галерея «ppGallery»

6. Мини-галерея jQuery «Touch-Gallery»

7. Новая jQuery галерея с миниатюрами

Профессиональная jQuery галерея 2011 года.

8. jQuery плагин «Nivo Zoom»

Еще один качественный jQuery плагин от разработчиков Nivo слайдера. Увеличение изображение по нажатию на миниатюру.

9. jQuery галерея «3d Wall Gallery»

Новая jQuery галерея 2011 года. Лента изображений растянута на всю ширину экрана. Навигация между фотографиями осуществляется тремя способами: с помощью колеса мыши, с помощью прокрутки сверху галереи и с помощью блока с миниатюрами снизу. Галерея выглядит очень эффектно.

10. jQuery галерея

Изображения в галерее случайным образом увеличиваются и снова уменьшаются создавая эффект пузырьков.

11. Необычное отображение изображений в jQuery галерее

С помощью ползунка сверху можно изменить расстояние между изображениями в стопке. При нажатии на изображение оно поворачивается.

12. Плагин jQuery галереи «MB.Gallery»

13. jQuery галерея, растягивающаяся на весь экран

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

14. Легкая jQuery галерея

15. Галерея с автоматическим генерированием миниатюр

Плагин автоматически сканирует папку и создает уменьшенные копии изображений.

16. Стильная галерея с использованием библиотек jQuery и Raphael

Интересный эффект при наведении курсора мыши на миниатюру.

17. Новая версия jQuery плагина «Supersized» версия 3.1

Совсем недавно я уже упоминал об этом jQuery решении для создания полноэкранных галерей. Сегодня хочу вам представить последнюю версию этого профессионального плагина. Скрипт полностью переписан, сейчас галерея работает еще быстрее, при этом добавлены некоторые интересные настройки, например, навигация с помощью клавиатуры, изменяемая скорость смены изображений, размер экрана и другие.

18. jQuery плагин «Galleria 1.2.2»

Новая jQuery галерея для ваших проектов.

19. jQuery галерея

Галерея выплывает на странице по нажатию на кнопку. Миниатюры отображаются вокруг увеличенного изображения. Можно управлять автоматической сменой изображений. Используемые технологии: jQuery, CSS, PHP.

20. Плагин «Timer Gallery»

jQuery галерея. Реализована автоматическая смена слайдов и прокрутка миниатюр, если их слишком много.

21. jQuery галерея

Плагин галереи изображений на jQuery.

22. javascript галерея для просмотра на мобильных устройствах «PhotoSwipe»

Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

23. javascript галерея с 3D эффектом

24. Галерея «jQuery morphing gallery»

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

25. jQuery плагин «Galleria 1.2.3»

Функциональный плагин для отображения изображений.

26. jQuery галерея изображений «Image Wall»

Оригинальная галерея в виде разбросанных по экрану миниатюр различных размеров, стилизованных под картины. При нажатии на миниатюру появляется область с описанием изображения и при повторном нажатии всплывает оригинальное большое изображение.

27. CSS3 галерея

Интересный эффект при наведении.

28. Галерея с миниатюрами «TN3 Gallery»

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

29. Сетка изображений «Grid-Gallery»

Сетка изображений растягивается в зависимости от ширины окна браузера. Интересный эффект при наведении: подсвечивается активный ряд и колонка.

30. jQuery галерея «Swap Gallery»

Легкая галерейка jQuery в несколько строк кода.

На демонстрационной странице представлено несколько вариантов выпадающих мега меню, в различных стилевых оформлениях. В этом меню можно настраивать: эффект выпадения, скорость выпадения, а также делать выбор между выпадением по клику или по наведению мышки на пункт.

31. Галерея изображений jQuery

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

32. Круговая галерея jQuery

Изображение и его миниатюры выполнены в виде кругов.

33. jQuery плагин портфолио фотографа «Portfolio Image Navigation»

Оригинальное javascript решение для оформления портфолио фотографа. Навигация между изображениями осуществляется с помощью стрелок Вверх/Влево/Вправо и при помощи мини-квадратов (имитация перемещения в 2D пространстве). Можно сгруппировать фотографии из разных фото сессий в разные вертикальные ряды и перемещаться по ним с помощью элементов навигации. Смотрите демонстрацию.

34. Плагин «jmFullZoom»

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

35. Фото-карта

Галерея интегрированная с Google картой. Можно развернуть на весь экран, нажав на иконку в правом нижнем углу. Отлично подойдет для туристических сайтов.

36. Галерея изображений с миниатюрами

jQuery галерея с миниатюрами.

37. jQuery галерея «Galleriffic»

Слайд-шоу с миниатюрами.

38. jQuery CSS3 плагин «Wave Display Effect»

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

39. Parallax Gallery

40. NoobSlide бесплатная Mootools галерея

Много вариантов отображения и настроек.

41. Динамические галерея изображений и слайд-шоу

42. Plogger

Plogger является отличной фотогалереей с открытым исходным кодом. Она не раздута лишним функционалом или сложной настройкой. Plogger является простым, но мощным инструментом для того чтобы поделиться своими фотографиями с посетителями сайта. Требования: PHP4, MySQL3. Для установки галереи распакуйте файлы на сервер, создайте базу данных и пользователя к ней, в веб-браузере запустите скрипт установки по адресу http://www.yoursite.com/plogger-folder/plog-admin/_install.php после чего можете зайти администраторскую панель галереи и начать её настройку и загрузку изображений.

43. Простенькая симпатичная галерея, сделанная на CSS, без использования скриптов

Красиво выглядит и отлично работает во всех современных браузерах

44. Фото-галерея

45. Галерея в минималистическом стиле

Можно управлять автоматическим показом слайдов (старт/стоп), переключение слайдов с помощью стрелок клавиатуры, автоматическое постраничное разбиение названий слайдов, если их много, поддерживается несколько галерей на одной странице, подписи к слайдам, поддержка API и возможность создавать свои эффекты перехода слайдов

46. Галерея в виде стопки фотографий

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

47. jqFancyTransitions

jQuery галерея для вашего сайта

48. jPhotoGrid

Сетка изображений. Галерея с jquery эффектом.

49. Spacegallery

Интересная jQuery галерея. При нажатии кнопки мыши изображения растворяются.

50. Стиль Palaroid для галереи LightBox

51. jQuery галерея. Стена изображений

52. jQuery галерея в виде фотографий на столе

Фотографии можно перетаскивать, закрывать, просматривать по одной фотографии.

53. Свежая jQuery галерея

Отличная галерея. Интересное представление фотографий, разбитых по категориям. Рекомендую посмотреть демонстрацию скрипта.

54. jQuery микро галерея

55. Свежая jQuery галерея

Классная галерея. Реализовано разбиение по альбомам. К тому же, эта галерея заточена для просмотра с мобильных устройств.

56. Mootools карусель «iCarousel»

Слайдер отлично подойдет для использования в интернет-магазинах и не только.

57. jQuery галерея

Красивая jQuery галерея.

58.jQuery галерея

Несколько вариантов смены изображений.

Демо

freeweber.ru

Фотогалерея для сайта с использованием HTML5 Canvas | XoZblog

Здравствуйте уважаемые читатели XoZblogа! В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. Смотрите демо-версию, чтобы оценить эффект при наведении на изображение. Оттенки серой «копии» основного изображения создаются с помощью Canvas, а также с CSS3 для плавного изменения «копии» на основное изображение. Советую также ознакомиться с уроком Галерея изображений на jQuery. Коротко о том, что такое Canvas. Спецификация HTML5 включает множество новых тегов, одним из которых является canvas. HTML5 Canvas — предоставляет простой и хороший способ работы с графикой и рисованием с использованием JavaScript. Следует также знать, что рисование ведется в растровой форме, таким образом, нарисовав на Canvas какую-либо фигуру, её нельзя будет редактировать или удалить отдельно, можно только стереть целую область Canvas.

Шаг 1: HTML разметка

Давайте начнем с простой HTML разметки, каждый элемент (Изображение) галереи является элементом маркированного списка.

1
2
3
4
5
6
7
8
9
10
11

<div>
<h2>Фотогалерея</h2>
<ul>
<li><a href=»#»><img src=»images/flo1.jpg»><div>Весенние цветы 1</div></a></li>
<li><a href=»#»><img src=»images/lights2.jpg»><div>Городские огни 1</div></a></li>
<li><a href=»#»><img src=»images/flo3.jpg»><div>Весенние цветы 2</div></a></li>
<li><a href=»#»><img src=»images/lights1.jpg»><div>Городские огни 2</div></a></li>
<li><a href=»#»><img src=»images/flo2.jpg»><div>Весенние цветы 3</div></a></li>
<li><a href=»#»><img src=»images/lights3.jpg»><div>Городские огни 3</div></a></li>
</ul>
</div>

Шаг 2: Стили CSS

Мы будем использовать изображение 300px на 300px. Элемент списка, которым является изображение в фотогалерее, принимает значение left для свойства float и позицию relative. Название изображения, завернутый в DIV элемент, который скользит вверх при наведении курсора мыши. Для достижения плавного эффекта появления названия, мы применяем CSS3.
(Все файлы данного урока Вы сможете скачать одним архивом «Исходники» — кнопка выше).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* Стили для фотогалереи */
#wrap {width: 1020px; margin: 0 auto;}
h2 {font-size:3em;margin:0 0 20px 20px;text-shadow:0 1px 0 #fff;}
/* Стили для каждого элемента маркированного списка */
li {
float:left;
position:relative;
display:inline-block;
width:300px;
height:300px;
margin:10px;
padding:10px;
background:#fff;
-webkit-box-shadow:0 0 5px rgba(0,0,0,.35);
-moz-boz-shadow: 0 0 5px rgba(0,0,0,.35);
box-shadow:0 0 5px rgba(0,0,0,.35);
}
/* Стили для блока DIV в котором находится название изображения */
li div {
position:absolute;
height:0; width:280px;
background:rgba(0,0,0,.45);
overflow:hidden;
bottom:10px;
left:10px;
padding: 0 10px;
-webkit-transition:height 1s;
-moz-transition:height 1s;
-o-transition:height 1s;
-ms-transition:height 1s;
transition:height 1s;
color:#fff;
line-height:50px;
font-size:1.2em;
}
li:hover div {height:50px;}

Шаг 3: Canvas

Теперь мы будем использовать элемент HTML5 Canvas для рисования оттенков серой версии нашего изображения. Внизу вы найдете createCanvas пользовательские функции, которые создают Canvas элемент, делают копию изображения, выполняют преобразование и выводят его на холст и, наконец, вставляют холст в DOM дерево документа. С помощью .each() метода функция createCanvas повторяется для всех изображений в списке галереи.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

$(window).load(function() {
$(‘#gallery img’).each(function() {
createCanvas(this);
});

function createCanvas(image) {
var canvas = document.createElement(‘canvas’);
if (canvas.getContext) {

var ctx = canvas.getContext(«2d»);
// указать размер холста
canvas.width = image.width;
canvas.height = image.height;

// Как только мы получим ссылку на объект исходного изображения, мы можем использовать DrawImage(ссылка, х, у), чтобы сделать ее Canvas.
// х, у являются координатами на целевом холсте, куда изображение должно быть помещено.
ctx.drawImage(image, 0, 0);
// Принимаем данные изображения и храним их в массиве ImageData. Вы можете узнать данные Канвас с помощью метода getImageData (). Данные изображения включают в себя цвет пикселя (в десятичной системе, RGB значения) и прозрачности (альфа-значение). Каждый цветовой компонент представляет целое число от 0 до 255. imageData.data содержит высота y ширина х 4 байта данных, с индексом в диапазоне от 0 до (высота y ширина х 4) -1.
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
pixelData = imageData.data;

// Цикл по всем пикселям в массиве ImageData, RGB знаяения цвета.
for (var y = 0; y < canvas.height; y++) {
for (var x = 0; x < canvas.width; x++) {
// Вы можете получить доступ к цвету значения (х, у) пикселя следующим образом:
var i = (y * 4 * canvas.width) + (x * 4);
// Получить RGB значения.
var red = pixelData[i];
var green = pixelData[i + 1];
var blue = pixelData[i + 2];
// Преобразовать в оттенки серого. Одна из формул преобразования (например, вы могли бы попробовать простой средней (красный + зеленый + синий) / 3)
var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);
pixelData[i] = grayScale;
pixelData[i + 1] = grayScale;
pixelData[i + 2] = grayScale;
}
}

// Ввод изменений ImageData обратно на холст.
ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
// Установка полотна в DOM:
image.parentNode.insertBefore(canvas, image);
}
}
});

Шаг 4: Стили для Canvas

Давайте рассмотрим стили для настройки работы Canvas. Определим, что происходит по умолчанию и при наведении курсора мыши:

1
2
3
4
5
6
7
8
9
10
11
12

canvas {
opacity:1;
position:absolute;
top:10px;
left:10px;
-webkit-transition:opacity 1s .2s;
-moz-transition:opacity 1s .2s;
-o-transition:opacity 1s .2s;
-ms-transition:opacity 1s .2s;
transition:opacity 1s .2s;
}
li:hover canvas {opacity:0;}

Вот и все готово! Эта фотогалерея не будет работать в версиях Internet Explorer ниже 9. Вы могли бы сделать альтернативные решения с использованием оттенков серого фильтра и добавить некоторые JQuery эффекты, применяемые при наведении курсора мыши. Также хочу добавить, что фотогалерея работает только на сервере (в том числе и локальном).

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или следите за мной в Twitter. Не забывайте оставлять комментарии к статьям и урокам. Если урок Вам понравился и пригодился сделайте tweet или like — тем самым Вы выразите свою благодарность. До связи!

P.S.: Все о работе в интернете на блоге http://kartashenkov.ru/

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

xozblog.ru

Фотоальбом на чистом CSS3

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Фотоальбом на чистом CSS3 | | Демонстрация для сайта s-sd.ru</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div>
            <div>
                <a tabindex="1"><img src="images/1.jpg"></a>
                <a tabindex="1"><img src="images/2.jpg"></a>
                <a tabindex="1"><img src="images/3.jpg"></a>
                <a tabindex="1"><img src="images/4.jpg"></a>
                <a tabindex="1"><img src="images/5.jpg"></a>
                <a tabindex="1"><img src="images/6.jpg"></a>
                <a tabindex="1"><img src="images/7.jpg"></a>
                <a tabindex="1"><img src="images/8.jpg"></a>
                <a tabindex="1"><img src="images/9.jpg"></a>
                <a tabindex="1"><img src="images/10.jpg"></a>
                <a tabindex="1"><img src="images/11.jpg"></a>
                <a tabindex="1"><img src="images/12.jpg"></a>
                <span></span>
            </div>
        </div>
    </body>
</html>

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    -moz-box-shadow: 0 -1px 2px #111111;
    -webkit-box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h3{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    background:#ddd;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:700px;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    box-shadow:1px 1px 5px #111;
    -moz-box-shadow:1px 1px 5px #111;
    -webkit-box-shadow:1px 1px 5px #111;
}

/* css3 photo gallery styles */
.gallery {
    width:610px;
    margin:0 auto;
}
.gallery a {
    display:inline-block;
    height:150px;
    position:relative;
    width:200px;
}
.gallery a img {
    border:5px solid #fff;
    cursor:pointer;
    display:block;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:1;

    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;
}
.gallery a:focus img {
    border:15px solid #fff;
    cursor:default;
    height:250%;
    position:absolute;
    width:250%;
    z-index:25;

    box-shadow:1px 1px 5px #888;
    -moz-box-shadow:1px 1px 5px #888;
    -webkit-box-shadow:1px 1px 5px #888;
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;
}

/* custom focus rules */
.gallery a:focus:nth-child(3n+1) img {
left:150px;
}
.gallery a:focus:nth-child(3n+2) img {
    left:-50px;
}
.gallery a:focus:nth-child(3n+3) img {
    left:-250px;
}
.gallery a:focus:nth-child(-n+3) img {
    top:140px;
}
.gallery a:focus:nth-child(n+7) img {
    top:-150px;
}
.gallery a:focus:nth-child(n+10) img {
    top:-295px;
}

/* extra close layer */
.gallery .close {
    background:transparent;
    cursor:pointer;
    display:none;
    height:352px;
    left:170px;
    position:absolute;
    top:160px;
    width:500px;
    z-index:30;
}
.gallery a:focus ~ .close {
    display:block;
}

Вот и все, все было очень просто, не правда ли? Результат был великолепным. Я надеюсь, что наши славные советы помогут вам. Удачи!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

s-sd.ru

20 html шаблонов для создания портфолио фотографа / HTML шаблоны / Постовой

В этой статье подобраны 20 бесплатных шаблонов HTML CSS, которые помогут создать портфолио с впечатляющими галереями профессиональных фотографов или фотостудии.

Портфолио — галерея лучших работ фотографа, а также собрание фотографий по темам. Портфолио характеризует фотографа или студию с лучшей стороны, потому, желательно, показать самые интересные работы в галерее. Но этого недостаточно, чтобы заинтересовать потенциальных заказчиков. Нужно круто оформить сайт и тогда успех обеспечен.
Можно самостоятельно создать портфолио, или использовать готовые шаблоны. В подборке вы сможете найти шаблон для оформления своего портфолио соответствующий вашим вкусам и стилю работ. Все темы включают адаптивный дизайн. Также некоторые шаблоны подойдут дизайнерам.
Желаю удачи в создании портфолио. Подписывайтесь на группу вконтакте и оставляйте комментарии.

Смотрите также:

iClick

Неплохой одностраничник в зеленых цветах. Отлично подходит для портфолио фотографа.

Photography

Шаблон реализован для портфолио фотографа в плоском стиле. В галерее фотографии удобно просматриваются с помощью слайдера.

Magnetic

Шаблон заточен под портфолио и замечательно подойдет фотографам, дизайнерам, графическим дизайнерам, иллюстраторам и т.п. Смотрится очень здорово и располагает к себе.

Gallery Station

Шаблон для портфолио. Содержит фильтр сортировки работ по темам. Сетка галереи выполнена в стиле Pinterest.

Shutter

Одностраничник в стиле Flat для создания портфолио фотографа или студии. Шаблон с полноэкранным слайдером, плавной прокруткой и приятной галереей. Оформлен в желтой цветовой гамме с темным фоном.

Big Picture

Необычный шаблон с красивым оформлением. Разработан на фреймворке Skel. Содержит интересную и удобную в обращении галерею.

Interno

Профессиональный шаблон в современном стиле. В галерее при нажатии на фото открывается слайдер, благодаря которому удобно листать фотографии. Такое портфолио хорошо подойдет фотографам и веб-дизайнерам.

Finec

Красивый шаблон в стиле минимализм. Разработан для портфолио фотографа и дизайнера.

PH CV

Шаблон для портфолио креативного фотографа. Галерея с фильтром сортировки по темам. Смотрится стильно и современно.

Egret

Очень интересный одностраничник в темных тонах. Галерея представлена в карточном стиле (карточный веер). Смотрится необычно, эффектно и заманчиво. Шаблон можно заточить под портфолио фотографа, дизайнера или под мобильные приложения игровой и бизнес тематики.

Intent

Шаблон для портфолио фотографа с классным слайдером. Удобная галерея с фильтром сортировки работ. Смотрится очень здорово и профессионально.

Volton

Простой одностраничный сайт с вертикальным меню. Разработан для создания личного портфолио.

Profile

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

Collodion

Шаблон имеет светлое оформление и элегантный дизайн. Подходит для портфолио фотографа и дизайнера.

Photographica

Тема создана для портфолио фотографа. Выполнена в плоском стиле и содержит простую галерею с кратким описанием при наведении мыши на фото. При нажатии разворачивается фото с полным описанием.

Photographer

Новый адаптивный шаблон, который построен на CSS-фреймворке Bootstrap 3. Он разработан специально для портфолио фотографа и является полностью бесплатным. Шаблон очень чистый и приятный.

Focus

Тема для портфолио фотографа с темным оформлением. Смотрится стильно и креативно.

Cyrus Studio

Оригинальный шаблон для портфолио. Отлично подойдет фотографам и дизайнерам. Обратите внимание на качественно сделанную галерею и просмотр изображений.

Spirit

В шаблоне оригинально выполнена галерея (эффект наложения фото друг на друга). Смотрится креативно и интересно.

postovoy.net

Несколько классных JQuery галерей и слайдеров изображений для Вашего сайта

Приветствую Вас, дорогие читатели блога beloweb.ru. В этот уже почти осенний день хочется порадовать Вас классной подборкой бесплатных галерей и слайдеров изображений, которые используют JQuery.

Хочу сказать, что эта подборка не большая, но я думаю, что Вы в ней найдёте для себя что нибудь полезное и интересное.

В общем давайте смотреть.

Если Вы пропустили прошлые подборки, тогда рекомендую посмотреть: