Blog. Just Blog

Галерея в стиле старого альбома с фотоуголками

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Галерея в стиле старого альбома с фотоуголками
Галерея в стиле старого альбома с фотоуголками

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

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

Переходим к верстке. Ее структура должна включать в себя контейнер, внутри которого по центру будет находиться фотография, а по углам поверх изображения абсолютно спозиционированные изображения фотоуголков. В виде каскадной таблицы стилей это выглядит следующим образом:
  1. /* контейнер для фотографии */
  2. .photo_place {
  3.     padding34px;
  4.     positionrelative;
  5. }
  6. /* фотография с тенью */
  7. .photo_place img {
  8.     box-shadow0px 0px 10px 0.5px rgba(0001.5);
  9. }
  10. /* фотоуголки */
  11. .corner_rt {
  12.     positionabsolute;
  13.     width100px;
  14.     height100px;
  15.     top0;
  16.     right0;
  17.     backgroundurl('corner-rt.png');
  18. }
  19. .corner_rb {
  20.     positionabsolute;
  21.     width100px;
  22.     height100px;
  23.     bottom0;
  24.     right0;
  25.     backgroundurl('corner-rb.png');
  26. }
  27. .corner_lt {
  28.     positionabsolute;
  29.     width100px;
  30.     height100px;
  31.     top0;
  32.     left0;
  33.     backgroundurl('corner-lt.png');
  34. }
  35. .corner_lb {
  36.     positionabsolute;
  37.     width100px;
  38.     height100px;
  39.     bottom0;
  40.     left0;
  41.     backgroundurl('corner-lb.png');
  42. }
Верстка блока с фотографией сводится к вот такому HTML-коду. Размер блока задается в точности как размер фотографии, помещаемой в уголки.
  1. <!-- фотография со всеми уголками -->
  2. <div class="photo_place" style="width:480px; height:702px;">
  3.     <img src="foto4.jpg">
  4.  
  5.     <div class="corner_rt"></div>
  6.     <div class="corner_rb"></div>
  7.     <div class="corner_lt"></div>
  8.     <div class="corner_lb"></div>
  9. </div>
Положение фотографии на странице настраивается через позиционирование обрамляющего контейнера div. Фотография может быть не только со всеми четырьмя фотоуголками, для большей реалистичности вы можете оставить только нужные, например:
  1. <!-- фотография с тремя уголками -->
  2. <div class="photo_place" style="width:600px; height:312px;">
  3.     <img src="foto3.jpg">
  4.  
  5.     <div class="corner_rb"></div>
  6.     <div class="corner_lt"></div>
  7.     <div class="corner_lb"></div>
  8. </div>
  9.  
  10. <!-- фотография с двумя уголками -->
  11. <div class="photo_place" style="width:600px; height:312px;">
  12.     <img src="foto2.jpg">
  13.  
  14.     <div class="corner_rt"></div>
  15.     <div class="corner_lb"></div>
  16. </div>
Готовую галерею в виде старого фотоальбома можно посмотреть на демонстрационной странице. За красивые черно-белые фотографии моделей спасибо сайту 7floor, к сожалению, закрывшемуся несколько лет назад. Комплект картинок фотоуголков находится по ссылке ниже. Кстати, их можно использовать не только на веб-страницах, но и при создании своих коллажей в графических редакторах. А для придания фотографиям эффектов старины есть специальные программы.

Комплект картинок фотоуголковКомплект картинок фотоуголков

Fotocorners.Set.zip (53,414 bytes)


Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 6245 | Комментариев: 9

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Красавчик ! (30.01.2016 в 18:02):
ССИИИИСССЬКИ !!! :P
ManHunter (20.08.2014 в 14:52):
Кто-то запрещает выносить размеры в CSS? Здесь вообще-то обучающая статья, рассказывающая КАК это делается, а не как это сделать идеологически правильно. Ну добавил бы я в CSS три класса с размерами по одному для каждой картинки, стало бы легче?
Цитатано зачем объявлять уголкам "position: absolute;"

С удовольствием посмотрел бы на вариант без "position: absolute;"
ЦитатаНе совсем правильная получается разметка.

Валидная? Валидная. Семантическая? Семантическая. Есть еще какой-то критерий "правильности" разметки, про который я не слышал?
Ан.Ст. (20.08.2014 в 14:46):
Идея хорошая, но зачем объявлять уголкам "position: absolute;" и в <div> вставлять style="width:600px; height:312px;"? Не совсем правильная получается разметка. По идее надо всё стилевое офрмление выночить в CSS, а Вы его ещё в html вставляете.
caxap (28.07.2014 в 13:08):
Ай-яй-яй...
ManHunter (05.07.2014 в 18:30):
И что не так с позиционированием?
ufo (05.07.2014 в 17:56):
Нормальные такие "уголки" position: absolute :)
NVTim (04.07.2014 в 21:30):
"Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых".  ...и нече детям залезать куда не следует!
ManHunter (04.07.2014 в 14:39):
Пофиг, мне не жалко.
Станислав (04.07.2014 в 14:37):
Хоть бы пометил что топик 18+ или под спойлер. Дети же иногда заходят :)

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0047 сек.) / Память: 4.75 Mb
Наверх