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

зеркалирование 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 браузерах, я думаю, полезно.



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

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

  1. Игроман говорит:

    Обалденно, только из-за отсутствия поддержки никакой пользы нет.

    • Гилязетдинов Руслан говорит:

      ну возможно в ближайшее время появится поддержка) хотя идея родилась в 2008 😉

  2. Уведомление: Как получить много поискового трафика не по теме?. SEO, SMO, контекст, партнерки, блоги, флейм

  3. Уведомление: Зеркалирование изображения с помощью CSS3 | Grabr

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *