葉を通る夕方の日光をろ過すると、穏やかで暖かい輝きが生じます。アーティストは、この「ちょっとした光」を巧みに使用して、柔らかく魅惑的な効果を達(dá)成します。この魅惑的な外観をWebデザインで複製し、寫真やイラストに適用することで、そうでなければ一般的なコンテンツに新しい命を吹き込みます。このチュートリアルでは、CSSベースのシンプルなアプローチを示しています。

コードに飛び込む前に、ちなさんの光の構(gòu)成を理解することが重要です。それは、葉によって投げかけられた影が散りばめられた大きな、円形または楕円形の光パッチで構(gòu)成されています。これらの影は、しばしば柔らかくぼやけた縁を示します。これは、光が遠(yuǎn)くから影を落とすときに、多數(shù)の、あまり定義されていない空間を通過し、光を拡散および歪めた結(jié)果です。

普通の白い壁と、ちょっとした光によって照らされたものの違いを観察してください：[例示的な比較はここにあります]

このチュートリアルは、テキスト（文字、記號、絵文字）を使用して効果を再現(xiàn)し、CSSシャドウを活用し、自然の蕓術(shù)性を模倣するためにブレンドします。代替方法も検討されます。

ステージを設(shè)定します

軽いパッチを表すために、文字、記號、絵文字などのテキスト要素を使用します。これらは、シャープなコントラストではなく、柔らかく拡散した効果を目指して、淡く半透明の色になります。楕円形または長方形の文字は理想的で、気が散った光のさまざまな形を反映しています。実験は、望ましい美學(xué)を達(dá)成するための鍵です。この例では、楕円形で傾斜したフォームには？、、\を使用します。

これらの文字は、 .backdrop親要素內(nèi)の段落に包まれています。

<div class="backdrop">
  <p class="shapes">？</p>
  <p class="shapes">？</p>
  <p class="shapes">\</p>
</div>

.backdropは、光と影が投影される表面として機(jī)能します。テクスチャに背景畫像を使用し、明示的な幅と高さを持ち、 overflow: hidden 。 CSSグリッドは光要素を中心にします。

 .backdrop {
  背景：センター /カバーノーリピートURL（ 'image.jpeg'）;
  幅：400px;高さ：240px;
  オーバーフロー：隠し;
  ディスプレイ：グリッド;
}
.backdrop> * {
  グリッドエリア：1/1;
}

形狀の正確なアライメントは重要ではありません。重複するだけで十分です。ユニークな分解された光パターンのポジショニングを自由に調(diào)整してください。

CSSを使用して、ちょっとした光をスタイリングします

絵文字の重要なCSSプロパティは、透明な色、半透明の黒い背景（ rgba()を使用）、ぼやけた白いテキストシャドウ、大きなフォントサイズ、およびスムージング用のmix-blend-modeです。

 .shapes {
  色：透明;
  背景色：RGBA（0、0、0、0.3）;
  テキストシャドウ：0 0 40px #fff;
  フォント：Bolder 320pt/320pt Monospace;
  ミックスブレンドモード：乗算。
}

mix-blend-mode: multiply要素の色を容器とブレンドし、暗い色を維持しながら背景が明るい色を介して表示できるようにし、より自然なまだらにされた光効果をもたらします。

色とコントラストの精製

背景畫像の明るさを高めるために、 filter: brightness(1.6)が適用されます。または、 background-blend-mode複數(shù)の背景をブレンドできます。絵文字は、以下に示すように、背景畫像としても使用できます。

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ？
    </div>
  </foreignobject></svg>

カスタム畫像形狀の場合、CSS blur()フィルターを使用してソフトな光効果のエッジをぼかします。 @supports 、ブラウザ固有のシャドウ調(diào)整に使用できます。

最初の例を再検討して、コンテンツを追加しましょう。

<div class="backdrop">
  <p class="shapes">？</p>
  <p class="shapes">？</p>
  <p class="shapes">\</p>
</div>


  
  夏休みのトップ10の観光スポット



  これが最も人気のある場所です...

.backdropと.shapesスタイルは同じままです。 .content isolation: isolate新しいスタッキングコンテキストを作成し、まだらにされた光効果とのブレンドを防ぎます。

光源をアニメーション化します

@keyframes on .backdrop:hover ：を使用して微妙なアニメーションが追加されます。

 .backdrop：hover> .shapes：nth-??of-type（1）{
  アニメーション：2s容易な無限の代替移動(dòng)。
}
.backdrop：hover> .shapes：nth-??of-type（2）：hover {
  アニメーション：4S容易な無限の代替MOVE-1。
}

@keyframes move {
  {text -indent：-20px; }
  {text-indent：20px; }
}
@keyframes move-1 {
  {text -indent：-60px; }
  {text-indent：40px; }
}

text-indentアニメーションは、微妙な動(dòng)きを作成し、雲(yún)の移行をシミュレートし、光の方向を変えます。

結(jié)論

このチュートリアルでは、CSSを使用して、自然と蕓術(shù)からインスピレーションを得て、CSSを使用して気さくの光効果を作成する方法を示しています。重要なのは、光と影のために光と半透明の背景にぼやけたテキストシャドウを使用して、テキスト要素に色を適用することにあります。十分なコントラストを備えたテクスチャの背景が効果を完了します。

以上が穏やかなCSSは軽い光効果を抑えましたの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。