Як створити галерею в CSS: практика - підручник CSS

  1. План практичного уроку
  2. Покроковий план створення цієї галереї наступний:
  3. створення фотогалереї
  4. Перед початком роботи хотілося б відразу згадати про декілька моментів:
  5. 1. Розробка адаптивної сітки
  6. 2. Оформлення мініатюр
  7. Спосіб I: властивість border
  8. Спосіб II: властивості background-color і padding
  9. Стиль при наведенні
  10. 3. Стилізація підписів
  11. 4. Фінальні штрихи
  12. 5. Підключення плагіна для спливаючих вікон
  13. висновок

Чи готові повправлятися у використанні нових знань про CSS? У цьому практичному уроці вам належить дізнатися, як зробити адаптивну галерею у вигляді квадратних плиток, застосовуючи отримані навички. Ознайомтеся з планом уроку, після чого приступимо до справи.

План практичного уроку

Отже, вам напевно цікаво, як буде виглядати результат вашої праці по завершенню практики. Ми відразу продемонструємо вам макет майбутньої фотогалереї:


Ми відразу продемонструємо вам макет майбутньої фотогалереї:

Покроковий план створення цієї галереї наступний:

  1. Розробка адаптивної сітки.
  2. Оформлення мініатюр.
  3. Стилізація підписів.
  4. Фінальні штрихи.
  5. Додатково: підключення плагіна для спливаючих вікон.

Завантаження файлів

Скачайте архів з файлами і відкрийте в зручному для вас редакторі коду файли gallery.html і style.css (з папки css). Як і в попередній практиці, в тезі <head> ми заздалегідь підключили файл скидання стилів (на цей раз Reset.css замість Normalize) і основну таблицю стилів (поки що пусту), а також шрифт Google Fonts. Додатково ми додали ще одну таблицю стилів lightbox.min.css, а в кінці документа - скрипт lightbox-plus-jquery.min.js. Навіщо потрібні ці два файли, ми скажемо пізніше.

Завантажити архів RAR

створення фотогалереї

Вивчіть структуру HTML-сторінки. У тілі документа розташований блок-контейнер, в якому є заголовок <h1> і основний блок <div> з ідентифікатором #gallery. Усередині блоку галереї знаходиться дев'ять HTML5-тегів <figure> з класом .photo, кожен з яких містить тег <img> з мініатюрою зображення і тег <figcaption> з підписом до фото. Крім цього, кожне зображення обгорнуте в тег <a>, який містить посилання на відповідний повнорозмірний графічний файл.

Перед початком роботи хотілося б відразу згадати про декілька моментів:

  • У створюваної нами тестової галереї все мініатюри фотографій були підготовлені заздалегідь: вони мають однакову форму (квадрат) і однакові розміри (300 × 300 пікселів). При цьому оригінальні фото можуть мати зовсім інші розміри і пропорції. Квадратні мініатюри однакового розміру дозволяють створити елегантну рівну сітку, без необхідності підганяти оригінальну фотографію під форму квадрата, тим самим спотворюючи її вид. У реальному житті створенням мініатюр найчастіше займається спеціальний скрипт, оскільки фотографій на сайті може бути багато і обрізати кожну вручну дуже довго.
  • Як згадувалося раніше, кожна мініатюра служить посиланням на повнорозмірне фото. На даному етапі, якщо ви клацніть по ній, фото відкриється на новій сторінці. На сучасних сайтах таке вже зустрічається нечасто: швидше за все, ви помічали, що перегляд збільшеною фотографії реалізовується у спливаючому вікні, і користувач залишається на тій же сторінці, що вельми зручно. Тому, незважаючи на те, що наш підручник не присвячений мові JavaScript, все ж в кінці уроку ми познайомимо вас із спеціальним плагіном, який допоможе реалізувати красиве відкриття повнорозмірного знімка. Обіцяємо, складно не буде, і вам обов'язково сподобається!

А поки що перегляньте веб-сторінку gallery.html в браузері. Ось цю розмітку, поки що досить непоказну і нудну, нам сьогодні і належить перетворити в красиву фотогалерею. Поїхали!

1. Розробка адаптивної сітки

