Автор

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

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

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


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

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


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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close