Blog. Just Blog

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

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

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

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

Переходим к верстке. Ее структура должна включать в себя контейнер, внутри которого по центру будет находиться фотография, а по углам поверх изображения абсолютно спозиционированные изображения фотоуголков. В виде каскадной таблицы стилей это выглядит следующим образом:
Code: Убрать нумерацию
  1. /* контейнер для фотографии */
  2. .photo_place {
  3.     padding: 34px;
  4.     position: relative;
  5. }
  6. /* фотография с тенью */
  7. .photo_place img {
  8.     box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 1.5);
  9. }
  10. /* фотоуголки */
  11. .corner_rt {
  12.     position: absolute;
  13.     width: 100px;
  14.     height: 100px;
  15.     top: 0;
  16.     right: 0;
  17.     background: url('corner-rt.png');
  18. }
  19. .corner_rb {
  20.     position: absolute;
  21.     width: 100px;
  22.     height: 100px;
  23.     bottom: 0;
  24.     right: 0;
  25.     background: url('corner-rb.png');
  26. }
  27. .corner_lt {
  28.     position: absolute;
  29.     width: 100px;
  30.     height: 100px;
  31.     top: 0;
  32.     left: 0;
  33.     background: url('corner-lt.png');
  34. }
  35. .corner_lb {
  36.     position: absolute;
  37.     width: 100px;
  38.     height: 100px;
  39.     bottom: 0;
  40.     left: 0;
  41.     background: url('corner-lb.png');
  42. }
Верстка блока с фотографией сводится к вот такому HTML-коду. Размер блока задается в точности как размер фотографии, помещаемой в уголки.
Code (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. Фотография может быть не только со всеми четырьмя фотоуголками, для большей реалистичности вы можете оставить только нужные, например:
Code (HTML) : Убрать нумерацию
  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)


Поделиться ссылкой ВКонтакте
Просмотров: 7596 | Комментариев: 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 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (32), AJAX (5), Assembler (371), COM (42), CSS (44), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (53), iconBIT (4), JavaScript (76), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (20), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (126), выпечка (30), выставки (120), генератор ПСЧ (10), графика (121), десерты (31), Египет (9), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (322), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (82), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (51), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (131), полезные функции (42), прохождения (4), процессы (25), птица (22), путешествия (26), распаковка (22), реверсинг (52), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (178), Сокольники (8), соусы (15), супы (14), телефоны (10), Тунис (6), умный дом (14), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (17), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,663 раза
<< 2024 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            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          
День информатики
День заказов подарков и написания писем Деду Морозу
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0083 сек.) / Память: 4.5 Mb
Наверх