Перше, з чого ми почнемо, це створення сітки нашої галереї. Сітка є свого роду каркасом, що визначає розташування елементів на веб-сторінці. Ширина блоку-контейнера буде мати максимальну ширину 960 пікселів, а мініатюри будуть вибудовуватися в три стовпці однакової ширини (пам'ятаєте, що ми спираємося на макет). Кожна сторона мініатюри матиме внутрішній відступ в розмірі 10 пікселів.

Грунтуючись на словах вище, запишемо перший стиль в файл style.css:

.container {width: 100%; / * Ширина блоку-контейнера * / max-width: 960px; / * Максимальна ширина контейнера * / margin: 0 auto; / * Цей стиль центрує контейнер * /} .photo {float: left; / * Говоримо елементам вибудовуватися один за іншим * / width: 33.333333%; / * Встановлюємо ширину елемента * / padding: 10px; / * Додаємо відступи з кожного боку * / box-sizing: border-box; / * Міняємо спосіб обчислення ширини * /}

Оновивши сторінку в браузері, ви побачите перші зміни. Мініатюри вже вишикувалися плиткою по три в ряд. Можливо, ви хочете дізнатися, чому ми вказали таке дивне і дробове число для ширини елемента? Все дуже просто: нам потрібно, щоб в рядку містилося три мініатюри, які займали б відведене місце по максимуму (всі 100% ширини контейнера). Ми ділимо 100 на 3 і отримуємо число 33 і 3 в періоді. Округлення числа до 33.333333 в нашій ситуації призводить до того, що ширина мініатюри стає 319.98 пікселів. 319.98 × 3 = 959.94, що практично збігається з шириною контейнера (на жаль, зовсім без похибок обійтися не можна, коли мова йде про дрібних числах в CSS).

Перевіримо адаптивність нашої сітки. Змініть ширину вікна браузера кілька разів і поспостерігайте за поведінкою елементів. При ширині менше 977 пікселів елементи починають некоректно себе вести. Це відбувається тому, що зображення мініатюр не підлаштовувати під ширину контейнера. Додайте наступний стиль для забезпечення адаптивності картинок:

.photo img {display: block; max-width: 100%; height: auto; }

Тепер все працює так, як треба, і навіть на невеликих телефонах з шириною екрану 320 пікселів наша галерея дуже зручна у використанні і красиво виглядає.

2. Оформлення мініатюр

Згідно макету, кожна мініатюра повинна бути обрамлена в рамку світло-сірого кольору. Ширина рамки з кожного боку становить 10 пікселів. Реалізувати цю рамку можна двома способами, і візуально вони нічим не відрізнятимуться. Ми покажемо обидва способи.

Спосіб I: властивість border

Перший спосіб - створити рамку потрібного кольору і ширини для кожного тега <img>.
Додайте цей код до селектору .photo img:

border: 10px solid #eee; box-sizing: border-box;

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

Оновлення сторінку в браузері і запам'ятайте результат.

Спосіб II: властивості background-color і padding

Другий спосіб полягає в тому, щоб імітувати вигляд рамки за допомогою створення 10-піксельних внутрішніх відступів і зафарбовування фону в світло-сірий колір. Замініть код з першого способу на наступний:

padding: 10px; background-color: #eee; box-sizing: border-box;

Збережіть зміни і обновіть веб-сторінку. Чи помітили ви візуальні зміни? Обидва способи призводять до однакового зовнішньому результату, але у них є відмінності в іншому.

Перший спосіб займає на один рядок менше (якщо, звичайно, використовувати скорочений запис border). Другий спосіб трохи більше громіздкий, але він дозволяє гратися з фоном, замінюючи його, наприклад, на фоновий малюнок або градієнт, домагаючись додаткових цікавих ефектів. Однак властивість border теж дозволяє встановлювати фонові малюнки і градієнти, тому різниця тут невелика.

Зробити вибір на користь другого способу можна, якщо вам необхідно, щоб фон, який відображається в «рамці», також був і під фотографією. Навіщо це може знадобитися? Наприклад, в разі, коли в галереї присутні зображення з прозорими або напівпрозорими областями, і вам потрібно, щоб з-під цієї прозорої області переглядав фон.

Стиль при наведенні

Пора нам згадати про псевдоклас і псевдоелементи, які ми вивчали ще в першій частині підручника. Сьогодні нам знадобиться псевдоклас: hover, щоб визначити стиль мініатюри, коли на неї курсором, а також псевдоелемент: after для додавання певної контенту після кожної мініатюри.

Для поліпшення юзабіліті (зручності використання) сайту прийнято додавати додаткові ефекти до активних елементів веб-сторінки. Наприклад, всі ми звикли до того, що при наведенні курсору на посилання стандартна стрілка змінюється на pointer - курсор у вигляді руки. Таким чином ми розуміємо, що елемент клікабелен і клік по ньому призведе до якоїсь події.

Однак однієї зміни курсора часто буває недостатньо - хочеться бачити більш помітні і більш очевидні знаки, які б давали можливість легко зрозуміти, яку дію буде відбуватися після кліка по елементу. Саме цим ми і займемося далі.

На першій мініатюрі в макеті показано, як вона повинна виглядати в стані наведення на неї курсора. Фотографія стає напівпрозорою, а в центрі елемента з'являється іконка очі, натякає на те, що клік по мініатюрі означає перегляд повного зображення.

Запишемо стиль для псевдокласу .photo a: hover:

.photo a: hover {opacity: 0.5; }

А також змусимо тег <a> поводитися як блок, інакше ми не побачимо, як попередній код спрацьовує на мініатюрі:

.photo a {display: block; }

Тепер, коли ви збережете таблицю стилів, поновіть сторінку в браузері і наведете курсор на будь-яку з фотографій, то побачите, що вона стала напівпрозорої. За це поведінка відповідає властивість opacity, чиє значення може варіюватися від 0 (повна прозорість) до 1 (повна непрозорість), включаючи дробові числа, які встановлюють напівпрозорість. Приберіть курсор, і фото повернеться до свого первісного вигляду (т. Е. До значення за замовчуванням, а саме opacity: 1).

Займемося додаванням іконки очі. Для цього нам знадобиться задіяти псевдоелемент: after. Додайте наступні стилі в вашу таблицю, після чого ми пояснимо, навіщо потрібен кожен з них:

.photo a: after {content: ''; background: transparent url (../ img / icons / eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden; }

Крім цього допишіть властивість position: relative; до селектору .photo a.

Отже, розберемося з вишенаписанное кодом. Зазвичай псевдоелемент: after додається до елементу для того, щоб вивести потрібний текст після його вмісту. Цей текст додається через властивість content. Веб-розробники використовують можливості: after для виведення додаткових графічних елементів. У цьому випадку значення властивості content залишається порожнім, а потрібне зображення додається за допомогою властивості background. Саме це ми і зробили по відношенню до псевдоелементу .photo a: after, додавши іконку очі як фоновий малюнок.

Але після того різання цих кроків ви ще не побачите всякої подоби. Щоб воно здалося, ми додаємо ширину і висоту елемента, а також позиціонуємо його (пізніше ця тема буде розглядатися більш детально). Ми встановили розміри, ідентичні розмірам самої іконки (52 × 35 пікселів) і задали властивість position: absolute.

Іконка вже видно, проте вона розташована не по центру мініатюри. Щоб мати можливість позиціонувати іконку щодо елемента .photo a, ми додали цьому елементу властивість position: relative. Повторимося, що з властивістю position ми трохи забігаємо вперед, тому поки що ви можете просто скопіювати цей код і спостерігати, що виходить.

Наступним кроком буде центрування іконки по вертикалі і горизонталі. Елемент зі стилем position: absolute і чітко визначеними розмірами можна легко центрувати, вказавши для властивостей top, bottom, left і right значення 0, а для властивості margin - значення auto.

Останнє, що залишилося розібрати - це властивість visibility: hidden. Воно відповідає за видимість / невидимість елемента. Його значення hidden можна порівняти з плащем-невидимкою - елемент стає невидимим, але при цьому знаходиться на сторінці і займає місце.

Навіщо ми приховали псевдоелемент з іконкою? Щоб робити його видимим тільки при наведенні курсору на посилання-мініатюру. І для цього ми знову звернемося до псевдоклас: hover. Запишемо наступний код:

.photo: hover> a: after {visibility: visible; }

Цей на перший погляд дивний селектор повідомляє браузеру, що при наведенні курсору на елемент .photo необхідно застосувати стиль до псевдоелементу: after тега <a>, що є дочірнім саме для .photo. Сам стиль visibility: visible означає, що іконка очі стає видимою.

Оновлення сторінку і подивіться, як тепер реагують елементи на наведення курсору. Так виглядає набагато краще, чи не так? Нам залишилося стилізувати підписи до фотографій, додати фінальні штрихи і реалізувати відкриття фото у спливаючому вікні.

3. Стилізація підписів

В ідеалі, підпис до фотографії повинна виглядати лаконічно і не надто впадати в очі. Тому наш стиль для неї буде дуже простим:

.photo figcaption {font-family: 'Open Sans', sans-serif; color: # 999999; text-align: center; margin-top: 20px; }

4. Фінальні штрихи

Ми ще не стилізували заголовок над галереєю. Давайте зробимо це:

h1 {font-size: 36px; text-transform: uppercase; color: #cccccc; text-align: center; margin: 30px 0; }

Щоб не дописувати властивість font-family до кожного елементу, буде краще задати його для всього тега <body>, після чого стерти цей рядок з стилю для .photo figcaption - вона там тепер зайва:

body {font-family: 'Open Sans', sans-serif; }

А щоб сам блок галереї не впирався в низ веб-сторінки, додамо йому невеликий відступ знизу:

#gallery {margin-bottom: 50px; }

Оновимо сторінку і перевіримо результат. Але що це? Відступ знизу не з'явився. І якщо перевірити висоту блоку #gallery, ми побачимо, що вона дорівнює нулю. Як таке може бути, якщо цей блок не порожній, а всередині нього знаходяться мініатюри? Відповідь наступна: властивість float виключає елемент з нормального потоку. Тому, коли дочірнім елементам задано обтікання float, батьківський елемент стискається по висоті, немов ігноруючи присутність float-елементів. Висота батька стає рівною нулю, або, якщо всередині знаходяться дочірні елементи без обтікання, висота батька прирівнюється до висоти цих елементів. Відключити ігнорування float-елементів батьком можна за допомогою наступного стилю:

#gallery: after {content: ''; display: block; height: 0; clear: both; }

Це один з декількох CSS- «хаков», що дозволяють вирішити проблему зниклої висоти контейнера. Трохи пізніше ми ще повернемося до обговорення цієї проблеми і вивчимо її більш детально. А поки що збережете зміни в таблиці стилів і обновіть веб-сторінку. Доданий нами нижній відступ в 60 пікселів тепер знаходиться там, де і було потрібно.

5. Підключення плагіна для спливаючих вікон

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

Плагін Lightbox, що працює на базі JavaScript-бібліотеки jQuery, використовується для накладання зображень поверх поточної сторінки. Це зручний інструмент, який працює в будь-якому сучасному браузері.

На початку уроку ми вже сказали, що підключили необхідний скрипт і таблицю стилів до нашого HTML-документу. Вам залишиться лише форматувати його, додавши атрибут data-lightbox = "roadtrip" до кожного тегу <a>, який посилається на зображення. Цей код говорить плагіну, що посилання потрібно відкрити у спливаючому вікні, а також додати можливість перемикатися між фотографіями, використовуючи бічні стрілки.

Отже, продублюйте атрибут для кожної з дев'яти посилань нашої галереї:

<a href="img/originals/img-01.jpg" data-lightbox="roadtrip"> <img src = "img / img-01-min.jpg" alt = "Eagle" /> </a>

Потім збережіть зміни в документі і перегляньте його в браузері. Погодьтеся, що такий варіант перегляду фотографій набагато більш зручний і сучасний! Перемикайте фотографії стрілками, не закриваючи спливаюче вікно. Поспостерігайте за тим, як вікно автоматично змінює свої розміри, підлаштовуючись під розміри зображення.

При бажанні ви можете зробити так, щоб плагін відображав у відкритому вікні і підпис до фотографії. Для цього додайте до заслання ще один атрибут - data-title = "", а всередину його лапок помістіть текст підпису, скопіювавши з тега <figcaption>:

<a href="img/originals/img-01.jpg" data-lightbox="roadtrip" data-title="Eagle"> <img src = "img / img-01-min.jpg" alt = "Eagle" /> </a>

Повторіть ці дії для інших посилань і перевірте результат.

висновок

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

Якщо з якоїсь причини у вас щось не вийшло, ви завжди можете подивитися і вивчити готовий код, який включений в загальний архів з файлами. Також вам доступно демо галереї:

дивитися демо

Ми сподіваємося, що дане практичне заняття принесло вам користь і допомогло краще розібратися в тому, як працює CSS. А попереду нас чекає ще один урок - на цей раз спрямований на закріплення знань про фонових зображеннях.

Можливо, ви хочете дізнатися, чому ми вказали таке дивне і дробове число для ширини елемента?
Чи помітили ви візуальні зміни?
Навіщо це може знадобитися?
Навіщо ми приховали псевдоелемент з іконкою?
Так виглядає набагато краще, чи не так?
Але що це?
Як таке може бути, якщо цей блок не порожній, а всередині нього знаходяться мініатюри?

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: