Трансформації CSS не надають ефекту на градієнти фону. Хоча існують прості способи імітувати плавні переходи градієнтів і в даному уроці ми розглянемо їх.
А навіщо турбуватися про переходах градієнтів? Відповідь дуже проста: уявіть ситуацію, коли ви розробляєте кнопки на CSS3. Щоб надати їм стильний вигляд майже обов'язково використовувати тіні, закруглені кути і градієнти.
Читайте матеріал уроку і у вас буде метод істотно поліпшити градієнт кнопок, особливо для стану: hover.
початкові стилі
Для демонстрації ми використовуємо три кольорових прямокутника, з якими будуть проводитися всі наступні дії.
Нижче наводяться лише важливі стилі, які необхідні для роботи, і можна бачити, що background-color відіграє значиму роль, так як фоновий колір буде єдиним піддаватися переходу.
1. Background-image
Так як перехід значень здійснюється для властивості background-color. потрібно встановити напівпрозорий фон за допомогою background-image. В результаті отримаємо плавний перехід градієнта для елемента, до якого застосовуються стилі.
2. Box-shadow
Можливо даний метод більш "брудний", але він відмінно працює. Замість напівпрозорого фонового зображення можна використовувати внутрішню тінь:
висновок
Методи дуже прості і легко реалізуються. Великою перевагою є відсутність вимог до використання додаткових елементів розмітки.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!