CSS Reflect — привет из 90-х

30.06.2011

Добрый день! Сегодня снова поговорим о CSS3, а точнее о свойстве webkit-box-reflect, которое позволяет создавать отражения блока. Раньше я уже говорил о нем в статье «Экспериментальные свойства CSS3«, сейчас же хочу рассказать подробнее. Свойство имеет достаточно сложный функционал, но в тоже время, позволяет делать очень красивые вещи…
Итак, новое свойство браузера Webkit (пока поддерживается только браузерами на этом движке) — простое и сложное одновременно. Начнем, пожалуй, с самого начала.

Базовый синтаксис box-reflect

-webkit-box-reflect: below;

В приведенном выше примере направление отражения установлено вниз. В 98% случаев так и необходимо, однако, можно отражать блок в 4 направлениях:

-webkit-box-reflect: above;/*вверх*/
-webkit-box-reflect: below; /*вниз*/
-webkit-box-reflect: left;/*влево*/
-webkit-box-reflect: right;/*вправо*/

Какое бы направление вы ни выбрали — браузер будет брать сторону в оригинальном блоке, в которую направлено отражение и использовать ее как опорную точку. Например, отражение вправо будет выглядеть следующим образом:

Смещение отражения

Кроме направления, можно задать расстояние, на которое отражение будет отступать от основного блока:

-webkit-box-reflect: below 20px;


На картинке сравнение результатов без смещения и со смещением в 20px. Значение отступа можно указывать в любых единицах, принятых в CSS, будь то em, px или %.

Градиенты

Да, да, на отражение можно накладывать градиент, но сначала вспомним, как этот градиент создается:

-webkit-gradient(linear, left top, left bottom, from(transparent), to(white));

Этим кодом назначаем обычный линейный градиент, направление сверху вниз, от полной прозрачности до белого цвета. Теперь этот самый градиент наложим на отражение, которое делали раньше:

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white)); 


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

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white));


В этом примере опять работает синтаксис наложения градиента. Мы применяем градиент от прозрачности к белому, при этом указываем, что белый начинается на 50% изображения, а не так, как положено в линейном градиенте. Тем самым происходит фактическое «сжатие» , то есть тот градиент, который должен заливать 100% картинки, «ужимается» до 50%. Мне кажется, несколько путано объяснил, но если что будет непонятно — спрашивайте в комментариях, расскажу подробнее.

Использование прозрачности

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

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));


Что я сделал? Как некоторые знают и уж точно все догадываются ;), белый цвет можно задать цифровым значением(RGB). А в CSS3 появилась такая замечательная штука, как прозрачность или альфа-канал, которая является четвертым измерением цвета. По умолчанию, его значение 1, то есть абсолютно непрозрачный. Мы же указали значение 0,2, то есть 20% прозрачности и картинка преобразилась на глазах.

Наложение маски в виде изображения

Подходим к более сложным и интересным вещам. Будем накладывать на отражение маску, которая в свою очередь является другим изображением.

-webkit-box-reflect: below 0px url(shape.png);



Можно не применять сложные градиенты, а просто использовать маски в виде изображений. Принцип простой — вместо градиента, в данном случае, накладываем изображение, и отражение принимает его форму. Результат может приятно удивить, выше на примере показано, что можно сделать с помощью масок-изображений, а ниже я покажу еще более сложный пример, который реализовать с помощью градиентов CSS3 вряд ли получится:

Взаимодействие отражения с основным выводом страницы

Как отражение влияет на отступы и вывод основного контента?

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

Вот и все, что я хотел сказать о свойстве CSS3 box-reflect. Жаль, что поддерживается оно только браузерами на движке Webkit. Но, я думаю, не за горами поддержка другими производителями, было бы неплохо, применений можно найти очень много. Удачного вам дня, комментируйте, подписывайтесь на обновления и будьте в курсе обновлений

, ,

Комментариев: 9

  1. Vasiliy Aksyonov

    В FF есть возможность сделать аналог такого эффекта с помощью свойства -moz-element. Правда понадобится ещё один элемент (можно использовать псевдоэлемент)

    Ответить
  2. Ggghfhfhfhf

    Люблю CSS во многих случаях позволяют заменить javascript и даже Flash. Вот только осталось дождаться когда CSS3 начнет поддерживаться в полной мере всеми браузерами — и дело в шляпе:)

    Ответить
  3. akkad

    Сдела ли бы браузеры без глюков, а не фигню всякую лишнюю. Самое досадное — это не поддерживается нормальными браузерами, наверно только FF. Это свойства для одного браузера. Лучше их не использовать.

    Ответить
    • Виктор Милашечкин

      Поддерживается только Хромом и Сафари. FF пока не держит. 
      А насчет браузеров без глюков — их люди делают, поэтому проблемы были, есть и будут. 

      Ответить