Главная » Администрирование » Градиентная заливка в CSS3. Градиентная заливка в CSS3 CSS нам в помощь

Градиентная заливка в CSS3. Градиентная заливка в CSS3 CSS нам в помощь

Поддержка градиентной заливки средствами CSS была введена около двух лет назад в браузерах на движке Webkit(Google Chrome и Safari), но другие на то время не поддерживали это свойство, поэтому градиенты делали с использованием картинок. Теперь эта оплошность исправлена, Firefox 3.6+ в полной мере поддерживает градиентную заливку объектов, можно попробовать отказаться от картинок, где это возможно.

В прошлой статье о ни слова не было о градиентной заливке — сегодня исправим этот недочет и поговорим о ней. Тем более, тема очень хорошая.

В целом, все современные браузеры, включая IE9, поддерживают заливку. Используются вендорные префиксы, так как спецификация официально пока не принята. Полное руководство по градиентам в CSS3 можно почитать , там градиенты css3 разобраны досконально.

В этой статье немного поговорим про браузеры и особенности градиентов в них:

Градиенты в браузерах webkit

Синтаксис свойства довольно прост – первое значение это тип заливки, второе и третье соответственно начальная и конечная позиции, четвертое и пятое – начальный и конечный цвета.

Firefox 3.6+

Использование градиентов в Firefox

Тут используется несколько другой синтаксис, тип заливки указывается в названии свойства, есть только позиция начала градиента и аналогично цвет начала и конца заливки.

Internet Explorer

Этот браузер давно и заслуженно пользуется «любовью» верстальщиков за свое крайне оригинальное поведение. Вот и в данном случае используется фильтр, текст которого будет прочтен только браузером IE. Тут не поддерживается угловая и радиальная заливка, только горизонтальная или вертикальная, с использованием двух значений – startColorstr и endColorstr . Это нужно учитывать при работе, иначе результат в IE будет выглядеть очень печально, а процент этого браузера все еще достаточно велик.

Что же нужно для обеспечения кроссбраузерности этого свойства для объекта? Добавляем ему в свойства четыре строчки кода:

Background: #999; /* для браузеров без css3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* для IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* для webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* для firefox 3.6+ */

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

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

Введение

Если Вы еще не знаете как устанавливать фон на сайт, Вам будет полезно ознакомиться с данной статьей. Из нее Вы узнаете как установить картинку в виде фонового изображения, задать параметры для его отображения, либо просто залить фон определенным цветом.

CSS нам в помощь

Как Вы уже догадались, устанавливать фон мы будем с помощью добавления CSS стилей к html объекту. За отображение фона элемента отвечает универсальное свойство background. Если нужно добавить фон к одному определенному элементу, то добавляйте CSS свойства к его идентификатору или классу. Если для всего сайта, то к тегу body или идентификатору (классу) контейнера (обертки), если он перекрывает body. В данной статье в примерах мы будем работать с элементом body.

Заливка цветом

Начнем с самого простого - заливкой определенным цветом. Для этого нам понадобиться знать лишь код цвета и CSS свойство background-color.

Body { background-color: #000; /* Заливка фона черным цветом */ }

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

Если Вы применяете заливку фона для определенного элемента, например, для заголовка (h1-h6), параграфа (p) и др., то убедитесь, что цвет текста не будет сливаться с фоном и не потеряет читабельность. Используйте свойство color для изменения цвета текста.

P { background-color: #000; /* Заливка фона черным цветом */ color: #fff; /* Белый текст для черного фона */ }

Фоновое изображение

Фоновое изображение для элемента устанавливается при помощи свойства background-image, в котором в качестве значения используется путь к графическому файлу. Путь к файлу задается при помощи конструкции url(), где Это путь к графическому файлу. Если указать просто имя файла, например, url(background.png), то в данном случае изображение должно храниться в той же самой папке, что и css файл.

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

Body { background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ }

Если используется фоновое изображение, то рекомендуется одновременно с ним указывать цветовую заливку (свойством background-color). В данном случае, если изображение не загрузится (изображение не доступно по каким-либо причинам; у пользователя отключен показ картинок), либо загрузится с задержкой (картинка полностью загрузится позднее страницы), то будет показана фоновая заливка вместо изображения или пока оно не загрузится полностью.

Body { background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ background-color: #ab11cf; /* Заливка фона определенным цветом */ }

Данные два свойства из примера выше можно объединить в один, используя универсальное свойство background.

Body { background: #ab11cf url(/images/background.png); /* Цвет заливки и путь к фоновому изображению */ }

Свойство background

Универсальное свойство background позволяет задать все параметры отображения фонового изображения в одной строке. Рассмотрим доступные параметры.

Background: | inherit

Порядок следования значений может быть произвольным, а если какое-либо свойство не указано, то используется значение по умолчанию.

background-attachment

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

Body { background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ background-attachment: fixed; /* Изображение зафиксировано */ background-color: #ab11cf; /* Заливка фона определенным цветом */ }

Эквивалентно:

Body { background: #ab11cf url(/images/background.png) fixed; /* Цвет заливки и путь к зафиксированному фоновому изображению */ }

background-position

Если задано фоновое изображение, то данное свойство определяет его начальное положение. Имеет два значения, разделенные пробелом: положение по горизонтали и положение по вертикали. Значения можно задать при помощи ключевых слов: left right top bottom center. Порядок следования их не важен. Если же значения задаются в процентах, пикселях и т.п., то сначала указывается значение по горизонтали, а затем по вертикали. По умолчанию позиция устанавливается в левый верхний угол (left top).

background-repeat

Определяет способ повторения фонового изображения. Его можно повторять только по горизонтали (repeat-x), либо только по вертикали (repeat-y), либо одновременно по горизонтали и вертикали (repeat), либо без повторений вообще (no-repeat). По умолчанию устанавливается значение repeat.

inherit

Служит для явного указания наследования свойств от родительского элемента.

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

В качестве заливки и обводки можно задавать none , цвета , ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none , ключевые слова, цвета, паттерны и градиенты . Значение по умолчанию - black .

fill-rule

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

Возможные значения: nonzero , evenodd

Fill-rule="nonzero"

Fill-rule="evenodd"

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении - фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк , смотреть в FF).

stroke

Цвет обводки. Значения по умолчанию нет.

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt , round , square . Значение по умолчанию: butt .

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter , round , bevel . Значение по умолчанию: miter .

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

Используя обводку и простые фигуры можно получить удивительные вещи:

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

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

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Описание

Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.