Вы здесь: Главная > CSS > Линейные градиенты: создание градиентных фонов с помощью CSS

Линейные градиенты: создание градиентных фонов с помощью CSS

Опубликовано автором Просмотры: 23

Создание линейных градиентных фонов с помощью CSS.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Linear gradients</title>
	<style>
		html {
			background: -webkit-linear-gradient(left, yellow, red);
			background: linear-gradient(to left, yellow, red);
			height: 100%;
		}

		body {
			font: 14px/1.5 courier;
			color: #000;
		}
	
		p {
			width: 200px;
			height: 200px;
			padding: 20px;
			margin: 20px 0 0 20px;
			float: left;
			border: 1px solid yellow;
		}
	
		#gradient1 {
			background: #888 url(images/gradientLinear.jpg) repeat-x; /* Фоновые изображения можно использовать для браузеров, которые не способны создавать градиенты */
			background: -webkit-linear-gradient(yellow, red); /* Резервное копирование для основных браузеров, которые все еще могут обрабатывать градиенты */
			background: linear-gradient(yellow, red); /* Стандарт CSS3 */
		}
		
		#gradient2 {
			background: -webkit-linear-gradient(right, yellow, red);
			background: linear-gradient(to right, yellow, red);
		}
		
		#gradient3 {
			background: -webkit-linear-gradient(bottom right, yellow, red);
			background: linear-gradient(to bottom right, yellow, red);
		}
		
		#gradient4 {
			background: -webkit-linear-gradient(20deg, yellow, red);
			background: linear-gradient(20deg, yellow, red);
		}
		
		#gradient5 {
			background: -webkit-linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
			background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
		}
		
		#gradient6 {
			background: -webkit-linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
			background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
		}
		
		#gradientCollie {
			width: 120px;
			height: 90px;
			padding: 75px 60px;
			background: -webkit-linear-gradient(white, #06c);
			background: linear-gradient(white, #06c);
		}
	</style>
</head>
<body>
	<p id="gradient1"><code>background: linear-gradient(yellow, red);</code></p>
	<p id="gradient2"><code>background: linear-gradient(to right, yellow, red);</code></p>
	<p id="gradient3"><code>background: linear-gradient(to bottom right, yellow, red);</code></p>
	<p id="gradient4"><code>background: linear-gradient(20deg, yellow, red);</code></p>
	<p id="gradient5"><code>background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));</code></p>
	<p id="gradient6"><code>background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);</code></p>
</body>
</html>

Страницы в тему:

Добавить комментарий