CSS3 градиентите ви позволява да изобразявате постепенни преливания между два или повече зададени цвята по ваш избор.
По-рано трябваше да използвате изображения за тези ефекти. Като използваме CSS3 градиенти можем да спестим време от изтегляне на файлове и съкратяване на кода. Елементите с градиенти изглеждат много по-добре когато са мащабирани когато ги генерирате в браузъра си ще забележите разликата от примерите които сме генерирали в този урок.
CSS3 определя два типа от градиенти:
- Linear Gradients (върви в посока - надолу/нагоре/наляво/надясно/диагонално)
- Radial Gradients (дефинират се от техния център)
CSS3 Linear Gradients
За да създадем linear градиент трябва да зададем поне два "стоп цвята". Стоп цветовете играят ролята на преливащия ефект когато се преминава от един в друг цвят. Можете също да зададете стартова точка и посока (или ъгъл) който градиент ефекта да следва.
Пример за Linear градиент:
Синтаксис
Linear (Линеен) градиент - Отгоре надолу (по подразбиране)
Следващия пример показва линеен градиент (Linear) който започва отгоре. Започва с червен цвят и прелива в син:
Пример
Линеен градиент от горе надолу:
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
Резултат :
Линеен градиент - от ляво на дясно
Следващия пример показва линеен градиент който започва от ляво. Започва с червен цвят и прелива в син.
Пример
Линеен градиент от ляво на дясно:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Резултат :
Диагонален линеен градиент
Можете да направите диагонален градиент, като зададете и хоризонталната и вертикалната стартова позиция.
Следващия пример показва линеен градиент който започва от горния ляв ъгъл (и стига до денсия долен ъгъл).Започва с червен цвят и прелива в син:
Пример
Линеен градиент който започва от горния ляв ъгъл (и стига до долния десен ъгъл):
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
Резултат :
Използване на ъгли (Angles)
Ако искате по-добър контрол върху посоката на градиента, можете да зададете градиент, можете да зададете градиент вместо предварително зададените посоки (към долната част,към горната,надясно,наляво,към долната дясна част и т.н).
Синтаксис
- background: linear-gradient(ъгъл, стоп-цвят1, стоп-цвят2);
Ъгълът представлява ъгъл между хоризонталната линия и градиентната линия, върви обратно на часовниковата стрелка. С други думи, 0deg създава градиент с посока от долу на горе, докато 90deg генерира градиент с посока от ляво на дясно.
Следващия пример показва как се използват ъгли в линейните градиенти.
Пример
Линеен градиент със зададен ъгъл:
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
Резултат :
Използване на множество стоп-цветове.
Следващия пример показва как се използват множество стоп-цветове.
Пример
Линеен градиент от горе надолу с множество стоп-цветове:
#grad {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
Резултат :
Следващия пример показва как се създава градиент с цветовете на дъгата и текст върху него:
Пример
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Резултат :
Използване на прозрачност
Градиентите в CSS3 поддържат също и прозрачност, която може да бъде използвана за да създадем ефект на избледняване.
За да добавите прозрачност, ще използваме rgba() function за да зададем стоп-цветовете. Последният параметър в rgba() function функцията може да бъде и стойност от 0 до 1, и тя ще зададе прозрачността на цвета: 0 индикира за пълна прозрачност, 1 индикира запълнен цвят (без прозрачност).
Следващия пример показва линеен градиент който започва от ляво.Започва с пълна прозрачност (0), и прелива в напълно запълнен червен цвят (1):
Пример
Линеен градиент от ляво на дясно, с прозрачност:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
Резултат :
Повтаряне на линеен градиент
Функцията repeating-linear-gradient() function се използва за да зададе на линеен градиент команда той да се дублира.
Пример
Повтарящ се линеен градиент:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Резултат :
CSS3 Радиални градиенти
Радиалните градиенти се определят от техния център. За да създадете радиален градиент трябва да зададете поне два стоп-цвята както беше при линейния.
Пример за радиален градиент:
Синтаксис
- background: radial-gradient(shape size at position, start-color, ..., last-color);
По подразбиране, формата е елипсова, размера се определя по най-далечния ъгъл и позицията е центрирана.
Радиален градиент - С равномерно раздалечени стоп-цветове (тази настройка е по подразбиране):
Пример
Радиален градиент с равномерно раздалечени стоп цветове:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
Резултат :
Пример
Радиален градиент - с различно раздалечени стоп-цветове:
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
Резултат :
Задаване на форма
Параметъра shape задава формата. Той може да приема стойности circle (кръг) или ellipse (елипсовидна). По подразбиране стойността е елипсовидна.
Пример
Радиален градиент с форма на кръг :
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}
Резултат :
Използване на ключови думи с различен размер
Параметъра size определя размера на градиента. Може да приема четири стойности (ключови думи):
- closest-side - най-близката страна
- farthest-side - най-далечната страна
- closest-corner - най-близкия ъгъл
- farthest-corner - най-далечния ъгъл
Пример
Радиален градиент с различни по размер ключови думи :
#grad1 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
Резултат :
Повторение на радиален градиент (radial-gradient)
Функцията repeating-radial-gradient() function се използва за да дубликира/повтаря радиални градиенти :
Пример
Повтарящ се радиален градиент:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox 3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Резултат :
Ако нещо не ви е ясно или искате да допълните нещо моля направете го в коментарите след урока..
|
