Взгляд на CSS3 градиент (линейный и радиальный градиенты) Взгляд на CSS3 градиент



CSS3 23.03.2013

 

Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

В данной статье я использовал на странице не картинки а именно примененный стиль.

В некоторых браузерах вы возможно не увидите некоторые примеры.

 

ДЕМО

 

 

Линейный градиент

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

div {
	/*Основной синтаксис*/
	background-image: linear-gradient(top, #ff5a00, #FFAE00);

	/*Кроссбраузерность*/	
	background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00);	
}

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

div {
	/*Основной синтаксис*/
	background-image: linear-gradient(45deg, #ff5a00, #FFAE00);	

	/*Кроссбраузерность*/
	background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
}

Стоп позиция

div {
	/*Основной синтаксис*/
	background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 50%);

	/*Кроссбраузерность*/
	background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
	background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
	background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
	background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);	
}

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

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет.

div {
	/*Основной синтаксис*/
	background: radial-gradient(circle, #FFF, #FFAE00);

	/*Кроссбраузерность*/
	background-image: -moz-radial-gradient(circle, #FFF, #FFAE00);
	background-image: -webkit-radial-gradient(circle, #FFF, #FFAE00);
	background-image: -o-radial-gradient(circle, #FFF, #FFAE00);
	background-image: -ms-radial-gradient(circle, #FFF, #FFAE00);	
}

Радиальный градиент до ближних сторон

div {
	/*Основной синтаксис*/
	background: radial-gradient(230px 50px, ellipse closest-side, white, blue);

	/*Кроссбраузерность*/
	background-image: -moz-radial-gradient(230px 50px, ellipse closest-side, white, blue);
	background-image: -webkit-radial-gradient(230px 50px, ellipse closest-side, white, blue);
	background-image: -o-radial-gradient(230px 50px, ellipse closest-side, white, blue);
	background-image: -ms-radial-gradient(230px 50px, ellipse closest-side, white, blue);	
}

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

div {
	/*Основной синтаксис*/
	background: radial-gradient(230px 50px, ellipse farthest-side, white, blue);

	/*Кроссбраузерность*/
	background-image: -moz-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
	background-image: -webkit-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
	background-image: -o-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
	background-image: -ms-radial-gradient(230px 50px, ellipse farthest-side, white, blue);	
}

Прозрачность цвета

div {
	/*Основной синтаксис*/
	background-image: linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);

	/*Кроссбраузерность*/
	background-image: -moz-linear-gradient(top,  rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -o-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -ms-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
}

Несколько цветов

div {
	/*Основной синтаксис*/
	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);

	/*Кроссбраузерность*/
	background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	
}

Повторяющийся градиент

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

div {
	/*Основной синтаксис*/
	background-image: repeating-radial-gradient(red, blue 20px, red 40px);

	/*Кроссбраузерность*/
	background-image: -moz-repeating-radial-gradient(red, blue 20px, red 40px);
	background-image: -webkit-repeating-radial-gradient(red, blue 20px, red 40px);
	background-image: -o-repeating-radial-gradient(red, blue 20px, red 40px);
	background-image: -ms-repeating-radial-gradient(red, blue 20px, red 40px);
}

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих -webkit-, -moz-, -ms- и -o-. Поэтому синтаксически правильным является вот такое описание градиента:

div {
    background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Chrome и Safari */
    background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Firefox */
    background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для IE 10+ */
    background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Opera */
    background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* стандартный синтаксис */
}

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

div {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

div {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Тест

Самое простое решение: скопируйте код и создайте HTML файл.

<h4>Линейный градиент</h4>
<p>Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.</p>
<section id="gradient-1">
<div class="gradient top">    
</div>
</section>

<h4>Диагональный градиент</h4>
<section id="gradient-1">
<div class="gradient diagonal">
</div>
</section>

<h4>Стоп позиция</h4>
<section id="gradient-1">
<div class="gradient color-stop">
</div>
</section>

<h4>Радиальный градиент</h4>
<p>Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет.</p>
<section id="gradient-2">
<div class="gradient radial">
</div>
</section>

<h4>Радиальный градиент до ближних сторон</h4>
<section id="gradient-2">
<div class="gradient radial-closest-side">
</div>
</section>

<h4>Радиальный градиент до дальних сторон</h4>
<section id="gradient-2">
<div class="gradient radial-farthest-side">
</div>
</section>

<h4>Прозрачность цвета</h4>
<section id="gradient-3">
<div class="gradient transparent">
</div>
</section>

<h4>Несколько цветов</h4>
<section id="gradient-3">
<div class="gradient multi-colors">
</div>
</section>

<h4>Повторяющийся градиент</h4>
<p>Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.</p>
<section id="gradient-4">
<div class="gradient repeating">
</div>
<</section>

<!-- Вставляем стили -->
<style>
#gradient-1 div.top {
    background-image: -webkit-linear-gradient(top, #FF5A00, #FFAE00);
    background-image: -moz-linear-gradient(top, #FF5A00, #FFAE00);
    background-image: -o-linear-gradient(top, #FF5A00, #FFAE00);
    background-image: -ms-linear-gradient(top, #FF5A00, #FFAE00);
    background-image: linear-gradient(top, #FF5A00, #FFAE00);    
}
#gradient-1 div.diagonal {
    background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
    background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
    background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
    background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
    background-image: linear-gradient(45deg, #ff5a00, #FFAE00);    
}
#gradient-1 div.color-stop {
    background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
    background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
    background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
    background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 50%);
    background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 50%);    
}
#gradient-2 div.radial {
    background-image: -webkit-radial-gradient(circle, #FFF, #FFAE00);
     background-image: -moz-radial-gradient(circle, #FFF, #FFAE00);
    background-image: -o-radial-gradient(circle, #FFF, #FFAE00);
    background-image: -ms-radial-gradient(circle, #FFF, #FFAE00);
    background-image: radial-gradient(circle, #FFF, #FFAE00);    
}
#gradient-2 div.radial-closest-side {
    background-image: -webkit-radial-gradient(230px 50px, ellipse closest-side, white, blue);
     background-image: -moz-radial-gradient(230px 50px, ellipse closest-side, white, blue);
    background-image: -o-radial-gradient(230px 50px, ellipse closest-side, white, blue);
    background-image: -ms-radial-gradient(230px 50px, ellipse closest-side, white, blue);
    background-image: radial-gradient(230px 50px, ellipse closest-side, white, blue);    
}
#gradient-2 div.radial-farthest-side {
    background-image: -webkit-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
     background-image: -moz-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
    background-image: -o-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
    background-image: -ms-radial-gradient(230px 50px, ellipse farthest-side, white, blue);
    background-image: radial-gradient(230px 50px, ellipse farthest-side, white, blue);    
}
#gradient-3 div.transparent {
    background-image: -moz-linear-gradient(top,  rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
    background-image: -webkit-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
    background-image: -o-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
    background-image: -ms-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
    background-image: linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
}
#gradient-3 div.multi-colors {
    background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
    background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
    background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
    background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
    background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
#gradient-4 div.repeating {
    background-image: -webkit-repeating-radial-gradient(red, blue 20px, red 40px);
    background-image: -moz-repeating-radial-gradient(red, blue 20px, red 40px);
    background-image: -o-repeating-radial-gradient(red, blue 20px, red 40px);
    background-image: -ms-repeating-radial-gradient(red, blue 20px, red 40px);
    background-image: repeating-radial-gradient(red, blue 20px, red 40px);
}
section {
    width: 558px;
    height: 200px;
        padding: 10px;
}
section div {
    width: 558px;
    height: 200px;
    border: 10px solid #f7f4f1;
        box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
section:target {
}
</style>

Статьи по теме

  1.

    Фотоальбом на чистом CSS3

    CSS3

  2. Выпадающие подписи для изображений

    jQuery

  3. Кнопка поставить лайк на CSS

    CSS3

  4. Анимированное взаимодействие с корзиной

    jQuery

Top

🔖 Выбор по тегам ×

HTML5 7 CSS3 135 jQuery 164 JS 45 SVG 11 Разное 18

💌 Написать сообщение ×

Все поля обязательны для заполнения!