Від автора: вітаю вас, дорогий читачу, на нашому блозі про сайтобудуванні. Сьогодні я хотів би розповісти, які css3 ефекти можна реалізувати на своєму сайті, причому це будуть, переважно, дуже прості речі, які не потребують сотні рядків коду для реалізації.
Реалізуємо плавність
Отже, для додання плавності при наведенні курсору на блок використовують властивість transition, як його значення можна просто вказати час, який потрібно на зміну стилів. Відповідно, чим більше часу, тим повільніше будуть відбуватися зміни.
Крім цього параметра можна вказати додаткові параметри, такі, як властивості, які повинні змінюватися плавно. Якщо плавні переходи потрібні для всіх властивостей, то можна написати ключове слово all або не писати взагалі нічого. Також можна задати ефект самого плавного переходу. Якщо його не писати, то буде використано значення за замовчуванням.
Transition: all 1s ease;
Ця рядок коду дозволить елемента, до якого вона додана, робити плавні зміни стилів при наведенні із затримкою в одну секунду. Ця затримка застосувати до всіх властивостей, а в якості ефекту буде використаний ease, є й інші, але про них я зараз говорити не буду.
Власне, цієї строчки коду достатньо, щоб реалізовувати плавні ефекти css3 при наведенні на блоки.
Зміна розмірів
Сьогодні це можна зробити двома способами. Перший, це при наведенні на блок змінювати його ширину і висоту.
Інший варіант – використання transform: scale(). В дужках вказано два значення: розмір по горизонталі і по вертикалі. За замовчуванням значення дорівнюють одиниці, так що якщо записати 2, то розмір збільшитися в два рази. Також можна записувати з десятковими частками. Відповідно, при бажанні ви можете і зменшувати елемент. Наприклад:
transform: scale(1.5, 1.5); — збільшить елемент в півтора рази
transform: scale(0.5, 0.5); — зменшить в два рази;
transform: scaleX(2); — збільшить ширину блоку в два рази.
Поворот
Здійснюється з допомогою тих самих трансформацій, але вже за допомогою rotate, значення задається у градусах:
transform: rotate(90deg); — поверне елемент на 90 градусів за годинниковою стрілкою
transform: rotate(-120deg); — поверне на 120 проти годинникової, тобто, по суті, на 240 за годинниковою.
Переміщення
Блоки можна плавно переміщувати в будь-яку сторону при наведенні. Для цього знову використовуйте трансформації, але вже параметр translate. До нього може додаватися X або Y для завдання зсуву тільки з однієї конкретної боку, якщо ж писати просто translate, то спочатку вказується зсув по горизонталі, потім по вертикалі. Допускається використання від’ємних значень.
Transform: translateX(-100px); — змістить блок на 100 пікселів вліво
transform: translate(150px, -200px); — на 150 пікселів вправо і на 200 пікселів вгору
Нахил
Задається з допомогою skew. Також можна задавати тільки з одного боку, використовуючи X і Y.
transform: skewX(15deg);
Зміна прозорості
Тепер ми закінчуємо з трансформаціями і подивимося, що дає opacity. З його допомогою можна робити при наведенні елемент більш яскравим або навпаки, більш тьмяним.
.block{
opacity: 0.5;
}
.block:hover{
opacity: 1;
}
Природно, також для .block повинно бути прописано властивість transition, щоб це було плавно.
Зміна кольору
Тут все теж дуже просто. При наведенні на елемент визначте для нього інший колір фону або тексту, тепер він буде плавно змінюватись. Колір можна задавати будь-яким зручним способом, хоч за допомогою ключового слова, хоч в режимі rgb, хоч в rgba.
Комбінування
Власне, ви цілком можете змінити відразу кілька стилів, які будуть плавно застосовуватися до блоку.
transform: scale(1.2, 1.2) rotate(-2deg);
background: #333;
У цьому прикладі елемент буде трохи збільшено, також він буде нахилений і у нього зміниться колір фону. Все це застосувати одночасно, але в той же час плавно. Тут я залишаю всі подальші варіанти вам, щоб ви самі подумали, як можна трансформувати елементи і до яких ефектам це зрештою призводить. Можливостей насправді багато.
Фільтри для зображень
У CSS3 з’явилися фільтри, тепер ця технологія може те, що раніше ви могли зробити з зображеннями тільки в графічному редакторі. Всі фільтри задаються за допомогою властивості filter: назву фільтра (значення).
Властивість дуже нове, тому не використовуйте його без відповідних префіксів. Наприклад, щоб воно працювало в Google Chrome, потрібно використовувати префікс –webkit:
-webkit-filter: saturate(3); — зробить колір елемента, до якого застосовується, набагато більш насиченим, ніж він є зараз. Можна задавати значення від 1 до 5, де 1 – значення за замовчуванням.
Варто сказати, що фільтри придумані в першу чергу саме для використання до картинок. До іншим блокам їх застосовувати немає особливої потреби. -webkit-filter: sepia(0.7) – додає ефект сепії, дозволяє надати фотографіям старий вигляд.
Grayscale(1) – додає більше сірого кольору до фотографії. Таким чином, можна з кольорової зробити чорно-білу. Drop-shadow – просунутий варіант тіні. Фільтр повністю копіює синтаксис властивості box-shadow, в ньому відсутній параметр розтягування. В цілому, він дозволяє зробити таку ж тінь, що й згадана властивість, але є 2 відмінності:
Якщо тінь застосована до png-зображення, drop-shadow намалює її чітко по контуру, а не квадратну. Це величезний плюс.
При завданні множинних тіней drop-shadow відтіняє не тільки основний елемент, але і всі його попередні тіні.
Анімація
З допомогою серії властивостей animation і @keyframes можна створювати дивовижні анімації. Ця можливість css3 заслуговує окремої книги, в цій статті я лише згадаю її, щоб ви не забували. Можливості анімації не обмежуються пересуванням елементів туди-сюди, сьогодні з її допомогою навіть створюють ігри на HTML5 і CSS3 і скриптах.
Створювати ефекти просто
CSS3 це така потужна технологія, що особливих проблем з простими ефектами у вас бути не повинно, а складні ви і самі зможете реалізувати з часом, коли наберетеся досвіду. Додаткові фішки і можливості дивіться у нашому преміум-курсі з CSS3, а також не забувайте підписатися на блог.
