あなたがあなたのウェブサイトにますます多くの聴衆を引き付けるつもりであるならば、ウェブサイトの外観は非常に重要です。 したがって、Webサイトの全体的な外観を向上させるために、画像にグラフィック効果を追加したり、画像を反映したりすることを強くお勧めします。 CSSには、これらのタスクを簡単に実行できるさまざまなプロパティが用意されています。 この記事では、これらのプロパティについて詳しく説明しました。 この投稿では、次のことについて説明しました。
- CSSの画像フィルター
- CSSでの画像の反射
CSSの画像フィルター
不透明度、ぼやけ、彩度などのさまざまな特殊効果を画像に追加する目的で、CSSフィルタープロパティが使用されます。
構文
フィルタプロパティに関連付けられているさまざまなメソッドを以下に説明します。
| 価値 | 説明 |
|---|---|
| 無し | この値は効果を追加せず、デフォルト値です。 |
| ぼかし | 画像にぼやけを追加し、ピクセル単位で値をレンダリングします。 |
| 輝度 | 画像の明るさを増減し、パーセンテージで値を表示するために使用されます。 |
| 対比 | この値は画像のコントラストを調整し、値はパーセンテージで定義されます。 |
| グレースケール | 画像をグレースケール画像に変換し、パーセンテージで値を表示します。 |
| 色相-回転 | この値は、画像を回転させ、値を度単位でレンダリングするために使用されます。 |
| 反転 | 画像に存在するサンプルを反転し、値はパーセンテージで定義されます。 |
| 不透明度 | この値は、画像の透明度を調整し、0から1までの値を取ります。 |
| 飽和する | パーセンテージで値を取得することにより、画像を飽和させます。 |
| セピア | この値は、画像をセピアに変換し、パーセンテージで値を表示するために使用されます。 |
| 影を落とす | 画像にシャドウ効果を適用するために使用されます。 |
| url（） | これは、SVGフィルターを含むXMLドキュメントの場所を必要とし、特定のフィルター要素へのリンクをレンダリングする可能性がある関数です。 |
| イニシャル | この値は、プロパティに初期値を与えます。 |
| 継承する | この値は、祖先要素からfilterプロパティを継承します。 |
フィルタプロパティが示すことができるすべての値がわかったので、理解を深めるためにこれらの値を以下に示します。
まず第一に、基本的なHTMLを使用してWebページに画像を追加しましょう。
HTML
ここでは、タグを使用して画像を追加しただけです。
CSS
img {{
幅： 30％;
高さ： 自動;
}
現在、基本的なCSSを使用して、画像に幅と高さを与えています。
出力
画像がウェブページに追加されました。
次に、この画像にフィルターを適用して、フィルタープロパティが示すことができるさまざまな値を調べてみましょう。
ぼかし
ぼかし効果を2pxに設定しました。 ぼかし方法の値が大きいほど、ぼやけが増します。
.blur {{
フィルター： ぼかし（（2px）。;
}
出力
これはぼやけた画像です。
輝度
画像の明るさは0.50に設定されています。 値を小さくすると、明るさが低下し、その逆も同様です。
。輝度 {{
フィルター： 輝度（（0.50）。;
}
出力
画像の明るさは正常に調整されました。
対比
画像のコントラストを160％に設定しました。 コントラストを上げたい場合は、必要なだけ値を増やしてください。
。対比 {{
フィルター： 対比（（160％）。;
}
出力
非常に簡単に追加されたコントラスト効果。
グレースケール
グレースケール（）メソッドに値を与えて、画像の変化を見てみましょう。
.grayscale {{
フィルター： グレースケール（（100％）。;
}
出力
フィルタプロパティのgrayscale（）メソッドを使用して、カラー画像を白黒画像に変換しました。
色相-回転
hue-rotate（）メソッドに270度を割り当てています。 この方法は、基本的に、カラーサークルを中心に画像を回転させることによって画像を変更します。
.hue-rotate {{
フィルター： 色相-回転（（270度）。;
}
出力
これは、270度の色相回転の画像です。
反転
反転値は、画像を反転することにより、画像に特別な効果を追加します。 ここでは、画像を80％反転しています。
。反転 {{
フィルター： 反転（（80％）。;
}
出力
画像のサンプルが反転されています。
不透明度
画像を透明にするために、不透明度の値が使用されます。 以下では、画像の不透明度を0.4に調整しています。 不透明度の値が小さいほど、画像は透明になります。
.opacity {{
フィルター： 不透明度（（0.4）。;
}
出力
これは40％の透明度の画像です。
飽和する
彩度を追加するには、フィルタープロパティのsaturate（）メソッドを使用します。 値が大きいほど、画像の彩度が高くなります。
.saturate {{
フィルター： 飽和する（（4）。;
}
出力
彩度効果が画像に正常に追加されました。
セピア
画像にセピア効果を追加するために、以下のコードスニペットで50％を割り当てたように、画像に値を付けます。
。セピア {{
フィルター： セピア（（50％）。;
}
出力
セピア効果は正常に機能しています。
影を落とす
影を追加するには、ドロップシャドウ方式を使用しています。 影の長さは、画像の両側に割り当てられています。
。風邪 {{
フィルター： 影を落とす（（8px 8px 10px 赤）。;
}
出力
ドロップシャドウ効果が正常に追加されました。
フィルタプロパティについて詳しく学習したので、次に進んで、リフレクトプロパティとは何かを見てみましょう。
CSSでの画像の反射
画像を反映するために、CSSbox-reflectプロパティが使用されます。
構文
-webkit-box-reflect： 下 | 上記| 正しい | 左;
このプロパティをさまざまなブラウザで完全に機能させるには、プレフィックス「-webkit-」を付けて使用します。
ノート：Firefoxブラウザはbox-reflectプロパティをサポートしていません。
以下に、画像反射の概念を理解できるように、関連する例を使用してこれらの値のいくつかを示しました。
まず、Webページに画像を追加しましょう。
HTML
ここに画像を追加し、幅と高さを指定しました。
出力
Webページに画像が挿入されました。
下
box-reflectプロパティの「below」値を割り当てるだけで、元の画像の下に画像が反映されます。
img {{
-webkit-box-reflect： 下;
}
出力
画像は下に反映されています。
右
box-reflectプロパティの「正しい」値を調べてみましょう。
img {{
-webkit-box-reflect： 正しい;
}
出力
画像は右にうまく反射されました。
結論
Webサイトに表示される画像に特殊効果を追加する目的で、CSSフィルタープロパティが使用されます。 このプロパティが示すことができるさまざまなメソッドは次のとおりです。 grayscale（）、saturate（）、opacity（）、blur（）、brightness（）、hue-rotate（）など。特殊効果を追加するだけでなく、CSS box-reflectプロパティを使用して画像を右、左、上、または下。 この投稿では、関連する例を使用して、画像にフィルターや反射を追加する方法について詳しく説明します。
The post CSSの画像にフィルターと反射を追加する方法は？ appeared first on Gamingsym Japan.