№ 92: Створення індивідуальних сторінок галереї - CSS-хитрощі

Anonim

У нас є трохи макету Photoshop, щоб працювати звідси, продовжуючи будувати шаблон для окремої сторінки галереї.

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

Далі ми маємо цю дуже тонку ліву колонку, в якій можна отримати текст. Ми починаємо з 1/8 7/8 сітки, але 1/8 трохи занадто тонка. Ми змінюємо його на 1/4 3/4, але це занадто. Тож, як байковий ведмедик, 1/6 5/6 був у самий раз.

Ми робимо деякі типографічні роботи у цій вузькій колонці, додаючи в заголовок (у

тег, звичайно, оскільки це найважливіший заголовок на сторінці), опис та інші розділи. Більшість типографіки просто стають на свої місця завдяки нашим простим та надійним типографічним налаштуванням.

Сітка 5/6 призначена для зображення. Хороший і великий, що чудово. Він має світло-сірий фон, як і зображення, розміщені в публікаціях блогу (наприклад,

).

Ми думаємо про те, щоб трохи пофантазувати над тим, як ми стилізуємо теги. Ми оглядаємось на CodePen (ось посилання на тег “теги”, META ALERT). У підсумку ми думаємо, що це надмірно, і залишаємо їх як звичайні посилання.

Ми змушуємо кнопку «повний розмір» працювати одним із найпростіших способів, які ми можемо, відкриваємо нове вікно, що відповідає розмірам зображення в повному розмірі, і показуємо в ньому зображення. Це як модальний ящик з початку 2000-х! Але мені це подобається. Це просто, йому не потрібна купа коду (як це було б у лайтбоксі), і з цим очевидно взаємодіяти. Це ще краще, якщо ви запитаєте мене.