Всім привіт. Сьогодні ми поговоримо про те, як створювати градієнти на CSS3.
Для початку створимо блок, на прикладі якого будемо розглядати приклади.
CSS .container width: 400px;height: 300px;
float: left;
margin: 40px;
background: # 999;
border-radius: 5px;
box-shadow: 0 8px 15px rgba (0,0,0, .6);
>
Отже, у нас є блок. Тепер будемо розглядати градієнти. Задаються вони в background.
container background: linear-gradient (# 333, #bbbb);
>
Це мінімальний набір параметрів. Перший колір зверху поступово змінюється нижнім кольором. Однак, першим параметром можна передати зміщення в градусах.
background: linear-gradient (45deg, # 333, #bbb);
Значення може бути і негативним. Також, значення зсуву можна задавати і словами.
background: linear-gradient (right top, # 333, #bbb);
Тобто градієнт буде починатися з правого верхнього кута в даному випадку.
Ще задати значення можна в процентах
background: linear-gradient (40% 10%, # 333, #bbb);
Ми можемо задавати color-stoppers. Задаються вони після кольору. Тоді градієнт буде більш різким.
background: linear-gradient (60% 10%, # 333 30%, #bbb 50%);
Отже, з лінійними градиентами розібралися, можна перейти до радіальних. тобто круговим. Все, що було сказано для лінійних градієнтів. справедливо і для радіальних. Єдина відмінність, що вони задаються по колу.
background: radial-gradient (center, # 333 70%, #bbb 100%);
Насамкінець варто сказати, що градієнтів може бути кілька. Для цього достатньо просто перерахувати їх через кому.
Отже, на цьому все. Сьогодні ми розібралися, як задавати градієнти в CSS3. Дякую за увагу і до зустрічі!
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так: