CSSレンズフレアを写真に追加して、明るいタッチ-CSSチュートリアル-php.cn

CSSレンズフレアを写真に追加して、明るいタッチ

JJエイブラムスの映画の忠実なファンは、映画の絶妙なプロット、印象的な対話、象徴的なモーフィングレンズフレアに感銘を受けなければなりません。エイブラムスなどの映画製作者は、レンズフレアを巧みに使用して、映画に「手作りの」リアリズムのタッチを追加します。このトリックは、Photoshopなどのツールに簡単にコピーされ、ラスター画像としてWebサイトに追加されます。

しかし、画像編集ツールを使用せずに同じレンズフレア効果を達成したい場合はどうでしょうか？ギャラリーの画像、背景写真、またはユーザーアバターに映画のテクスチャを追加するCSSレンズフレアを作成できます。

写真にはさまざまな種類のレンズフレアがあります。私たちが扱っているのは、カメラの開口部のように形作られたレンズ表面から光が入り、反射する小さなスポットを離れる小さな斑点を離れるアーティファクトと呼ばれる現象です。

以下は、私たちが作ろうとしているレンズフレアの優れた例です。当然、JJエイブラムスの映画からの静止画から直接取られています。

上のレンズフレアにはいくつかの部分が含まれています。私たちが目指していることを知っているように、それらをリストしましょう。

中央の光源は、光の明るいボールとして表示されます。
いくつかの水平楕円形の光線があります。歪んでぼやけた光は、細長い楕円形を形成します。
ランダムな光は、中央の光源から異なる角度で放出されます。

HALOコンポーネントに対応する下のHTML要素から始めましょう。中央の光源と、対角線から逸脱する2つの円形のハロー、3つの水平レンズフレア、3つの円錐線のようなハローがあります。

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

ログイン後にコピー

最後に、レンズフレアを画像に真に重ねるためには、その中央の光源を調整可能にする必要があります。このようにして、顔と重複することなく、信頼できる既存の光源に写真上に配置できます。

CSSレンズフレアの背景と光源

CSSレンズフレアの黒い背景と中心光源から始めましょう。ネットワーク上のほとんどの勾配は、固体遷移を備えた線形勾配ですが、アルファチャネルを適用できます。実際には、明るい効果を生成する良い方法です。半透明の色の複数の層を備えた円形ラジアル勾配は、良いカメラセンター効果を与えてくれます。

背景：放射状勾配（
  中央の最も近い側の円、
  HSL（4 5％100％ / 100％）0％、
  HSL（4 5％100％ / 100％）15％、
  HSL（4 10％70％ / 70％）30％、
  HSL（4 0％50％ / 30％）55％、
  HSL（4 0％10％ / 5％）75％、
  透明99％
）;
フィルター：Blur（4px）;

ログイン後にコピー

HSL構文に興味がありますか？それは新しいものであり、すべてのCSS色関数のアルファ透明性を定義する将来の方向のようです。

ここでは、CSSブルーフィルターを使用して、グラデーションを散乱した光層のように見せていることに注意してください。

円形のハローを追加する方法がわかったので、光源の後ろに大きく拡散したハローを追加し、中央の45度の角度で3つの追加のハローを追加して、効果をより現実的に見せます。

水平方向のライトストライプをセットします

水平ハローから始めましょう。私たちはいくつかのオプションをとることができ、非常に細い楕円形の勾配がそれを行う最も簡単な方法です。しかし、水平レンズフレアは通常、私の参照写真ほど対称ではないことに気づいたので、レンズフレアも少し非対称であることを望みます。

幸いなことに、ラジアル勾配にはCSSにオプションの位置パラメーターがあります。同じ水平ハローのわずかに異なるサイズの2つの左半分を作成し、わずかに異なる色を使用できます。また、不透明度フィルターを追加して、水平ハローが中心に接続されている領域をあまり突然にすることもできません。

背景：放射状勾配（
  中央の最も近い側の円、
  透明50％、
  HSL（4 10％70％ / 40％）90％、
  透明100％
）;
フィルター：Blur（5px）;

ログイン後にコピー

ちなみに、ビューポートの4分の3の4分の3の完全な楕円形のベースハローを追加して、別の「現実」を追加しましょう。

拡散光線を作成します

ラジアルハローと水平ハローを使用すると、残っているのは光源から放出される傾斜した光だけです。余分な楕円ラジアル勾配を追加してから、コンテナを傾けて翻訳して近似を取得できます。しかし、この仕事の準備が整ったCSS勾配、つまりテーパーグラデーションもあります。以下は、コンテナの右下隅から5度離れた7度のテーパー勾配を提供する例を示します。

背景：conic勾配（
  0％100％の5Degから、
  透明な0DEG、
  HSL（4 10％70％ / 30％）7DEG、
  透明な15Deg
）;
変換オリジン：左下;
変換：回転（-45deg）;

ログイン後にコピー

さまざまな半透明の色のグラデーション角度で、ハローの中心を中心としたテーパーグラデーションを追加します。テーパー勾配はその容器divの角度を示すことができるため、光源をその原点として使用して回転させ、オフセット拡散光フィルター効果をもたらします。

CSSカスタムプロパティを使用して、より柔軟なレンズフレアを作成します

これまでのところ、固定された位置にあるレスポンシブだが静的に配置されたレンズフレア効果を作成しました。周囲の水平ハローと円錐形のハローを破壊することなく、レンズフレアの中心を調整することは困難です。

CSSレンズフレアを調整可能と脆弱性の低下の両方にするために、光源の位置、サイズ、および色相を一連のカスタムプロパティを介して露出させます。

 ：根 {
   -  hue：4;
   - レンズセンターサイズ：40％;
   - レンズスプレッドサイズ：80％;
   - レンズ左：55％;
   - レンズトップ：15％;
}

ログイン後にコピー

ちなみに、ハロートーンと水平ハローの高さも調整します。水平ハロー幅の場合、CSS変数を使用して個別に調整可能にします。

 .Left-flare {
  幅：var（ - 左flare-width、var（ - レンズ左、50％））;
}

ログイン後にコピー

これは、写真の背景と上向きの動くレンズフレアを使用して行われたCSSレンズフレア効果で、光源の位置を信頼できるようにします。先に進んで、自分の写真を追加して、さまざまな環境でどのように機能するかを確認してください！

他のCSSおよび非CSSレンズフレアの例

もちろん、これはCSSレンズフレアを作成する1つの方法にすぎません。このアプローチは、ハローとその部分の色、サイズ、位置が柔軟であるため、このアプローチが好きです。これにより、多くの環境で使用できる再利用可能なコンポーネントのようになります。

キース・グラントには、CSSのリニア勾配とカスタムプロパティを使用する例があります。次に、HSLA値をランダム化するために、そこにいくつかのJavaScriptを追加します。

ニコラスのゲストには、CSSレンズフレアもあります。これは、::前に:: :: .flare要素の擬似要素の後にボックスシャドウを適用して効果を得ることに加えて、ホバリング時にハローをマウスに追いかけるための少しのjqueryを適用します。

これはキャンバスで作られています。これは、ホバリング時に光源がマウスにどのように従うかを巧みに示し、光源の位置が変化するにつれてレンズフレアアーティファクトがどのように変化するかを示します。

ここで同じ考え：

また、GSAP、キャンバス、Js.Lensflareと呼ばれるライブラリを使用する興味深い例もあります。

CSSレンズフレアエフェクトをどのように処理しますか？コメントであなたの考えを共有してください！

以上がCSSレンズフレアを写真に追加して、明るいタッチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。