素晴らしいビンテージ写真を作成するための7つのCSS画像効果

ソース： CSS Image Effects

 

この短いCSSチュートリアルでは、オンライン画像に適用できる本当にクールで簡単なCSS画像効果を作成する方法を紹介します。ここで紹介する画像効果は、写真家が写真を現像するときに使用する最も一般的な写真効果です。

私が説明するCSS画像効果は次のとおりです。

  1. 古い紙のオーバーレイ
  2. 黒と白
  3. セピア
  4. 暖かい色
  5. 冷たい色
  6. 緑の色合い
  7. マゼンタティント

Photoshop、Lightroomなどのツール、またはMockoFunなどのオンラインツールとそれらの素晴らしいビンテージフォトエディターを使用して写真を編集できますが、Webページに画像を配置してフィルターを適用するだけでよい場合は、クールなCSS画像効果を作成する方法を次に示します。

 

css画像効果

注： CSS効果で画像を使用する場合の1つの欠点は、効果が適用された画像がGoogleに表示されないことです。このチュートリアルでは、以下の画像は、元の画像に適用されたCSS画像効果のスクリーンショットです。これらは実際のCSS効果ではありません。ライブエフェクトを見てみたい、または遊んでみたい場合は、このCodePenを確認してください。

https://codepen.io/inegoita/pen/bGVXqam

CSSを使用したCSS画像効果 filter

filterあなたは、コントラスト、明るさを調整するなどの画像調整を行う必要があるときにCSSプロパティは、Webページ内の画像の彩度など、非常に便利なツールです。

filterCSSで使用できる値のリストを次に示します。

  • blur 画像にぼかしを追加するため
  • brightness 画像を明るくまたは暗くするため
  • contrast 画像のコントラストを調整する
  • drop-shadow の代わりとして使用 box-shadow
  • grayscale 画像をグレースケールに変換するため
  • hue-rotate 写真の色相値を調整する
  • invert 画像の色を反転します
  • opacity 画像の透明度を変更する
  • saturate 画像の彩度値を変更する
  • sepia 画像にセピア効果を適用する

これらのCSSフィルターは値を受け取ります（blurたとえば、パーセントまたはピクセル  ）。また、これらのフィルターの組み合わせを同じ画像要素（またはそのほかのHTML要素）に適用することもできます。

それでは、CSS filterプロパティの動作を見てみましょう！

CSS画像効果：元の写真

では、古いフォルクスワーゲンビートルの画像を見てみましょう

CSS画像効果

filterプロパティのさまざまな値を使用して、クールなCSS画像効果を適用してみましょう。

よりヴィンテージな効果を作成するために、我々はまた、この使用します古い質感をからヴィンテージ紙のテクスチャによって自由パックPhotoshopSupply。150を超えるさまざまなヴィンテージテクスチャのこの古い紙の背景コレクションをチェックすることもできます。

古いテクスチャCSS画像効果

 

CSS画像効果：ビンテージオーバーレイ

CSS画像効果ヴィンテージ

HTMLコード：

<div class="old-paper">
<img class="original-image" src="https://i.imgur.com/ouDwClz.jpg" />
<div class="overlay">
<img src="https://i.imgur.com/4rKVgAQ.png">
</div>
</div>

CSSコード：

.old-paper{
  position:relative;
  max-width:850px;
}

.original-image{
  width:100%;
  height:100%;
  display:inline-block;
}
.overlay{
  mix-blend-mode:multiply;
  position:absolute;
  display:inline-block;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.overlay img{
  width:100%;
  height:100%;
}

このビンテージイメージエフェクトでは、元のイメージの上に古い紙のテクスチャを追加し、をに設定し  mix-blend-modeましたmultiply。Photoshopの描画モードに慣れている場合、これは非常に簡単に理解できます。

そうでない場合、ブレンドモードの簡単な説明は、2つの画像間の色に数学計算を適用できることです。各ピクセルの色を、0、1（0、0、0は黒、1、1、1は白）の赤、緑、青の値として想像する必要があります。この場合multiply、各ピクセルの色成分が乗算され、結果は表示されるピクセルの色になります。

次のCSS画像効果では、まったく同じコードを使用しますが、さらに、元の画像に異なるフィルターを適用します。

続けましょう。

CSS画像効果：白黒

CSS画像効果白黒ヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.black-and-white{
  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);
}

