Вверх страницы

Вниз страницы

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

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Радиальный градиент CSS

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

Страница: 1

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

1

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

Радиальный градиент - градиент для создания эффектов при переходе одного цвета в другой. В отличии от линейного градиента, здесь используется либо круговой, либо эллипсообразный переход. Направления изменения цвета идет в разных направлениях от центра. Радиальный градиент еще называют "круговым градиентом".

Радиальный градиент задается с помощью свойства radial-gradient совместно с background. У него есть довольно много параметров, которые мы рассмотрим последовательно.

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

background: radial-gradient([at позиция форма размер,] цвет1, цвет2,...);
Где:

позиция - начальные координаты Х и У (чаще всего задаются в процентах). Есть константы:
top - по центру сверху (50% 0%)
left top - верхний левый угол (0% 0%)
right top - верхний правый угол (100% 0%)
center (стоит по умолчанию) - центр области (50% 50%)
left center - слева по центру (0% 50%)
right center - справа по центру (100% 50%)
bottom - снизу по центру (50% 100%)
left bottom - слева снизу (0% 100%)
right bottom - справа снизу (100% 100%)
Обязательно необходимо ключевое слово at.
форма — задание формы градиента. Есть два варианта:
circle - круг
ellipse - эллипс
размер — как будет растягиваться градиент. Может принимать следующие значения
closest-side - градиент стремится к ближайшей границе элемента.
closest-corner - градиент стремится к ближайшему углу.
farthest-side (по умолчанию) - градиент распространяется до дальней границы элемента.
closest-corner - градиент распространяется до дальнего угла элемента.
Ниже будут приведена таблица с примерами
цвет1 - начальный цвет
цвет2 - конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в фомрате rgba (см. коды цветов html для сайта).

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

Ниже примеры http://s9.uploads.ru/t/nOydv.gif

0

2

  • Автор: МАЧОнаДАЧЕ
  • МАЧОнаДАЧЕ
  • Возраст: 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{
width: 200px;
height: 200px;
background: radial-gradient(at 20% 50%, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer2{
width: 200px;
height: 200px;
background: radial-gradient(at 75% 40%, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer3{
width: 200px;
height: 200px;
background: radial-gradient(at 180px 40px, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer4{
width: 200px;
height: 200px;
background: radial-gradient(at top, #ADFF2F, #228B22, #006400);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer1"></div>
<div class="primer2"></div>
<div class="primer3"></div>
<div class="primer4"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.primer1{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 20% 50%, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer2{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 75% 40%, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer3{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 180px 40px, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer4{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at top, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer1"></div> 
	<div class="primer2"></div> 
	<div class="primer3"></div> 
	<div class="primer4"></div> 
</body>
</html>

0

3

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

[html]
<html>
<head>
<style>
.primer5{
width: 400px;
height: 150px;
background: radial-gradient(circle closest-side at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer6{
width: 400px;
height: 150px;
background: radial-gradient(circle closest-corner at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer7{
width: 400px;
height: 150px;
background: radial-gradient(circle farthest-side at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer8{
width: 400px;
height: 150px;
background: radial-gradient(circle farthest-corner at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer5">так</div>
<div class="primer6">и так</div>
<div class="primer7">вот так</div>
<div class="primer8">и вот</div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.primer5{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle closest-side at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer6{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle closest-corner at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer7{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle farthest-side at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer8{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle farthest-corner at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer5">так</div> 
	<div class="primer6">вот так</div> 
	<div class="primer7">и так</div> 
	<div class="primer8">и вот</div> 
</body>
</html>

0

4

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

Пример 3. Резкие переходы радиального градиента
У каждого цвета можно указывать его границы. Задавать их можно как в процентах, так и в абсолютных значениях. Например

background: radial-gradient(цвет1 20%, цвет2 70%, цвет3 100%)

Приведем практический пример

[html]
<html>
<head>
<style>
.primer9{
width: 200px;
height: 200px;
background: radial-gradient(circle at center, #00FF7F 10%, #228B22 60%, #006400 70%, #211 100%);
margin: 10px;
}
.primer9{
width: 200px;
height: 200px;
background: radial-gradient(circle at center, #000 5%, #fff 7%, #000 30%, #fff 80%, #000 83%);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer9"></div>
<div class="primer10"></div>
</body>
</html>
[/html]

Код

Код:
<html>
<head>
<style>
	.primer9{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(circle at center, #00FF7F 10%, #228B22 60%, #006400 70%, #211 100%);
	margin: 10px; 
	}
	.primer9{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(circle at center, #000 5%, #fff 7%, #000 30%, #fff 80%, #000 83%);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer9"></div> 
	<div class="primer10"></div> 
</body>
</html>

0

Страница: 1

Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Радиальный градиент CSS

создать форум