はじめに
CSSを学びたいStep10です。今回は画像にぼかしや色を調整できるfilterに関して学んでいきます
成果物
→ぼかしや色が変わっていますよね！全て同じ画像ですが、CSSで修正が加えられます！！
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter Property Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="filter-examples">
<img src="example.jpg" alt="Original Image">
<img src="example.jpg" alt="Blur Effect" class="filter-blur">
<img src="example.jpg" alt="Brightness Effect" class="filter-brightness">
<img src="example.jpg" alt="Contrast Effect" class="filter-contrast">
<img src="example.jpg" alt="Grayscale Effect" class="filter-grayscale">
<img src="example.jpg" alt="Invert Effect" class="filter-invert">
<img src="example.jpg" alt="Saturate Effect" class="filter-saturate">
<img src="example.jpg" alt="Sepia Effect" class="filter-sepia">
<img src="example.jpg" alt="Drop Shadow Effect" class="filter-drop-shadow">
</div>
</body>
</html>
styles.css
.filter-examples img {
width: 200px;
height: auto;
margin: 10px;
}
/* ぼかし効果 */
.filter-blur {
filter: blur(5px);
}
/* 明るさ効果 */
.filter-brightness {
filter: brightness(150%);
}
/* コントラスト効果 */
.filter-contrast {
filter: contrast(200%);
}
/* グレースケール効果 */
.filter-grayscale {
filter: grayscale(100%);
}
/* 反転効果 */
.filter-invert {
filter: invert(100%);
}
/* 彩度効果 */
.filter-saturate {
filter: saturate(200%);
}
/* セピア効果 */
.filter-sepia {
filter: sepia(100%);
}
/* ドロップシャドウ効果 */
.filter-drop-shadow {
filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}