Створюємо чисте портфоліо (частина 2 верстка)
Нещодавно ми публікували урок зі створення дизайну чистого портфоліо у Фотошопі. Сьогодні ми зробимо наше портфоліо функціональним і змусимо його відображатись у браузері. У цьому уроці ми покажемо, як згорнути сайт за допомогою html5 і css3 і зробити слайдер за допомогою jQuery.
Остаточний результат:
Нарізка зображень
Наріжте зображення лого та перемикачів для слайдера Також нам потрібні спрайти для того, щоб зробити перехід зображень від чорно-білого до кольорового.
Також нам знадобиться зображення для заливання.
Крок 0 – Підготовка
Для початку не забудьте створити окремі папки для зображень, стилів та скриптів.
Крок 1 – Структура документа
Ми будемо використовувати HTML5. IE не підтримує нові елементи HTML5, тому підключимо скрипт 'html5shiv' до нашого документа.
Крок 6 – Секція для останніх робіт
Для списку робіт ми додамо наступний код:
Крок 7 – Футер
А тепер настав час додати стилі
Крок 1 – Скидання стилів
Дуже важливо скинути стилі, завжди починайте із цієї частини.
Крок 2 – @font-face
Для того, щоб згенерувати код для @font-face, можна скористатися сервісом fontsquirrel.com
Крок 3 – Загальні стилі
Крок 4 – Логотип
Тепер настав час замінити текст для логотипу картинкою.
Крок 5 – Навігація
Як ви пам'ятаєте, ми використали шрифт Museo-500 для навігаційного тексту. Задамо стилі для нашої навігації, не забувши вказати стилі для посилань у момент наведення та стилі активних посилань.
Крок 6 – меню, що випадає
Випадаюче меню буде заховано за замовчуванням, і з'явиться тільки в момент наведення на потрібне посилання. Також ми використовували властивість CSS3 transition, щобстворити цікавий ефект із прозорістю.
А цей код дозволить вирівняти розміри всіх пунктів у списку, що випадає, і запобігти перенесенню тексту на новий рядок.
Це стилі для списку:
PS: Техніки для створення списку, що випадає, взяті з цієї статті.