8 простих ефектів CSS3, які справлять враження на ваших користувачів
Буквально пара рядків коду дасть дивовижні ефекти переходу, які схвилюють ваших користувачів, збільшать залучення і, зрештою, при правильному використанні збільшить вашу відвідуваність. Більше того, ці ефекти використовують апаратне прискорення, це прогрес – у якому ви можете взяти участь зараз.
Ось 8 дійсно простих ефектів, які додадуть життя у ваш UI (інтерфейс користувача) і посмішок на обличчя ваших користувачів.
Всі ці ефекти (один прямокутник) керуються за допомогою transition властивості. Таким чином, щоб бачити, як ці ефекти працюють, ми створили div у HTML сторінці:
Зробивши це, встановіть його ширину та висоту (щоб він мав розміри), його колір фону (щоб ми могли бачити його) та властивості його ефекту.
Властивість transition має три значення: властивості по переходу (у нашому випадку всі з них); швидкість переходу (у нашому випадку 0,3 секунди) і третє значення, яке дозволяє змінювати як розраховується прискорення та уповільнення, але ми протримаємося налаштування за замовчуванням, залишаючи це поле порожнім.
Тепер все, що потрібно зробити, це змінювати властивості, і вони створюватимуть анімацію для нас.
Якщо ви хочете продовжити самостійно, то вам демо-файли тут.
1. Затемнення
Зробити ефекти затемнення – це досить поширене прохання клієнтів. Це чудовий спосіб підкреслити функціональність або звернути увагу на заклик до дії.
Ефект кодуються в два етапи: спочатку ви встановите початковий стан; далі встановіть зміну, наприклад, при наведенні миші:
(Переконайтеся, що ви надали вашому div клас "fade", щоб побачити, як це працює.)
2. Зміна кольору
Раніше анімація зміни кольору був неймовірноскладною справою, із залученням математики, що бере участь у розрахунку окремі значення RGB, а потім рекомбінації їх. Тепер ми просто встановлюємо div'у клас "color" і задаємо колір, який хочемо, в CSS:
3. Збільшення та утискання
Колись, щоб збільшити елемент, вам потрібно було використовувати його ширину та висоту або параметр наповненості. Але для збільшення ми можемо використовувати трансформацію силами CSS3.
Встановіть клас вашого div на "grow", а потім додайте цей код у ваш стиль блоку:
Утиснути елемент так само просто, як збільшити його. Щоб збільшити елемент ми вказуємо значення більше 1, щоб зменшити його, ми вказаємо значення менше, ніж 1:
4. Кручення елементів
CSS передбачає низку трансформацій, і одна з найкращих – це кручення елемента. Надайте вашому div'у клас "rotate" і додайте наступні рядки до вашого CSS:
Codeby web-security - новий курс від Codeby Security School
Пропонуємо до вашої уваги новий курс від командиThe Codeby - "Тестування Веб-Додатків на проникнення з нуля".Загальна теорія, підготовка робочого оточення, пасивний фазинг та фінгерпринт, Активний фазинг, Вразливості, Пост-експлуатація, Інструментальні засоби, Social Engeneering та багато іншого.Детальніше .
5. Перетворення квадрата на коло
Зараз дуже популярним є ефект трансформації квадратного елемента в круглий і навпаки. За допомогою CSS цього легко досягти, ми просто перехід властивість межі радіусу. Ми просто використовуємо властивість border-radius.
Надайте вашому div'у клас "circle" і додати ці рядки до ваших таблиць стилів:
3D тіні були сприйняті з несхваленням протягом року або близько того, тому що вони, бачите, не вписувалися в плоский дизайн,це, звичайно нісенітниця, вони працюють фантастично добре, даючи користувачеві відчути залучення як при роботі з плоским дизайном, так і з псевдо 3D інтерфейсом.
Цей ефект досягається шляхом додавання прямокутника тіні, а потім переміщуючи елемент на осі x за допомогою зміни властивості transform і translate таким чином, що здається, ніби елемент росте з екрану.
Надайте вашому div'у клас "threed", а потім додайте наступний код до вашого CSS:
Не всі елементи використовують якість переходу. Ми також можемо створити дуже складні анімації з використанням @keyframes, анімації та анімації-ітерації.
У цьому випадку ми спочатку визначимо CSS анімації у стилях. Ви помітите, що через проблеми реалізації, ми повинні використовувати @-webkit-keyframes, а також @keyframes (так, Internet Explorer дійсно краще, ніж Chrome, у цьому відношенні принаймні).
8. Вставка кордону
Один із найгарячіших стилів кнопок прямо зараз – це кнопка привид; кнопки без фону і жирні кордону. Ми можемо, звичайно, просто додати рамку до елемента, але це зміниться положення елемента. Ми могли б вирішити цю проблему за допомогою розмірів боксу, але набагато простішим рішенням є перехід у граничну за допомогою вставки тіні.
Дайте вашій справі клас "border" і додайте наступний CSS для ваших стилів:
Paranoid - курс від Codeby Security School
Представляємо вашій увазі курс від командиcodeby - "Комплекс заходів щодо захисту персональних даних, анонімності в інтернеті і не тільки" Детальніше .