Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

css отражение

Всем привет! Cегодня мы рассмотрим как реализовать эффект отражения используя средства css.

Допустим у нас есть некая картинка:

<img src="img/bg2.jpg"/>
Эффект отражения в css

И мы хотим чтобы она у нас отражалась. Для этого в css существует специальное свойство box-reflect. К сожалению на данный момент оно поддерживается только в браузерах webkit(google, opera и т.п.) Например в браузере Mazilla Firefox данное свойство не поддерживается.

Итак, для того чтобы сделать отражение нашей картинке нам достаточно прописать:

<style>
    .reflection    {
        -webkit-box-reflect: below 0px 
        -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
    }
</style>
<img class="reflection" src="img/bg2.jpg"/>

В результате чего внизу нашей картинки появится ее отражение.

Отражение картинки снизу вверх

Теперь давайте рассмотрим параметры в свойстве box-reflect:

- Первым параметром идет below благодаря ему отображение нашего отражения располагается в самом низу картинки здесь мы можем задавать и другие параметры(right и left)

- 0px - это расстояние между изображением и его отражением

-Третьим параметром у нас передается линейный градиент -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(1, transparent), to(white) Благодаря которому мы задаем направление отражения. Обратите внимание на функцию color-stop(0.5, transparent) здесь передаются два параметра. С помощью первого (0.5) мы указываем что отражение нашего изображения будет рассеиваться на половину. Если мы зададим 0, то у нас отразится полное изображение. Если передадим значение 1 то все отражение нашего изображения рассеется и мы в итоге ничего не увидим.

В общем поэкспериментируйте но помните что данное свойство поддерживается далеко не во всех браузерах.

На этом данная статья подошла к концу.

Желаю вам успехов и удачи! Пока!

Оцените статью

Еще статьи

клавиши js

scroll js

CSS перенос слов

GIT Config

Уведомления javascript

Генерация строк php

goto php

marquee html

clip path css

Комментарии

Антон

Перезвоните мне пожалуйста по номеру 8(953)367-35-45 Антон.

07:22 22-06-2019

История

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.