Войти
s-lub » Учебники » CSS 3 » Линейные градиенты в CSS 3

Линейные градиенты в CSS 3

Линейные градиенты в CSS 3

В старой версии CSS градиенты можно было реализовать за счёт отдельных картинок вставленных в виде фона, в новой версии CSS 3 сделали это возможным за счёт метода linear-gradient.

Этот метод необходимо указывать в качестве значения к свойству background, указывать направление градиента можно с помощью ключевых слов или градусов, цвет перехода указывается стандартным значением.

Теперь давайте рассмотрим это на примерах:

<html>
<head>
<style type='text/css'>
#wrap1,#wrap2,#wrap3,#wrap4 {
float:left;
margin:5px;
width:300px;
height:150px;
padding:10px;
border:1px #000 solid;
text-decoration:underline;}
#wrap3 {
background:linear-gradient(180deg,white,black);
}
#wrap4 {
background:linear-gradient(270deg,white,black);
}
</style>
</head>
<body>

<div id="wrap3">linear-gradient(0deg,white,black)</div>
<div id="wrap4">linear-gradient(270deg,white,black)</div>
</body>
</html>


Пример:

<html>
<head>
<style type="text/css">
#wrap1,#wrap2 {
margin:10px;
height:200px;
width:350px;
border:1px #000 solid;
float:left;}
#text1,#text2 {
background-color:rgba(0,0,0,0.7);
color:white;
padding:10px;
font-weight:bold;}
#wrap1 {
background:linear-gradient(left,white 0%,green 50%,black 100%);
background:-webkit-linear-gradient(left,white 0%,green 50%,black 100%); /* для Safari */
}
#wrap2 {
background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%);
background:-webkit-linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%); /* для Safari */
}
</style>
</head>
<body>
<div id="wrap1">
<div id="text1">linear-gradient(top,white 0%, green 50%,black 100%)</div>
</div>
<div id="wrap2">
<div id="text2">linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%)</div>
</div>
</body>
</html>

Пример:

<html>
<head>
<style type="text/css">
#wrap1,#wrap2 {
margin:10px;
height:300px;
width:350px;
border:1px #000 solid;
float:left;}
#text1,#text2 {
background-color:rgba(0,0,0,0.7);
color:white;
padding:10px;
font-weight:bold;
border-bottom:1px white solid;}
#wrap1 {
background:radial-gradient(white 20%,black 40%);
background:-webkit-radial-gradient(white 20%,black 40%); /* для Safari */
}
#wrap2 {
background:radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
background:-webkit-radial-gradient(circle,#8F04A8 20%,#5D016D 30%,black 45%); /* для Safari */
}
</style>
</head>
<body>
<div id="wrap1">
<div id="text1">radial-gradient(white 20%,black 40%)</div>
</div>
<div id="wrap2">
<div id="text2">radial-gradient(circle,#8F04A8 0%, #5D016D 40%,black 60%)</div>
</div>
</body>
</html>

Пример:

<html>
<head>
<style type="text/css">
#wrap1,#wrap2 {
margin:10px;
height:200px;
width:350px;
border:1px #000 solid;
float:left;}
#text1,#text2 {
background-color:rgba(0,0,0,1);
color:white;
padding:10px;
font-weight:bold;}
#wrap1 {
background:repeating-linear-gradient(50deg,white,white 5px,black 5px,black 10px);
background:-webkit-repeating-linear-gradient(60deg,white,white 5px,black 5px,black 10px); /* для Safari */
}
#wrap2 {
background:repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
background:-webkit-repeating-radial-gradient(circle,#8F04A8 20%,#5D016D 30%,black 45%); /* для Safari */
}
</style>
</head>
<body>
<div id="wrap1">
<div id="text1">repeating-linear-gradient(top left,white,white 5px,black 5px,black 10px)</div>
</div>
<div id="wrap2">
<div id="text2">repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%)</div>
</div>
</body>
</html>


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение