с текстом Announcements. И наконец, к нижней части последнего элемента боковой панели — в данном случае это маркированный список — добавляется изображение нижней части свитка. И заголовок, и маркированный список находятся внутри div
контейнера боковой панели, и располагаются в верх
ней части
Во
втором приеме используется содержимое, сгене
рированное с помощью CSS (см. раздел «Различные свойства» в приложении 1). Генерируемое содер
жимое является способом добавления содержи
мого до и (или) после элемента. Можно добавить текст, но можно также добавить и изображение.
Сгенерированное содержимое помещается над эле
ментом, поэтому в примере свитка можно добавить верхнюю часть свитка к псевдоклассу
:before
, а ниж
нюю часть свитка — к псевдоклассу
:after
:
.sidebar {
background: url(scrollMiddle.jpg) center top repeat-y;
}
.sidebar:before {
content: url(scrollTop.jpg);
}
.sidebar:after {
content: url(scrollBottom.jpg);
}
Для перемещения изображений, чтобы они не нахо
дились в верхней или в нижней части элемента, нужно изучить использование абсолютного позициониро
вания, что позволит перемещать сгенерированный контекст. Более подробно вопрос абсолютного пози
ционирования рассмотрен в гл. 15.
Введенное в CSS3 применение нескольких фоновых изображений допускает любое количество таких изо
бражений. При использовании сгенерированного содер
жимого вы ограничены всего лишь тремя изображе
ниями: фоном элемента и его псевдоклассами before и after
. Метод сгенерированного содержимого будет задействован в обучающем уроке этой главы.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙИспользование градиентных фоновГрадиенты — плавный переход цвета от синего к красному или от черного с белому, входят в состав основных элементов любой программы редактирования изображений.
Создание тонких переходов от одного схожего цвета к другому придает изображению своеобразную расплывчатость. Apple использует градиенты при изображении кнопок и других элементов пользовательского интерфейса своего программного обеспечения
OS X и iPhone. Раньше для создания огромного файла с градиентом для последу- ющего применения приходилось использовать программу Photoshop. Теперь задачу создания градиента можно возложить на браузер.
В CSS3 поддерживаются фоновые градиенты, представляющие собой фоновые изображения, создаваемые веб-браузером на лету. Фактически для создания гра- диента применяется обычное свойство background-image
. Существует несколько типов градиентов на выбор.
Линейные градиентыСамым простым является линейный градиент. Он распространяется по прямой от одного конца элемента к другому, демонстрируя плавный переход от одного цвета
274 Часть 2. Применение CSS
к другому (рис. 8.13). Нужно только указать его начало (край элемента), начальный и конечный цвет. Например, для создания градиента, который начинается с черно- го цвета с левого края элемента и плавно переходит в белый цвет на противополож- ном
правом краю элемента, нужно указать следующий код:
background-image: linear-gradient(left,black,white);
Рис. 8.13. Линейные градиенты позволяют отказаться от устаревшего метода добавления градиентов к фону элемента: создание градиента в виде графического изображения в Photoshop или Fireworks с последующим использованием свойства background-image для помещения этого графического изображения в качестве фона элемента
ПРИМЕЧАНИЕ
Как уже упоминалось во врезке «Информация для новичков. Префиксы производителей» в разделе
«Создание скругленных углов» гл. 7, для фоновых изображений можно просто воспользоваться значением linear-gradient( ). Для его нормальной работы большинству браузеров требуется указание префикса производителя, например -webkit-linear-gradient.
Градиент можно создать, используя одно из цветовых значений CSS, например ключевые слова вида white или black
, шестнадцатеричные значения вида
#000000
,
RGB-значения вида rgb(0,0,0)
и т. д. Для указания стартовой позиции можно при- менить ключевые слова left
, right
, top или bottom
. Фактически, если нужен гради- ент, изменяющий фоновый цвет элемента по диагонали, ключевые слова можно комбинировать. Например, чтобы нарисовать градиент, изменяющий цвет от бе- лого к черному от верхнего левого угла к нижнему правому углу, нужно восполь- зоваться следующим кодом:
background-image: linear-gradient(top left,black,white);
Но вы не ограничены применением ключевых слов. Можно задать угол, опре- деляющий направление градиента. Углы записываются в диапазоне от 0 до 360, а за ними указывается ключевое слово deg
:
0deg
(рис. 8.14). Для получения нужно- го эффекта следует воспользоваться методом проб и ошибок, но все это работает примерно следующим образом:
0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании
45deg он начинается в нижнем
Глава 8. Добавление графики на веб-страницы
275левом углу и перемещается под углом 45° в верхний правый угол. Например, для градиента, созданного в нижнем левом изображении на рис. 8.13, используется следующее объявление:
background-image: linear-gradient(45deg, rgb(0,0,0), rgb(204,204,204));
Рис. 8.14. Значение в градусах, указанное для линейного градиента,
используется для создания линии, проходящей через середину воображаемой точки центра элемента.
Градиент рисуется вдоль этой линии. Значение определяет как точку старта, так и наклон градиента
При абсолютно квадратном элементе значение
45deg представляет нижний ле- вый угол и приводит к тому же самому результату, что и использование ключево- го слова bottom left
. То есть этот код:
background-image: linear-gradient(45deg, rgb(0,0,0), rgb(204,204,204));
аналогичен этому:
background-image: linear-gradient(bottom left, rgb(0,0,0), rgb(204,204,204));
276 Часть 2. Применение CSS
Но если изображение имеет прямоугольную форму, эти два объявления не при- ведут к созданию одинаковых градиентов. Причина в том, что браузер проводит воображаемую линию через центр элемента. Указанный угол является углом на- клона этой линии. Например, в широком прямоугольном элементе в нижней части рис. 8.14 линия, нарисованная под углом 45° через центр, не проходит из нижнего левого в верхний правый угол элемента. Она проходит где-то между левой и сред- ней частью нижнего края элемента в точку между средней и правой частью его верхнего края.
Цветовые опорные точкиВ рассматриваемых выше градиентах использовалось только два цвета, но их мож- но добавить любое количество. Дополнительные цвета называются цветовыми опорными точками и позволяют фону осуществлять плавный переход от одного цвета ко второму, затем от второго к третьему и т. д., пока градиент не будет завер- шен последним цветом. Для задания цветовых опорных точек нужно просто доба- вить к градиенту дополнительные цветовые значения. Например, нижнее изобра- жение справа на рис. 8.13 состоит из трех цветов и градиент переходит от белого к черному и от черного к белому цвету:
background-image: linear-gradient(left, black, white, black);
Разумеется, можно использовать любые цветовые значения (выраженные клю- чевыми словами, шестнадцатеричными числами или схемой RGB) и даже переме- шивать их друг с другом, следовательно, предыдущую строку кода можно даже записать следующим образом:
background-image: linear-gradient(left, black, rgb(255,255,255), #FFFFFF,
HSL(0,0,0%));
Веб-браузеры распределяют цвета равномерно, поэтому в данном примере в са- мой крайней левой точке фон черный, в середине фон белый, а в самой крайней правой точке он снова черный. Но можно разместить разные цветовые опорные точки и в более конкретно указанных местах фона, добавив после цвета второе значение.
СОВЕТ
Если добавить к элементу с градиентным фоном свойство background-position, можно получить весьма необычные эффекты. По сути, можно изменить то, что браузером рассматривается в качес- тве стартовой точки градиента.
Попробуйте и посмотрите, что получится.
Предположим, например, что нужно получить в начале градиента темно-крас- ный цвет, затем быстро перейти к ярко-оранжевому примерно на 10 % длины элемента, оставляя оранжевый цвет на большей части элемента, а затем быстро вернуться к темно-красному цвету, как в верхнем изображении на рис. 8.15 (ко- нечно, в книге черно-белое изображение, но общий смысл понятен). Для этого нужно использовать четыре цветовые опорные точки — красную, оранжевую,
Глава 8. Добавление графики на веб-страницы
277
оранжевую и красную, и указать где должны располагаться две оранжевые опор- ные точки:
background-image: linear-gradient(left, #900, #FC0 10%, #FC0 90%, #900);
Рис. 8.15. Градиенты с разными значениями опорных точек
Обратите внимание на то, что значение 10 % применяется ко второму цвету
(оранжевому): тем самым браузеру сообщается, что он должен достичь этого цвета к 10 % длины элемента. Точно так же значение 90 % показывает, что браузеру нуж- но оставить оранжевый цвет до достижения 90 % длины элемента, а затем присту- пить к плавному переходу к темно-красному цвету на правом краю элемента.
278 Часть 2. Применение CSS
ПРИМЕЧАНИЕ
Для указания позиций цветовых опорных точек не обязательно задавать проценты. Можно также использовать пикселы или em. Но указание процентных значений является более гибким решением, приспосабливающимся к изменениям ширины и высоты элемента. Одним из исключений является рассматриваемый далее повторяющийся линейный градиент. При создании этого типа плиточных градиентов очень хорошо подойдут пиксельные значения.
Как для первого, так и для последнего цвета не нужно указывать какие-либо значения положения, поскольку браузер предполагает, что первый цвет начинает- ся с 0 %, а последний заканчивается на 100 %. Но если нужно сохранять начальный цвет неизменным на некоторой протяженности элемента, можно после первого цвета указать значение этой протяженности. Например, нижнее изображение на рис. 8.15 создано с помощью следующего объявления:
background-image: linear-gradient(left, #900 20%, #FC0 30%, #FC0 70%, #900 80%);
Обратите внимание, что у первого цвета —
#900
— также есть позиция 20 %. Это означает, что первые 20 % протяженности элемента (слева направо) будут иметь фон из сплошного красного цвета. Затем, от 20%- до 30%-ной точки градиент плав- но перейдет от красного к оранжевому цвету.
Префиксы производителей и поддержка Internet ExplorerКак уже упоминалось во врезке «Информация для новичков. Префиксы произво- дителей» в гл. 7, многие из новейших CSS-свойств требуют указания перед именем свойства префикса производителя:
-webkit- для Chrome и Safari,
-moz- для Firefox и
-o- для Opera. Это же требование распространяется и на градиенты. К сожале- нию, при этом приходится создавать объявление для каждого браузера. То есть, чтобы заставить работать с различными
браузерами показанный ранее простой градиент, нужно создать следующий код:
background-image: -webkit-linear-gradient(left,black,white);
background-image: -moz-linear-gradient(left,black,white);
background-image: -o-linear-gradient(left,black,white);
background-image: linear-gradient(left,black,white);
Это увеличивает объем работы в четыре раза. Что еще хуже, градиенты не под- держиваются в Internet Explorer 9 и более ранних версиях. Если выбирать исполь- зование градиентов, для Internet Explorer 9 и более ранних версий нужно приме- нять резервный цвет. Подберите сплошной цвет, соответствующий общему тону вашего градиента, и объявите его первым, а за ним разместите все объявления гра- диентов:
background-color: #FC0;
background-image: -webkit-linear-gradient(left, #900, #FC0, #900);
background-image: -moz-linear-gradient(left, #900, #FC0, #900);
background-image: -o-linear-gradient(left, #900, #FC0, #900);
background-image: linear-gradient(left, #900, #FC0, #900);
Глава 8. Добавление графики на веб-страницы
279Internet Explorer 9 применит фоновый цвет и пропустит все остальные, непонят- ные ему объявления. Другие браузеры применят фоновый цвет, но также создадут градиент, который накроет фоновый цвет. Если используются RGBA-цвета с неко- торой степенью прозрачности, то вам не захочется, чтобы сквозь них просматривал- ся фоновый цвет. В таком случае примените сокращенную форму записи свойства background
, и свойство background-color будет отменено (благодаря особому поведе- нию сокращенной формы записи свойства background
, рассмотренной в разделе «Со- кращенный вариант свойства background» данной главы). Тогда для объявления цвета в формате RGBA можно будет воспользоваться следующим кодом:
background-color: #FC0;
background: -webkit-linear-gradient(left, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5));
background: -moz-linear-gradient(left, rgba(153,0,0,.5),
#FC0,rgba(153,0,0,.5));
background: -o-linear-gradient(left, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5));
background: linear-gradient(left, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5));
ПРИМЕЧАНИЕ
Как видите, для создания градиентов используется большой объем кода. Кроме того, устаревшие версии WebKit (браузеры Safari на операционных системах Mac и iOS, а также браузер Android) используют для линейных градиентов совершенно другой синтаксис. Поэтому вполне вероятно, что вам захочется воспользоваться рассматриваемым чуть позже интерактивным средством создания градиентов. Оно в целом позволит существенно упростить процесс создания градиентов.
Повторяющиеся линейные градиентыОбычно линейный градиент заполняет весь элемент с первого цвета с одного края элемента до последнего цвета с его противоположного края. Но при желании вы- полнить шаблонные градиенты можно создать их повторяющийся вариант. По сути, при этом определяется градиент с указанными опорными точками,
браузер рисует градиент, а затем повторяет этот шаблон, распространяя его в виде плиток по фону элемента. Например, чтобы получить повторяющийся градиент, как в изображе- нии, показанном слева на рис. 8.16, можно написать следующий код:
background-image: repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,
#900 40px)
В подобных случаях для опорных точек лучше всего подойдут пиксельные зна- чения. Получается, что браузер рисует градиент, начинающийся в нижнем левом углу с 20 пикселов темно-красного цвета, после этого до 30 пикселов происходит переход к оранжевому цвету, а затем до 40 пикселов выполняется обратный пере- ход к темно-красному цвету. После того как этот градиент будет нарисован, браузер просто выкладывает его в виде плитки в фоне элемента.
ПРИМЕЧАНИЕ
Для экспериментов с градиентами имеются широчайшие возможности. Чтобы посмотреть толь- ко лишь на малую часть тех удивительных результатов, которых можно достичь в ходе таких экспериментов, посетите галереи шаблонов CSS3 по адресам http://lea.verou.me/css3patterns/,
280 Часть 2. Применение CSS
www.standardista.com/cssgradients/ и оцените удивительные возможности использования гра- диентов для создания флагов со всего мира по адресу www.standardista.com/CSS3gradients/
flags.html.
Рис. 8.16. Используя повторяющиеся линейные градиенты CSS3, можно создать полосатые шаблоны
Можно также применять повторяющиеся градиенты для создания однотонных полос без каких-либо излишеств и переходов между цветами. Например, изобра- жение, показанное справа на рис. 8.16, создано с помощью следующего объявле- ния:
background-image: repeating-linear-gradient(45deg, #900 0, #900 10px, #FC0 10px, #FC0 20px);
Оно начинается с темно-красного цвета (
#900
) в точке
0
и переходит снова к крас- ному цвету в точке
10px
. Поскольку переход задается между одинаковыми цветами, браузер рисует его в виде сплошного цвета. Затем на 10 пикселах задается переход к оранжевому цвету (
#FC0
). Поскольку это та же самая точка, в
которой заканчива- ется красный цвет, никакого плавного перехода не происходит, шаблон не содержит перехода от красного к оранжевому цвету. И наконец, переход к такому же оранже- вому цвету осуществляется до 20 пикселов, что создает еще одну сплошную линию.
Поскольку это повторяющийся линейный градиент, браузер просто заполняет шаб- лоном фон элемента.
А теперь плохие новости. Повторяющиеся градиенты работают в большинстве браузеров, но только не в старых версиях Safari (до 5.1 или iOS 5) или в Internet
Explorer 9 и более ранних версиях. Поэтому желательно сделать запасной вариант фонового цвета; нужно также обеспечить добавление всех объявлений с префик- сами производителей, чтобы первый повторяющийся градиент принял следующий вид:
background-color: #FC0;
background: -webkit-repeating-linear-gradient(bottom left, #900 20px, #FC0 30px, #900 40px)
background: -moz-repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,
#900 40px)
Глава 8. Добавление графики на веб-страницы
281background: -o-repeating-linear-gradient(bottom left, #900 20px, #FC0 30px,
#900 40px)
background: repeating-linear-gradient(bottom left, #900 20px, #FC0 30px, #900 40px)
Радиальные градиентыВ CSS также есть способ создания радиальных градиентов, то есть градиентов, рас- ходящихся наружу по круговой или эллиптической схеме (рис. 8.17). Синтаксис похож на тот, который применяется для линейных градиентов, нужно только пре- доставить начальный цвет (цвет в середине градиента) и конечный цвет (цвет в кон- це градиента). Например, левое изображение слева на рис. 8.17 выполнено с помо- щью следующего кода:
background-image: radial-gradient(red, blue);
Рис. 8.17. Радиальные градиенты бывают эллиптические (верхнее изображение слева) или круговые (верхнее изображение справа). Позицией градиента в фоне элемента, а также его размерами можно управлять
Он
создает эллиптическую форму, помещающуюся в высоту и ширину элемен- та с центром градиента (где начинается красный цвет) в центре элемента.
Можно также создать круговые градиенты, добавив перед указанием цветов ключевое слово circle
. Например, верхнее изображение справа на рис. 8.17 созда- но с помощью следующего кода: background-image: radial-gradient(circle, red, blue);
Обычно браузер рисует центр радиального градиента в центре элемента, но центр градиента можно позиционировать с помощью таких же ключевых слов позицио- нирования и значений, которые используются для свойства background-position
Скачать 20.28 Mb.