Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS

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

Кукурузные хлопья


Каскад и эффект наложения слоев Шон Инман очень любит сбалансированный
завтрак. Вооружившись коробкой кукурузных хлопьев, капелькой юмора и твердым желанием нарушить правила, Инман положил образы, навеянные утренней едой, в основу прелестной работы «Кукурузные хлопья» на тему здорового образа жизни. Насыщенный специальными эффектами, видимыми в современных браузерах, этот дизайн раздвигает границы, определяемые разметкой сайта CSS Zen Garden.
Поскольку очень многие до сих пор пользуются браузерами, не обеспечивающими пол-
ной поддержки CSS, то Инман позаботился о том, чтобы и в них страница выглядела прилично, но особо впечатляющие эффекты приберег для тех браузеров, которые в состоянии их отобразить.
То, что в большинстве веб-сайтов показалось бы спорным, для Zen Garden подходит как нельзя лучше, поскольку этот сайт всецело посвящен экспериментированию во благо прогресса.

Каскад

Меню и эффекты прозрачности, используемые в «Кукурузных хлопьях», видны только в браузерах с высоким уровнем поддержки спецификации CSS2, например в Firefox. Для выборочного применения этих возможностей необходимы CSS-фильтры, основанные, в частности, на тонкостях механизма каскадирования.
Что же понимается под каскадированием в каскадных таблицах стилей? Согласно W3C, «с помощью механизма каскадирования в CSS каждому правилу назначается определенный вес. Если применимо несколько правил, то приоритет отдается тому, у которого вес наибольший». Две взаимосвязанные концепции - специфичность и наследование - могут стать как вашими лучшими друзьями, так и самыми страшными
кошмарами... не обязательно именно в этом порядке.
CSS позволяет применять правила сразу к нескольким элементам. Не будь такого механизма, в таблицах стилей пришлось бы устанавливать взаимно-однозначное соответствие между правилами и элементами - это непрактично и громоздко.

Наследование

Существует возможность применить стиль к обобщенным элементам и наборам элементов, удовлетворяющих некоторому условию. Так, правило, заданное
для элементов h3, будет применяться ко всем элементам h3 на странице:

