Совсем недавно я писал о том, что в самое ближайшее время постараюсь рассказать о замечательно свойстве CSS3
box-reflect
. Зеркалирование — это достаточно изящный трюк, который прост в применении и очень эффектно смотрится. Есть несколько вариантов с помощью которых можно получить зеркальное изображение. Первый и самый простой — это редактирование изображения в графическом редакторе. Есть так же возможность сделать зеркалирование с помощью JavaScript или CANVAS. Но ребята из WebKit решили реализовать свою собственную идею — зеркалирование с помощью чистого CSS.
CSS для Webkit
Свойство -webkit-box-reflect
обрабатывает параметры в следующем порядке:
-webkit-box-reflect:
/* направление above|below|left|right */
/* значение в пикселях - начало отступа от изображения */
/* прозрачные маски CSS3 */
Простой пример использования этого свойства будет выглядеть примерно так:
.reflectBelow {
-webkit-box-reflect: below 0
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
Немного необычный CSS код, но работает отлично. В данном коде используется линейный градиент, начало которого в левом верхнем углу, конец в левом нижнем, от прозрачного к белому, с показом половины изображения (0.5).
Посмотреть демо
WebKit впервые в 2008 году реализовали поддержку зеркалирования с помощью CSS. Насколько мне известно, на данный момент ни один из браузеров кроме webkit (chrome, safari) не поддерживает свойство CSS reflect
. Использовать это свойство в своих проектах или нет — решать вам. Но знать о том, что данное свойство существует и работает в webkit браузерах, я думаю, полезно.
Обалденно, только из-за отсутствия поддержки никакой пользы нет.
ну возможно в ближайшее время появится поддержка) хотя идея родилась в 2008 😉