webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクションからのCSS継承について話しましょう。

-webkit-box-reflectは非常に興味深いプロパティで、要素によって最初に描画されたコンテンツを鏡のように反映する機能を CSS に提供します。

前回これを書いたときは、互換性が非常に悪かったです。しかし、今日では、まだ非標準の構文ではあるものの、互換性は大幅に向上しており、これを使用することで、多くの興味深い効果を実現できます。

2021-02-19現在、互換性は91.02%に達しています。CANIUSE -webkit-box-reflectをご覧ください。

次に本文を入力します。

-webkit-box-reflect基本的な使い方

-webkit-box-reflectの構文は非常にシンプルです。最も基本的な使用法は次のようになります。

div {
    -webkit-box-reflect: 以下;
}

その中で、belowはbelow | above | left | rightとなり、下、上、左、右を表し、つまり4つの方向から選択できます。

次のような図があるとします。

<div></div>

div {
    背景画像: url('https://images.pokemontcg.io/xy2/12_hires.png');
} 

右側の反射である-webkit-box-reflect: rightを追加します。

div {
    背景画像: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: 右;
}

効果は次のようになり、要素の右側に鏡像要素が生成されます。

反射距離を設定する

方向の後に、反射と元の要素間の距離を示す特定の数値を追加することもできます。

div {
    背景画像: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: 右 10px;
}

10pxを追加すると、反射と元の要素の間に10pxギャップができます。

反映現実を設定する

もう一つの非常に重要な機能は、方向の背後にグラデーション値を設定できることです。 このグラデーション値を使用することで、非常に重要な反射のぼかし効果を実現できます。

div {
    背景画像: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: 2px 以下 linear-gradient(transparent, rgba(0, 0, 0, .5));
}

効果を見てください。仮想と現実の変化の後、反射のように見えます。

実際、ここでのグラデーションは、反射画像に MASK 属性を追加することです。MASK 属性のtransparent部分は画像を透明にし、単色部分は元の画像のままにします。

CSS MASK属性について質問がある場合は、この記事を読むことをお勧めします：素晴らしいCSS MASK

CodePen デモ -- -webkit-box-reflect デモ

-webkit-box-reflect を使用すると、興味深いアニメーション効果が得られます。

基本的な文法を習得したら、それを使用していくつかの興味深いアニメーション効果を実現できます。以下に簡単に説明します。

この属性は、一部のダーク スタイルのページでの使用に特に適していることがわかりました。多くのダイナミックエフェクトをより高度に見せることができます。 （個人的な美的感覚）

ボタンで-webkit-box-reflect使用する

動的な境界アニメーションを備えたいくつかのボタンと組み合わせると、非常に SF 的な効果を作成できます。

興味があれば、ソースコードを確認してください:

CodePen デモ -webkit-box-reflect ネオンボタンホバー効果

テキストで-webkit-box-reflect使用する

暗いタイトル テキストでは、 -webkit-box-reflectを使用すると、すぐに見た目がよりエレガントになります。

CodePen デモ - フォント & -webkit-box-reflect

3D で-webkit-box-reflect使用する

さて、次に、 -webkit-box-reflect 3D 効果に適用することもできます。これにより、まったく異なる視聴体験が得られます。

3D フォトウォールに反射効果を追加します。

CodePen デモ - 3DView & -webkit-box-reflect

-webkit-box-reflect で芸術的なパターンを作成する

興味深い CSS アートがまた登場です。

袁川教授によるこの記事「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-ラップ4 {
    背景： 
        放射状グラデーション(0 0の円、#000 30%、透明30%、透明40%、#000 40%、#000 50%、透明50%)、
        放射状グラデーション(円 100% 100%、#000 10%、透明 10%、透明 30%、#000 30%、#000 40%、透明 40%);
} 

次に、入れ子人形のレイヤーが 4 つあります。まず、反射レイヤー-webkit-box-reflect .g-wrap4に追加します。

.g-ラップ4 {
    -webkit-box-reflect: 右 0px;
}

得る：

人形の入れ子構造を続けて、反射レイヤー-webkit-box-reflect .g-wrap3に追加します。

.g-ラップ4 {
    -webkit-box-reflect: 右 0px;
}
.g-wrap3 {
    -webkit-box-reflect: 0px以下;
} 

続けて、反射レイヤー-webkit-box-reflect .g-wrap2に追加します。

.g-ラップ4 {
    -webkit-box-reflect: 右 0px;
}
.g-wrap3 {
    -webkit-box-reflect: 0px以下;
}
.g-ラップ2 {
    -webkit-box-reflect: 左 0px;
} 

最後に、反射レイヤー-webkit-box-reflect .g-wrap1に追加します。

.g-ラップ4 {
    -webkit-box-reflect: 右 0px;
}
.g-wrap3 {
    -webkit-box-reflect: 0px以下;
}
.g-ラップ2 {
    -webkit-box-reflect: 左 0px;
}
.g-ラップ1 {
    -webkit-box-reflect: 0px以上;
}

4 層の反射を経て得られた図が得られます。

このように、さまざまな基本グラフィックと想像力を活用することで、さまざまな切り絵の対称グラフィックを生成できます。

完全なコードについては、ここをクリックしてください: CodePen デモ -- -webkit-box-reflect artist

やっと

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。この記事ではwebkit-box-reflectの興味深い使い方をいくつか紹介します。ビジネスではあまり実用的ではないかもしれませんが、非常に興味深いです。

webkit-box-reflect を使って様々なアニメーション効果を実現する方法についての記事はこれで終わりです (まとめ)。webkit-box-reflect に関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。