- Katılım
- 19 Ocak 2024
- Mesajlar
- 159
- Tepkime puanı
- 10
- Puanları
- 18
- Ödüller
- 5
CSS ile Kutulara Gölge (Box Shadow) Verme Teknikleri
CSS kullanarak kutulara gölge eklemek, öğelere derinlik ve modern bir görünüm kazandırmanın etkili bir yoludur. Gölge efektleri, bir tasarımı daha profesyonel ve estetik hale getirebilir. İşte farklı box-shadow teknikleri ve örnekleri.
Temel Box Shadow Kullanımı
CSS'deki `box-shadow` özelliği, öğenin altına bir gölge ekler. Temel bir örnek aşağıdaki gibidir:
CSS:
.basic-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
margin: 20px auto;
border-radius: 10px;
}HTML Yapısı:
HTML:
<div class="basic-shadow"></div>Yumuşak Gölgeler
Daha yumuşak bir görünüm için gölge değerlerini artırabilirsiniz.
CSS:
.soft-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1);
margin: 20px auto;
border-radius: 10px;
}HTML Yapısı:
HTML:
<div class="soft-shadow"></div>Çoklu Gölge Kullanımı
Bir öğeye birden fazla gölge ekleyerek daha ilginç efektler elde edebilirsiniz.
CSS:
.multiple-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), -4px -4px 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
border-radius: 10px;
}HTML Yapısı:
HTML:
<div class="multiple-shadow"></div>İç Gölge Efekti
CSS ile kutunun içine gölge eklemek için `inset` anahtar kelimesi kullanabilirsiniz.
CSS:
.inset-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2);
margin: 20px auto;
border-radius: 10px;
}HTML Yapısı:
HTML:
<div class="inset-shadow"></div>Hover ile Gölge Animasyonu
Bir öğe üzerine gelindiğinde gölgeyi değiştirmek için hover efekti ekleyebilirsiniz.
CSS:
.hover-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
margin: 20px auto;
border-radius: 10px;
}
.hover-shadow:hover {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
}HTML Yapısı:
HTML:
<div class="hover-shadow"></div>Kullanım Alanları
- Kart tasarımları (örneğin ürün kartları veya içerik kutuları)
- Vurgu yapmak istediğiniz önemli öğeler
- Hover efektleriyle kullanıcı etkileşimini artırma
