Отражение для любых картинок через SVG маску

Разместил: Apocalypse
30 июня 2016

Отличный пример того, как можно любой картинке придать отражение, используя SVG Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

svg.image { overflow: visible; max-width: 500px; }

1 2 3 4

svg.image { overflow: visible; max-width: 500px; }

  2#: HTML код картинки:

<svg class="image" viewBox="-320 -160 500 120"> <linearGradient id="g" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#fff" stop-opacity=".1"></stop> <stop offset="100%" stop-color="#fff" stop-opacity=".8"></stop> </linearGradient> <mask id="m" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#g)"></rect> </mask> <image id="img" x="-25%" y="-95px" width="500" height="120" preserveAspectRatio="xMidYMid slice" xlink:href="ССЫЛКА_НА_КАРТИНКУ"></image> <use xlink:href="#img" y="-50" transform="scale(1 -1)" mask="url(#m)"></use> </svg>

1 2 3 4 5 6 7 8 9 10 11

<svg class="image" viewBox="-320 -160 500 120"> <linearGradient id="g" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#fff" stop-opacity=".1"></stop> <stop offset="100%" stop-color="#fff" stop-opacity=".8"></stop> </linearGradient> <mask id="m" maskContentUnits="objectBoundingBox"> <rect width="1" height="1" fill="url(#g)"></rect> </mask> <image id="img" x="-25%" y="-95px" width="500" height="120" preserveAspectRatio="xMidYMid slice" xlink:href="ССЫЛКА_НА_КАРТИНКУ"></image> <use xlink:href="#img" y="-50" transform="scale(1 -1)" mask="url(#m)"></use> </svg>

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: MaskReflectionSVGКартинкиЛюбыхМаскаОтражение

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Пейзаж с Parallax эффектом на CSS3
• Предыдущая публикация Испуганная страница 404 на CSS3

Вам может также понравиться...

• Анимированный текст на SVG и CSS3

  Разместил: Apocalypse 3 июля 2016

  - Apocalypse 3 июля 2016

• Простые модальные окна с разными эффектами на CSS3, SVG и jQuery

  Разместил: Apocalypse 27 октября 2020

  - Apocalypse 27 октября 2020 Last modified 17 октября 2020

• Radial SVG Slider - Слайдер с радиальным эффектом на jQuery

  Разместил: Apocalypse 3 апреля 2017

  - Apocalypse 3 апреля 2017 Last modified 8 февраля 2018

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии