.т5. Линейный градиент CSS

Сообщений 1 страница 4 из 4

Поделиться102.01.2020 00:40:01

Автор: МАЧОнаДАЧЕ
Возраст: 41 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background.

Синтаксис CSS linear-gradient

background: linear-gradient(позиция, цвет1, цвет2,...);
Где:

позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
to top - переход снизу вверх (0deg)
to left - переход справа налево (270deg)
to bottom - переход сверху вниз (180deg)
to right - переход слева направо (90deg)
to top left - переход правого нижнего угла к левому верхнему
to top right - переход от левого нижнего угла к правому верхнему
to bottom left - переход от правого верхнего угла к левому нижнему
to bottom right - переход от левого верхнего угла к правому нижнему
Помимо точных значений можно указать угол наклона в deg
цвет1 - начальный цвет
цвет2 - конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).

Примечание 1
Можно задавать переход нескольких цветов через запятую.

Как сделать нелинейное изменение градиента
Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

background: linear-gradient(позиция, цвет1 процент, цвет2 процент);
Ниже будут примеры с линейными градиентами

Поделиться202.01.2020 00:41:28

Автор: МАЧОнаДАЧЕ
Возраст: 41 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

[html]
<html>
<head>
<style>
.primer1_to_top{
width: 300px;
height: 100px;
background: linear-gradient(to top, #006400, #ADFF2F);
margin: 10px;
}
.primer2_to_left{
width: 300px;
height: 100px;
background: linear-gradient(to left, #B22222, #FFA07A);
margin: 10px;
}
.primer3_to_bottom{
width: 300px;
height: 100px;
background: linear-gradient(to bottom, #9400D3, #DDA0DD);
margin: 10px;
}
.primer4_to_right{
width: 300px;
height: 100px;
background: linear-gradient(to right, #00008B, #BFEFFF);
margin: 10px;
}
.primer5_to_top_left{
width: 300px;
height: 100px;
background: linear-gradient(to top left, #006400, #ADFF2F);
margin: 10px;
}
.primer6_to_left_right{
width: 300px;
height: 100px;
background: linear-gradient(to top right, #B22222, #FFA07A);
margin: 10px;
}
.primer7_to_bottom_left{
width: 300px;
height: 100px;
background: linear-gradient(to bottom left, #9400D3, #DDA0DD);
margin: 10px;
}
.primer8_to_bottom_right{
width: 300px;
height: 100px;
background: linear-gradient(to bottom right, #00008B, #BFEFFF);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer1_to_top"></div>
<div class="primer2_to_left"></div>
<div class="primer3_to_bottom"></div>
<div class="primer4_to_right"></div>
<div class="primer5_to_top_left"></div>
<div class="primer6_to_left_right"></div>
<div class="primer7_to_bottom_left"></div>
<div class="primer8_to_bottom_right"></div>
</body>
</html>
[/html]

Код

Код:

<html>
<head>
<style>
	.primer1_to_top{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top, #006400, #ADFF2F);
	margin: 10px; 
	}
	.primer2_to_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to left, #B22222, #FFA07A);
	margin: 10px; 
	}
	.primer3_to_bottom{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom, #9400D3, #DDA0DD);
	margin: 10px; 
	}
	.primer4_to_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to right, #00008B, #BFEFFF);
	margin: 10px; 
	}
	.primer5_to_top_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top left, #006400, #ADFF2F);
	margin: 10px; 
	}
	.primer6_to_left_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top right, #B22222, #FFA07A);
	margin: 10px; 
	}
	.primer7_to_bottom_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom left, #9400D3, #DDA0DD);
	margin: 10px; 
	}
	.primer8_to_bottom_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom right, #00008B, #BFEFFF);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer1_to_top"></div> 
	<div class="primer2_to_left"></div> 
	<div class="primer3_to_bottom"></div> 
	<div class="primer4_to_right"></div> 
	<div class="primer5_to_top_left"></div> 
	<div class="primer6_to_left_right"></div> 
	<div class="primer7_to_bottom_left"></div> 
	<div class="primer8_to_bottom_right"></div> 
</body>
</html>

Поделиться302.01.2020 00:44:58

Автор: МАЧОнаДАЧЕ
Возраст: 41 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

Пример 2. Множественный линейный градиент
Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.

[html]
<html>
<head>
<style>
.primer9_to_right{
width: 300px;
height: 100px;
background: linear-gradient(90deg, #FFF,#F00,#0F0,#FF00FF,#00F,#000);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer9_to_right"></div>
</body>
</html>
[/html]

Код

Код:

<html>
<head>
<style>
	.primer9_to_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(90deg, #FFF,#F00,#0F0,#FF00FF,#00F,#000);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer9_to_right"></div> 
</body>
</html>

Поделиться402.01.2020 00:47:55

Автор: МАЧОнаДАЧЕ
Возраст: 41 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

Пример 3. Красивая кнопка на сайте с линейным градиентом
Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте.

Жми кнопку

[html]
<html>
<head>
<style>
.knopka{
width: 200px;
background: #8B3A3A;
background: linear-gradient(to top, #8B3A3A 0%, #FF8C69 45%, #EEC591 100%);
font-size: 15px;
padding: 15px;
color: #8B3A62;
border: 1px solid #FF6347;
border-radius: 20px;
text-align: center;
}
.knopka:hover {
background: #EE3B3B;
background: linear-gradient(to top, #EE3B3B 0%, #FF8C69 45%, #EE4000 100%);
color: #fff;
border-radius: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="BUTTON">КНОПКА</div>
</body>
</html>
[/html]

Код

Код:

<html>
<head>
<style>
	.knopka{
	width: 200px; 
	background: #8B3A3A; 
	background: linear-gradient(to top, #8B3A3A 0%, #FF8C69 45%, #EEC591 100%); 
	font-size: 15px;  
	padding: 15px; 
	color: #8B3A62; 
	border: 1px solid #FF6347; 
	border-radius: 20px; 
	text-align: center; 
	}
	.knopka:hover {
	background: #EE3B3B; 
	background: linear-gradient(to top, #EE3B3B 0%, #FF8C69 45%, #EE4000 100%); 
	color: #fff; 
	border-radius: 20px; 
	cursor: pointer; 
	}
</style>
</head>
<body>
	<div class="BUTTON">КНОПКА</div> 
</body>
</html>

Forix ФоРуМ рунета

Меню навигации

Пользовательские ссылки

Информация о пользователе

.т5. Линейный градиент CSS

Сообщений 1 страница 4 из 4

Поделиться102.01.2020 00:40:01

Поделиться202.01.2020 00:41:28

Поделиться302.01.2020 00:44:58

Поделиться402.01.2020 00:47:55