.black-and-white元の画像にCSSクラス名を追加すると、白黒の効果が追加されます。CSSコードを調べると、フィルター値のシーケンスを確認できます。

  • brightness(70%) 画像の明るさを元の70％に暗くします
  • contrast(150%) 画像のコントラストを50％上げる
  • saturate(0%) これは元の画像の色を完全に彩度を下げます
  • brightness(150%) 画像の明るさを結果の50％引き上げます

ことを覚えておいてください  filterプロパティの値は、1つのフィルタの入力は、前のフィルタの出力であることを意味し、順番に適用されます。

次に、セピアフィルター効果の設定を見てみましょう。

CSS画像効果：セピア

CSS画像効果セピアヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.sepia{
  filter:filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);
}

sepiaCSSには  フィルターが組み込まれていますが、結果は少し退屈なので、いくつか調整することにしました。

画像の彩度を下げて白黒にし、セピアフィルターを適用し、コントラストを50％増やしてから、結果の画像の彩度を50％増やします。

結果にはかなり満足しています。画像によっては結果が異なる場合があるので、必要な結果が得られるまで設定を試してください。

CSS画像効果：暖色

CSS画像効果暖かい色ヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image warm" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.sepia{
  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}

温かみのあるカラー画像効果は、写真をより魅力的にするために写真家がよく使用します。画像を「暖かく」するには、色を赤、オレンジ、黄色にシフトする必要があります。

これにはいくつかの実験が必要かもしれませんが、この場合私にとってうまくいったのはsepiaフィルターとフィルターの  組み合わせでしたhue-rotate。

sepiaフィルターが何をするかを見てきました  。いかが  hue-rotateですか？

hue-rotate画像のすべての色の色相をシフトします。しかし、なぜ値が度単位なのですか？

カラーホイールを想像してみてください（実際には、想像しないでください。ここにあります）。

カラーホイール

を使用  hue-rotateすると、カラーホイールで1つの色をx度ずつ押すことができます。360度は完全に回転します。つまり、まったく変化しません。このプロパティの値はネガティブでも機能し、たとえば-90は270に相当します。

CSS画像効果：冷たい色

CSS画像効果冷たい色ヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image cold" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.cold{
  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);
}

冷たい色は、青とシアンに向かっています。暖色系のCSS効果との違いは、セピア色がすでに暖色系の領域にあったことです。そのため、この問題を克服するために、最初にを使用  hue-rotateして180シフトしてからsepiaフィルターを適用し  ます。

これにより、セピア効果（温かみのある色調）が補色（カラーホイールの反対側の色と呼ばれます）に置き換えられます。つまり、  hue-rotate最後にもう一度180ずつ行うと、色が元の色相に戻り、さらに逆セピア効果によってすべてが青くなるため、より冷たくなります。

よろしくお願いします！

そうでない場合は、下にコメントを入力してください。折り返しご連絡いたします。

画像エフェクトについて説明します。

CSS画像効果：緑の色合い

CSS画像効果緑の色合いヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.tint-green{
  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);
}

色理論では、色合いは、純粋な白を追加する色を指します。写真の色合いとは、写真のすべての色に特定の色を少し加えることです。

このティントイメージエフェクトでは、ウォーム/コールドカラーエフェクトと同じ原理を使用して、元のイメージにグリーンティントを追加しました。

いくつかの実験の後、私はhue-rotateフィルターで使用される30度のオフセットを思いつきました  。これは、セピアフィルターの黄色の色相と適用する緑の色合いの間の距離に関係しています。

CSS画像効果：マゼンタの色合い

CSS画像効果マゼンタ色合いヴィンテージ

HTMLコード：

<div class="old-paper">
    <img class="original-image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>

CSSコード：

.tint-magenta{
  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);
}

緑の色合い効果と同じ考えですが、今回はの値が270度です  hue-rotate。

クレジット