Як задавати градієнти в css3.

Відео: Уроки по CSS - Градієнти. Частина 1

Всім привіт. Сьогодні ми поговоримо про те, як створювати градієнти на CSS3.

Для початку створимо блок, на прикладі якого будемо розглядати приклади.

class="Container"gt;CSS

.container { 
 width:400px- 
 height:300px- 
float: left- 
 margin:40px- 
 background:# 999- 
 border-radius:5px- 
 box-shadow:08px15px rgba(0,0,0,.6) - 
}

Отже, у нас є блок. Тепер будемо розглядати градієнти. Задаються вони в background.

Відео: Градієнти в фотошоп! Як використовувати! Як створити свої! Урок 11!

.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%) -

Отже, з лінійними градиентами розібралися, можна перейти до радіальним, тобто круговим. Все, що було сказано для лінійних градієнтів, справедливо і для радіальних. Єдина відмінність, що вони задаються по колу.