Градиентная заливка в CSS3. Заливка элемента от точки наведения курсора Css заливка
Описание
Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Синтаксис
background-color: <цвет> | transparent | inherit
Значения
transparent Устанавливает прозрачный фон. inherit Наследует значение родителя.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.
Рис. 1. Применение background-color
Объектная модель
document.getElementById("elementID ").style.backgroundColor
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
- В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.
-
Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.
-
Используйте другие свойства для настройки градиента. С ним можно сделать больше, чем кажется.
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
background : linear-gradient (# 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- Добавьте прозрачность к цвету. В этом случае он будет постепенно затухать. Чтобы добиться эффекта затухания, используйте один и тот же цвет. Чтобы задать цвет, понадобится функция rgba() . Последнее значение определит прозрачность: 0 - непрозрачный цвет и 1 - прозрачный цвет.
background : linear-gradient (to right , rgba (147 , 184 , 116 , 0 ), rgba (147 , 184 , 116 , 1 ));
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
Найдите заголовок «html». Он должен быть в верхней части документа.
Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода.
background : linear-gradient (направление / угол , цвет1 , цвет2 , цвет3 и так далее );
Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (#93B874 , #C9DCB9 ); background : -o- linear-gradient (#93B874 , #C9DCB9 ); background : -moz- linear-gradient (#93B874 , #C9DCB9 ); background : linear-gradient (#93B874 , #C9DCB9 ); background-color : #93B874 ; }
Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:
< html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; } style > head > < body > body > html >
Поддержка градиентной заливки средствами 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(
Рекомендуется заводить отдельную папку для всех изображений и указывать абсолютный путь к файлу, т.е. от корневой папки. Это улучшит структуру вашего сайта и избавит от проблем в случае, если Вы решите поменять расположение самого 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
Служит для явного указания наследования свойств от родительского элемента.