XBL aTrueShadows

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

В сети по этому поводу кое-что есть. Есть классическая статья на ALA, а вот буквально недавно наткнулся у Daria еще на одну. Но, честно говоря, все они меня не восхитили:

• Коряво. Там либо используется куча лишних структурных элементов в HTML, либо они добавляются скриптом. Первое я страшно не люблю (CSS придумывался, чтобы убрать оформительский мусор, помните?) А второе, хоть и лучше со структурной точки зрения, но имеет другой минус: скрипт срабатывает только по загрузке окна, а до тех пор теней нет. Коряво.

• Само важное: все эти способы не универсальны. Либо надо знать размеры элемента, либо он должен быть статически позиционирован и ему не должна быть задана явная ширина, либо у него должно не быть padding'ов и т.д.

И вот последние пару ночей я реализовывал свою давнюю идею: универсальные, беспроблемные, почти настоящие тени.

И мне удалось. Встречайте: XBL aTrueShadows!

Сразу, возможно, огорчу многих тем, что я изначально рассчитывал только на Gecko-браузеры. Не из-за религиозных соображений, а потому что они обладают технологией XBL. Вкратце - XBL позволяет в стилях привязать к любому элементу файлик, и в нем определить любую дополнительную внутреннюю структуру элемента, а также его функциональность. Именно это я использовал вместо JavaScript'а для создания вспомогательных блоков для теней, и в результате тени применяются к элементам мгновенно, а не после загрузки всей страницы. Кроме того, есть и еще плюсы.

Однако! Адаптировать все это под, скажем, Оперу вполне возможно: перенести создание структуры и инициализацию тени из XBL в Javascript. Еще одну ключевую технологию - computedStyle - Опера, кажется, успешно поддерживает. Однако, сам я это делать вряд ли буду (лень, время - обычный набор причин), а вот если кто-то из знатоков Оперы возьмется, готов разъяснить возможные неясности.

В итоге, вот, что у меня вышло. Получилась вполне себе симпатичная библиотека с такими характеристиками:

• Тень отлично выглядит: растягивается под любой размер блока, прозрачная, по всем краям, где надо, размытая.
• Работает практически для любых блоков: абсолютных, статических, float'ов, с заданными размерами и незаданными размерами, padding'ами, margin'ами и border'ами.
• Нормально реагирует на динамическое изменение контента и изменение размера шрифтов.
• Размер картинок копеечный (641 байт).
• В HTML отсутствуют лишние элементы, всё генерируется динамически и применяется мгновенно.
• Исключительно просто подключается: нужно подключить один CSS-файл и либо назначить class="shadow" элементам, которым хочется дать тень, либо назначить их по любому другому признаку в своем CSS'е.
• Абсолютно бесплатно :-)

Из недостатков:

• Упомяну еще раз: только Gecko.
• Тень только прямоугольная, то есть если у вас из блока выпирает буквой "Г" какая-нибудь подвешенная абсолютно загогулина, то тени от нее буквой "Г" не будет. Именно из-за этого я назвал тени "aTrueShadows", что означает "Almost" True Shadows :-).
• Если вы зачем-то назначили позиционирующие стили простому элементу <div>, то скорее всего все "поедет". Впрочем, это в любом случае плохая идея.
• Не работает с таблицами. Пока, надеюсь... Чтобы положить сделать тень таблице, придется завернуть ее в какой-нибудь <div>.
• Как обычно, возможны баги.

Ну и напоследок просьба к дизайнерам. Присмотревшись к тени, вы увидите, что по краям там слегка не сходятся цвета. Это от того, что у меня не хватило то ли терпения, то ли навыков работы с GIMP'ом... Поэтому, если кто сподобится перерисовать картинки посимпатичней, присылайте, буду благодарен.