filter, backdrop-filter ve mix-blend-mode ile görsel efektler.
CSS filtreleri görüntüleri Photoshop gibi işlemenizi sağlar. JavaScript veya sunucu gerektirmeden bulanıklaştırma, renk değiştirme ve gölge ekleme yapılabilir.
Elementin arkasındaki içeriğe filtre uygular. Cam efekti (glassmorphism) için kullanılır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; padding: 20px; background: #0f172a; color: white; }
.efekt-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.efekt-kart {
width: 130px; height: 100px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; text-align: center;
padding: 8px; transition: filter 0.3s;
}
/* Filtreler */
.blur { filter: blur(4px); }
.brightness { filter: brightness(1.5); }
.contrast { filter: contrast(2); }
.grayscale { filter: grayscale(100%); }
.sepia { filter: sepia(100%); }
.hue { filter: hue-rotate(120deg); }
.invert { filter: invert(100%); }
.saturate { filter: saturate(3); }
.golge { filter: drop-shadow(4px 4px 8px rgba(99,102,241,0.8)); }
/* Glassmorphism */
.hero-bg {
position: relative;
background: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800') center/cover;
height: 200px; border-radius: 16px; overflow: hidden; margin-top: 24px;
}
.cam-kart {
position: absolute;
inset: 20px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h3>CSS Filtreleri</h3>
<div class="efekt-grid">
<div class="efekt-kart">Normal</div>
<div class="efekt-kart blur">blur(4px)</div>
<div class="efekt-kart brightness">brightness(1.5)</div>
<div class="efekt-kart contrast">contrast(2)</div>
<div class="efekt-kart grayscale">grayscale(100%)</div>
<div class="efekt-kart sepia">sepia(100%)</div>
<div class="efekt-kart hue">hue-rotate(120deg)</div>
<div class="efekt-kart invert">invert(100%)</div>
<div class="efekt-kart saturate">saturate(3)</div>
<div class="efekt-kart golge">drop-shadow</div>
</div>
<h3>Glassmorphism — Cam Efekti</h3>
<div class="hero-bg">
<div class="cam-kart">🪟 Cam Kart Efekti (backdrop-filter)</div>
</div>
</body>
</html>