CSS Masking, web geliştiricilerin görüntüleri belirli şekillerde kesmelerine veya şekillendirmelerine olanak tanıyan güçlü bir CSS özelliğidir. Bu özellik, görüntülerin çeşitli şekillerde gösterilmesini ve içeriklerin çerçeve içine sığdırılmasını sağlar. Bu yazıda, CSS Masking’in nasıl kullanıldığını ve bazı temel örneklerini inceleyeceğiz.
Basit Bir Masking Örneği
İlk olarak, basit bir masking örneğiyle başlayalım. Aşağıdaki HTML ve CSS kod blokları, bir görüntüyü daire şeklinde kesecek basit bir maske oluşturur:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Masking Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="mask-example">
<img src="image.jpg" alt="Mask Example">
</div>
</body>
</html>
.mask-example {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.mask-example img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
mask-image: radial-gradient(circle, white 100%, black 100%);
}
Bu kod blokları, bir div öğesini daire şeklinde kesen ve içine bir görüntü yerleştiren basit bir mask oluşturur. -webkit-mask-image ve mask-image özellikleri, daire şeklindeki maskeyi oluşturur. Görüntü, daire şeklindeki maskeye uyacak şekilde kırpılır ve yuvarlak bir görünüm elde edilir.
Karmaşık Bir Masking Örneği
Şimdi, daha karmaşık bir masking örneğine bakalım. Aşağıdaki kod blokları, bir metin kutusunu arkadaşlarının resimleriyle dolduran bir sosyal medya tasarımını simüle eder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Masking Karmaşık Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="profile-picture">
<img src="friend1.jpg" alt="Friend 1">
<img src="friend2.jpg" alt="Friend 2">
<img src="friend3.jpg" alt="Friend 3">
</div>
</body>
</html>
.profile-picture {
width: 300px;
height: 300px;
position: relative;
}
.profile-picture img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-mask-image: radial-gradient(circle at center, transparent 50%, black 100%);
mask-image: radial-gradient(circle at center, transparent 50%, black 100%);
}
Bu kod blokları, bir div öğesini dolduran ve her biri farklı bir arkadaşın resmini içeren bir profile-picture oluşturur. Her resim, daire şeklinde bir maskeyle kırpılır ve metin kutusuna uyacak şekilde yerleştirilir.
Sonuç
CSS Masking, web geliştiricilerin görüntüleri ve içerikleri belirli şekillerde kesmelerini ve şekillendirmelerini sağlayan güçlü bir CSS özelliğidir. Basit daire maskelerinden karmaşık tasarımlara kadar, CSS Masking ile yaratıcı ve etkileyici web siteleri oluşturabilirsiniz.