Отражение! Крутые эффекты с помощью -webkit-box-reflect

-webkit-box-reflect — это очень интересное свойство, которое дает CSS возможность действовать как зеркало, отражая то, на чем изначально были нарисованы наши элементы.

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

По состоянию на 2022-08-07 его совместимость достигла 93.48%, посмотрите на CANIUSE-webkit-box-reflect:

Что такое -webkit-box-reflect.

Синтаксис -webkit-box-reflect очень прост, самое базовое использование выглядит следующим образом:

div {
    -webkit-box-reflect: below;
}

Среди них below может быть ниже | above | left | right означает низ, верх, лево, право, то есть, есть 4 направления на выбор.

Предположим, у нас есть следующее изображение:

<div></div>

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
}

Добавьте -webkit-box-reflect: right, который является отражением справа:

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

Эффект заключается в следующем, создавая зеркально отраженный элемент справа от элемента:

Установите расстояние отражения

После направления можно также указать конкретное числовое значение для обозначения расстояния между отражением и исходным элементом.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right 10px;
}

После добавления 10px отражение будет отделено от исходного элемента на 10px:

Установите градиент отражения

Существует также очень важная функция — за азимутом вы также можете установить значение градиента. Используя значение градиента, вы можете добиться эффекта размытия отражения, что очень важно.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

Посмотрите на эффект, после изменения виртуального и реального, он больше похож на отражение.

На самом деле, градиент здесь — это добавление атрибута MASK к отраженному изображению. В части transparent атрибута MASK изображение станет прозрачным, а часть сплошного цвета останется оригинальным изображением.

CodePen Demo — -webkit-box-reflect Demo

Использование -webkit-box-reflect для достижения интересной анимации

После освоения базового синтаксиса мы можем использовать его для достижения некоторых интересных динамических эффектов, которые кратко перечислены ниже.

Я обнаружил, что это свойство особенно полезно на некоторых страницах в темном стиле. С его помощью многие динамические эффекты выглядят намного выше. (Личная эстетика)

Использование -webkit-box-reflect в кнопках

При использовании некоторых кнопок с динамической анимацией границ, это может создать очень фантастический эффект:

Если вам интересно, вы можете порыться в исходном коде, чтобы понять:

CodePen demo -webkit-box-reflect Neon Button Hover Effect

Использование -webkit-box-reflect в текстовых эффектах

В более темной обстановке использование -webkit-box-reflect делает весь эффект намного более совершенным.

Демонстрация CodePen — Шрифт & -webkit-box-reflect

Использование -webkit-box-reflect в 3D эффектах

Далее мы можем даже применить -webkit-box-reflect к 3D-эффекту, чтобы создать совершенно другие впечатления от просмотра.

Давайте добавим эффект отражения к 3D фотостене:

CodePen demo — 3DView & -webkit-box-reflect

Используйте -webkit-box-reflect для создания художественных узоров

Интересное искусство CSS, вот и снова оно.

В этой статье господина Yuan Chuan -Chinese Window Lattice And CSS, рассказывается об использовании -webkit -box-reflect для создания художественных узоров.

Поскольку -webkit-box-reflect может генерировать отражения, мы можем использовать его для выполнения непрерывной вложенности матрешек, слой за слоем, тогда нам нужно только генерировать базовый элемент, и мы можем использовать отражения для получения различных эффектов.

Предположим, у нас есть следующая структура:

<div class="g-wrap1">
    <div class="g-wrap2">
        <div class="g-wrap3">
            <div class="g-wrap4"></div>
        </div>
    </div>
</div>

Нам просто нужно реализовать граф для .g-wrap4, например:

.g-wrap4 {
    background:
        radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
        radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
}

Затем есть 4 уровня вложенности, сначала добавляем слой отражения к wrap4, через -webkit-box-reflect.

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}

мы можем получить:

Продолжить вложенность и добавить слой отражения к .g-wrap3:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}

Продолжаем вложение и добавляем отражение -webkit-box-reflect к .g-wrap2:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}

Наконец, добавьте отражение -webkit-box-reflect к .g-wrap1:

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}
.g-wrap1 {
    -webkit-box-reflect: above 0px;
}

Мы можем получить графику, полученную с помощью 4 слоев отражения:

Таким образом, используя различные базовые графики, мы можем с помощью своего воображения создавать разнообразные симметричные графики, вырезанные из бумаги:

Полный код можно найти здесь:

CodePen Demo — -webkit-box-reflect artist

Наконец

Больше замечательных технических статей по CSS собрано на моем Github — iCSS.

И, возможно, вам понравится мой CodePen, в котором собрано большое количество удивительных CSS эффектов.