Автор

Взгляд на 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

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

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


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

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


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close