CSSチュートリアル

CSSで現実的な反射を作成します

Lisa Kudrow

Mar 13, 2025 am 11:43 AM

CSSで現実的な反射を作成します

デザインでは、反射はオブジェクトの様式化された鏡像です。彼らは影ほど人気がありませんが、彼らは彼らの瞬間を持っています - あなたがMS WordまたはPowerPointでさまざまなフォント形式を探索したときのことを考えてください：私は私はあなたの反射があなたの2番目によく使われたスタイルであり、シャドウの隣で、アウトラインやグローのような他の人を前述しました。あるいは、リフレクションがすべてがほぼすべてのことでそれらを使用したときの怒りだったときのことを覚えているかもしれません。

反射はまだクールです！そして、過去数年とは異なり、実際にCSSで反射をすることができます！この記事で作成するものは次のとおりです。

反射設計には2つのステップがあります。

元のデザインのコピーを作成します。
コピーのスタイル。

CSSで鏡像を取得する最も本物で標準化された方法は、Element（）プロパティを使用することです。しかし、この記事を書いている時点では、まだ実験段階にあり、Firefoxでのみサポートされています。あなたが興味があるなら、あなたは私がそれでその実験を書いたこの記事をチェックすることができます。

したがって、要素（）ではなく、同じデザインの2つを追加し、1つを私の例の反射として使用します。このパートをJavaScriptを使用して動的にするか、擬似要素を使用することもできますが、デモでは、デザインごとに一対の要素を使用しています。

 <div>
  <div> trinket </div>
  <div> trinket </div>
</div>

 .units> * {
  背景画像：url（ 'image.jpeg'）;
  バックグラウンドクリップ：テキスト;
  色：透明;
  / *など */
}

オリジナルのデザインは、背景画像、透明なテキストの色、およびそのテキスト値を持つバックグラウンドクリッププロパティの組み合わせから作成されたノックアウトテキストグラフィックです。

次に、ペアの下部要素を逆さまにして、変換を使用して元のデザインに近づけます。これは反省です：

 .units>：last-child {
  変換：rotatex（180deg）translatey（15px）; 
}

今では上向きになっている底部の要素は、いくつかのスタイルを取り、フェードやその他のグラフィック効果を反映します。上向きの要素上のマスク層として使用される線形勾配画像で、反射の段階的なフェードを実現できます。

 .units>：last-child {
  変換：rotatex（180deg）translatey（15px）; 
  マスクイメージ：線形勾配（透明50％、白い90％）;
}

デフォルトでは、マスクイメージプロパティのマスクモードはアルファです。つまり、画像の透明な部分は、画像が要素のマスク層として使用される場合、要素の対応する領域も透明にします。そのため、上部に透明なグラデーションを備えた線形勾配が、最後に逆さまの反射をフェードアウトします。

また、他のグラデーションスタイルを組み合わせることもなく試してみることもできます。たとえば、ストライプでこれを取り上げてください。以前からフェード効果とともにパターンを追加しました。

 .units>：last-child {
  / * ... */
  マスクイメージ： 
    繰り返し線形勾配（透明、透明な3px、白い3px、白い4px）、
    線形勾配（透明50％、白い90％）;
}

またはこれは放射状勾配を備えています：

 .units>：last-child {
  / * ... */
  マスクイメージ：放射状勾配（中央の円、白、透明50％）;
}

別のアイデアは、skew（）を変換プロパティに追加することにより、鏡像をモーフィングすることです。これにより、反射に何らかの動きが与えられます。

 .units>：last-child {
  / * ... */
  変換：rotatex（180deg）translatey（15px）skew（135deg）translatex（30px）;
}

微妙で影のように反射が必要な場合は、それをぼんやりとぼかし、明るくしたり、その不透明度を減らしたりすることができます。

 .units>：last-child {
  / * ... */
  フィルター：Blur（4px）明るさ（1.5）;
}

反射はそれ自体も影になることがあるので、背景画像（元のデザインから）またはテキストのブロック色を使用する代わりに、私は反射に、元のデザインに合う赤、青、緑色の一連の半透明の影を与えようとしました。

 .units>：last-child {
  / * ... */
  テキストシャドウ： 
    0 0 8px RGB（255 0 0 / .4）、
    -2PX -2PX 6PX RGB（0 255 0 / .4）、
    2px 2px 4px RGB（0 255 255 / .4）;
}

これらのRGB（）値は奇妙に見えますか？これは、いくつかのエキサイティングな新しいCSSカラー機能の一部である新しい構文です。

これらすべてのアプローチを1つの大きなデモでまとめましょう。