Радиальный градиент

Здравствуйте! От линейных градиентов переходим к радиальным. Радиальные градиенты в отличие от линейных распространяются от центра наружу по круговой схеме. Для создания радиального градиента достаточно указать цвет, который будет в центре градиента, и цвет, который должен быть снаружи. Эти цвета передаются в функцию radial-gradient(). Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизация таблиц в CSS3</title>
        <style>
		div {
			width: 200px;
			height: 200px;
			border-radius: 100px;
			
			background-color: #eee;
			background-image: radial-gradient(white, black);
			background-image: -moz-radial-gradient(white, black);
			background-image: -webkit-radial-gradient(white, black);
		}
		p{
			margin: 0;
			padding-top: 60px;
			text-align: center;
			color: #eee;
		}
        </style>
    </head>
    <body>
		<div><p>Радиальный градиент</p></div>
	</body>
</html>
Читать далее

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно +1	Как всё будет выглядеть в блоге: Радиальный градиент Здравствуйте! От линейных градиентов переходим к радиальным Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/13229839/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Радиальный градиент </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! От линейных градиентов переходим к радиальным </div> </div> Радиальный градиент <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/poleznyie-servisyi-i-programmyi-dlya-nachinayuschih-polzovatelej/13229839/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Радиальный градиент</a> <div style="font-family:trebuchet MS;">Здравствуйте! От линейных градиентов переходим к радиальным </div> </div>

webguru

10.02.2017

В избранное Пожаловаться Просмотров: 450

Комментарии ⁰

Полезные сервисы и программы для начинающих пользователей 7268

Важные темы:

Активные участники:

Последние откомментированные темы:

Радиальный градиент

Комментарии временно отключены

Открытая группа
38975 участников