Автор

Взгляд на 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>
Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


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

Полноразмерный, адаптивный и простой в настройке слайдер.


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

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close