Автор

23 03.2013
Взгляд на CSS3 градиент

Взгляд на CSS3 градиент


 

Градиент является прекрасным инструментом манипуляции с цветом в 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>Как говориться в классификации, градиенты в <strong>CSS3</strong> являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.</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>Радиальный градиент также как и линейный объявляется функцией, только уже <strong>radial-gradient()</strong>. Также есть и основные значения: это форма радиального градиента (<strong>circle</strong> — круг или <strong>ellipse</strong> — эллипс), начальный и конечный цвет.</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>Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, <strong>repeating-linear-gradient()</strong> — для линейного и <strong>repeating-radial-gradient()</strong> — для радиального.</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>

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


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

13 05.2017
Взгляд на CSS3 градиент

Ссылки для разбивки на страницы просто позволяют пользователям просматривать ваш контент. Действительной альтернативой является бесконечная прокрутка, хотя она имеет сильные и слабые стороны, о которых следует помнить.


02 04.2013
Взгляд на CSS3 градиент

На сайтах часто встречаются различные видео-файлы которые перенаправлены с крупных файловых менеджеров. С одной стороны это удобно, ведь вы экономите дисковое пространство на хостинге, но с другой стороны проигрыватель со стороннего сайта оставляет ссылки и рекламу на свой источник, тем самым вы бесплатно даете ему рекламу, это не совсем приятно. Но что делать, если хочется что-то собственное и пространства на хостинге хватает, тогда выход есть. Это создать самому уникальный проигрыватель, который станет узнаваем благодаря вашему ресурсу.


27 04.2013
Взгляд на CSS3 градиент

Если перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQueryThreesixty - достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.


04 06.2017
Взгляд на CSS3 градиент

Боковая навигация, которая позволяет пользователям легко просматривать страницу, выбирать один из разделов и плавно прокручивать ее. Это не обязательно заменяет основную навигацию по сайту, но пригодится для страниц, наполненных содержимым.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close