Отражение при помощи CSS3

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

Благодаря новой спецификации CSS3 вам не придётся работать с двумя изображениями, вам достаточно будет всего лишь одного и парочки строк в файле стилей.
Отражение при помощи CSS3

Вы можете посмотреть нашу предыдущую статью, посвящённую этому свойству — Как создать отражение при помощи CSS3
Итак, вот так выглядит простое отражение на CSS3. Будьте внимательны эта функция работает только с Webkit.

    img {  
        -webkit-box-reflect: below 10px;  
    }   

В результате мы получим две картинки, где нижняя будет отражена по вертикали, причём между оригинальной и отражённой версией будет небольшой зазор в 10 пикселей.
Конечно же, такое полное дублирование нам не нужно, нам необходимо получить отражение, которое будет угасать,а для этого мы будем использовать градиент, который наложим поверх второго изображения как маску, которая скроет его концы.

    img {  
        -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));  
    }   

Причём как видно из описания, вы можете сами назначать точки останова цвета, тем самым проконтролировав размер угасания нижней картинки.
Что же делать с Mozilla Firefox. Существует некая альтернатива создания данного эффекта.
И так

<div id="moz-reflect">  
    <img src="images/your_image.jpg">  
</div>  

Стиль для идентификатора будет выглядеть так

    #moz-reflect:after {  
        content: "";  
        display: block;  
        background: -moz-element(#moz-reflect) no-repeat;  
        width: auto;  
        height: 375px;  
        margin-bottom: 100px;  
        -moz-transform: scaleY(-1);  
    }  

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



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

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