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

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

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

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

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

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

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

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

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

Комментарии: 6

  1. BOLK

    В IE есть фильтры, там другого не нужно. Правда, у них ограниченная область использования. Но есть и expression/вычисляемые свойства и behavior, так что можно сделать то же самое.

  2. Иван Сагалаев

    Не получится. Привязаться к элементу - это полдела. Самое главное - это то, что я сильно использую такую штуку, как computedStyle. А в IE ее, кажется, нет... Хотя, могу уже и ошибаться.

  3. BOLK

    В IE5 есть вычисляемые свойства и expression. Если не ошибаюсь, это то же самое, что и computedStyle

  4. Иван Сагалаев

    Нет, это совсем другое. Computed Style - это возможность взять у элемента текущие расчитанные для него значения свойств, заданных во всех правилах CSS. Например, есть такой HTML:

    <p>Пример <em>выделенного</em> текста</p>
    

    ... и такой CSS:

    p em {
      font-size:bigger;
    }
    

    ... то какой размер шрифта у "em" в итоге получится, зависит от ОС, дефолтов шрифта браузера, настроек пользователя и того, как браузер понимает "bigger". Вот computedStyle позволяет получить это конечное значение в абсолютных величинах (в пикселах).

  5. dennz78@gmail.com

    Двадцадь лет спустя :) Возможно вам будет интерестно - основной недостаток xbl (только gecko) был устранен вот этим проектом - http://code.google.com/p/xbl/

  6. Ivan Sagalaev

    Интересно, спасибо! Правда, для XBL уже, кажется, время прошло...

Добавить комментарий