Отражение текста на чистом CSS
Бывает так, что дизайнеру хочется применить эффект отражения текста или другого объекта для создания симпатичных декоративных эффектов.
И сегодня хочется показать странные свойства с префиксами -webkit- и -moz-которые могут отразить текст или другие объекты, но за счет совершенно разных технологий.
-webkit-box-reflect
Свойство -webkit-box-reflect создает отражение прямо рядом или под элементом
Опции
- Направление задается с помощью ключевых слов
above,below,left,right - Сдвиг указывается в любых единицах измерения
- Маску можно применить для эффектов затухания
Самое простое отражение:
-webkit-box-reflect: below 0;
Отражение со сдвигом и прозрачностью
-webkit-box-reflect: below -0.5em linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7));
Живой пример на codepen:
See the pen (@Websitio) on CodePen.
Посмотрите актуальную поддержку -webkit-box-reflect на caniuse
-moz-element
-webkit-box-reflect поддерживается многими браузерами, но не Firefox. У этого браузера есть свой фокус для отражений и это -moz-element
-moz-element используется в составе свойств background или mask и указывает на id элемента, который нужно использовать, в качестве фона! Т.е. браузер берет указанный элемент и делает его фоном другого элемента или псевдоэлемента.
background: -moz-element(#shadow-image) no-repeat
При этом, элемент должен существовать на странице и иметь указанный id. Указание по классу, логично, не сработает, ведь может быть много элементов с одинаковым классом.
На момент написания статьи (10.2024), у меня не получилось использовать в псевдоэлементе id родителя. И пришлось сделать дополнительный вложенный span
Смотрите демо в Firefox
See the pen (@Websitio) on CodePen.