Поговоримо про властивості CSS3 завдяки яким можна створювати різні ефекти появи, наприклад тексту, при наведенні на зображення і не тільки. j # 097; vascript при цьому не використовується, що позначається на кросбраузерності, втім відображення з'являється тексту буде, але без ефектів.
Ось базовий шматочок над яким будемо виробляти різноманітні маніпуляції:
Класи .portfolio-container. .portfolio-items нас також особливо цікавити не будуть.
Працювати будемо з елементом списку.
Кожен елемент списку, і зображення має такі властивості:
Обводочку, тіні, межі, розміри блоку 201px, 150px (повинні бути рівні розмірам зображення, щоб уникнути приплюснутості або розтягування - як в нашому прикладі!)
Далі оформимо заголовок з'являється тексту.
Тепер оформимо сам блок з з'являтимуться контентом. Додавши йому ефекти появи ease-in-out:
Тепер окремо цей же блок з з'являтимуться контентом, при наведенні:
Для інших елементів списку реалізовані інші ефекти, куди більш екстравагантні.
Говорити про кожного не має сенсу, та й за часом займе багато, тому дивимося Демо. качаємо і дивимося вихідні.
СКАЧАТИ Стрибок: 6051
890,46 Kb Хто скачав?