CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3フィルター機能を理解する

フィルタ関数は、コントラスト、明るさ、色相の回転、不透明度、画像などの要素に視覚効果を設定するために使用されます。ここで、いくつかのフィルタ関数を見てみましょう-

コントラスト

CSSで画像のコントラストを設定するには、フィルターのコントラスト（％）を使用します。値0は画像を黒くし、100％は元の画像とデフォルトを表すことを忘れないでください。残りは、任意の値を設定できますが、100％を超える値を使用すると、画像のコントラストが高くなります。

例

CSS3で画像のコントラストを調整する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

出力

CSS3フィルター機能を理解する

ドロップシャドウ

CSS3の画像にドロップシャドウを追加するには、フィルタープロパティのドロップシャドウ値を使用します。次の値があります-

h-シャドウ –水平シャドウのピクセル値を指定します。

v-shadow –垂直シャドウのピクセル値を指定します。負の値は、画像の上に影を配置します。

ぼかし –シャドウにぼかし効果を追加します。

拡散 -正の値ではシャドウが拡大し、負の値では縮小します。

色 –影に色を追加するには

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

出力

CSS3フィルター機能を理解する

セピア効果

CSS3を使用して画像にセピア効果を適用するには、フィルタープロパティにセピア値を使用します。コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

出力

CSS3フィルター機能を理解する


  1. CSS3線形および放射状グラデーションの使用

    グラデーションは、2つ以上の色の組み合わせを表示します。線形グラデーションは、2つ以上の色を上から下などの線形形式で配置するために使用されます。放射状のグラデーションが中央に表示されます。 以下は、CSS3での線形および放射状グラデーションの使用法を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .linearGra

  2. CSS33D変換関数の操作

    3D変換を使用して、要素をx軸、y軸、およびz軸に移動できます。以下は、CSS33D変換のメソッドの一部です- 以下のメソッドは、3D変換を呼び出すために使用されます- Sr.No。 値と説明 1 matrix3d（n、n、n、n、n、n、n、n、n、n、n、n、n、n、n、n） 行列の16個の値を使用して要素を変換するために使用されます 2 translate3d（x、y、z） x軸、y軸、z軸を使用して要素を変換するために使用されます 3 translateX（x） x軸を使用して要素を変換するために使用されます 4 tr