ЬЗ {
c o l o r : r e d;


Таким образом, все элементы h3 на странице будут отображаться красным цветом. Все просто. Но что, если надо отменить это правило для некоторых элементов?
Придется ввести дополнительный класс:

ЬЗ {
color: red;
h3.archives {
color: green;


Первое стилистическое правило окрашивает все элементы h3 в красный цвет, второе переопределяет его только для тех элементов, для которых указан класс a r c h i v e s.
Пока ничего особо сложного нет, но сделаем еще один шаг. При наличии следующей таблицы как будут выглядеть элементы h3 в разделе # l i n k L i s t ?

font: lem Verdana, sans-serif;
color: red;
}
h3.archives {
color: green;
>
SlinkList h3 {
font-size: 0.8em;


Они отображаются красным цветом и шрифтом Verdana размером 0 , 8 em (или стандарт - фотоным шрифтом без засечек, если Verdana отсутствует). Поскольку семейство шрифтов не переопределено в последнем правиле, то Verdana наследуется от определенного выше глобального правила для элементов h3; изменяется только размер. А в предположении, что рассматриваемый элемент h3 имеет класс a r c h i v e s , он будет окрашен в зеленый цвет.

Специфичность


В предыдущем примере продемонстрирована также концепция специфичности - последнему правилу назначен больший приоритет, чем первому. Поскольку в
нем задан еще и класс, то правило считается более специфичным и «весит» больше.
Если бы понятия специфичности не было, то возникла бы конкуренция между двумя правилами, ведь для элементов h3 в одном правиле определен размер 0 , 8 em, a
в другом - lem. Специфичность - это простой и надежный способ однозначно выявить победителя.
На первый взгляд, ничего сложного, но со специфичностью связаны некоторые проблемы. Вполне возможно создать чрезмерно специфичное правило, отменить которое можно будет, только задав еще более специфичное.

Рассмотрим пример:

body>html #header ul.navigation li.home a {
color: red;
}

Что произойдет, если вы захотите перекрасить ссылки, находящиеся в состоянии : hover, в синий цвет? Придется пойти еще дальше: продублировать и без того
длинный список селекторов и добавить к нему дополнительный селектор, выделяющий состояние : h o v e r :

body>html #header ul.navigation li.home
a:hover {
color: red;



Специфичность под контролем

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

(tlinkList ul li h3 {
color: red;
с таким:
#linkList h3 {
color: red;


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

Поиск ошибок, связанных со специфичностью

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

#linkList h3 {
border: solid 20px red;


Если у элемента h3 не оказывается рамки, сделайте селектор более специфичным. Если же рамка появляется, то уберите объявление b o r d e r из правила; ошибка, скорее всего, не связана со специфичностью.

Переопределение специфичности

В CSS встроена возможность переопределить специфичность для любого стилистического правила.
Объявление [important, применяемое на уровне отдельных атрибутов, гарантирует, что данное правило будет применено безусловно, какова бы ни была специфичность других селекторов в таблице стилей. Например:

ЬЗ {
color: red !important;
}
#linkList h3 {
color: blue;

Хотя второе правило более специфично для элементов h3, находящихся внутри раздела ttlinkList, они все равно будут отображаться красным цветом, так как
объявление ! i m p o r t a n t в первом правиле заставляет игнорировать уровень специфичности. Отметим, впрочем, что Microsoft Internet Explorer для Windows
не поддерживает конструкцию ! i m p o r t a n t , так что полагаться на это поведение в общем случае не стоит.
Однако отсутствие поддержки в Internet Explorer можно считать преимуществом при отладке CSS; использование объявления ! i m p o r t a n t с целью применения некоторых правил во всех браузерах, кроме Internet Explorer, — это одна из возможностей фильтрации. В примере выше рассматриваемые элементы
пЗ будут отображаться красным в таких браузерах, как Firefox, Opera и Safari, но синим в Internet Explorer.
Каскадирование активно используется в «Кукурузных хлопьях», чтобы компенсировать отсутствие определенных эффектов в некоторых браузерах. Ко всему прочему, Инман так отфильтровал стили, что в браузерах, которым недостает необходимой поддержки, и только в них, появляется нахальное сообщение, пред-
лагающее загрузить современный браузер и насмехающееся над Internet Explorer.

Слои

Сообщение, видное только в Internet Explorer, и прочие элементы страницы позиционированы абсолютно. Чтобы избежать перекрытия, пришлось предпринять некоторые меры.
Для управления порядком размещения вдоль оси z в CSS применяется атрибут z - index. Так как абсолютно позиционированные элементы исключаются из
нормального потока документа, то стандарт - фотоного метода управления перекрытием часто оказывается недостаточно. Не будь свойства z-index, позиционированные элементы выстраивались бы снизу вверх:
тот элемент, который следует в HTML-разметке первым, оказался бы внизу стека, а последующие элементы - поверх него.
Свойство z - index дает дизайнеру возможность управлять размещением вдоль оси z так, как он считает нужным. Допустимы произвольные неотрицательные
целые значения (начиная с 0). Вот пример:

#linkList h3 {
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
#linkList ul {
position: absolute;
top: 50px;
left: 50px;
z-index: 20;


Если элементы ul и h3 окажутся в одном и том же месте страницы, то u l будет отображаться поверх пЗ вне зависимости от места в HTML-разметке, так как
значение z - index для него больше.

Интеграция


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




css








css 30
css 30

Добавить статью в:
0



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



Поиск

***

Онлайн
Всего на сайте: 24
Гостей: 12
Пользователи: ilasubbotin58Bep
Роботы: crawl Bot, robot Bot, MSN Bot, Yandex Bot, robot Bot, Google Bot, robot Bot, robot Bot, Google Bot, robot Bot, Yahoo Bot

20-ка посетителей: ilasubbotin58Bep, GahCoorashouh, AgnesAccony, zrEquigue, 1979.abkadyrovrdeBep, anisimovartem189Bep, Briaxx56nAvant, deEquigue, SilvioKt, lpImpaigN, ysuplidenisBep, taAnipse, lzzywjcehscg, Melvinvor, anri22fatiBep, cymxvdppmdn, bvthoumb, OpelpTara, sera232guiBep, lwgzygqiyces


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги