Зеркалирование изображения с помощью CSS3

Совсем недавно я писал о том, что в самое ближайшее время постараюсь рассказать о замечательно свойстве 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 браузерах, я думаю, полезно.