CSS Kutu Gölgesi (Box-Shadow) Oluşturucu
CSS Kutu Gölgesi (Box-Shadow) Nedir?
Modern web tasarımında derinlik algısı ve katmanlı arayüzler oluşturmak, kullanıcı deneyimini (UX) doğrudan artıran unsurların başında gelir. CSS dünyasında nesnelere, butonlara veya görsellere bu derinliği kazandırmanın en profesyonel yolu box-shadow özelliğini kullanmaktır. Sitemizde yer alan online CSS kutu gölgesi oluşturucu sayesinde, kod yazmakla zaman kaybetmeden hayalinizdeki gölge efektlerini saniyeler içinde tasarlayabilirsiniz.
Box-Shadow Değerleri ve Anlamları
Kusursuz bir gölge tasarımı yaparken kontrol ettiğiniz temel parametreler şunlardır:
- Yatay Uzaklık (X): Gölgenin sağa veya sola doğru ne kadar kayacağını belirler. Pozitif değerler sağa, negatif değerler sola kaydırır.
- Dikey Uzaklık (Y): Gölgenin yukarı veya aşağı konumunu ayarlar. Pozitif değerler gölgeyi aşağı, negatif değerler yukarı taşır.
- Bulanıklık (Blur): Gölgenin kenarlarının ne kadar yumuşak veya keskin olacağını belirler. Değer arttıkça gölge daha soft bir hal alır.
- Yayılma (Spread): Gölgenin orijinal nesneden ne kadar dışarıya doğru genişleyeceğini ayarlar.
- Opaklık ve Renk: Gölgenin saydamlık derecesini ve rengini ayarlayarak sitenizin arka planıyla tam uyum yakalamasını sağlar.
Online Box-Shadow Aracı Nasıl Kullanılır?
Sitemizdeki ferah arayüz sayesinde gölge tasarlamak çok kolaydır. Sol taraftaki kaydırma çubuklarını (slider) sağa veya sola hareket ettirerek değerleri değiştirin. Sağ taraftaki önizleme kutusunda gölgenin canlı olarak nasıl değiştiğini anlık olarak görebilirsiniz. Tasarımınız bittiğinde alt bölümde otomatik olarak üretilen CSS kodunu tek tıkla kopyalayarak kendi projelerinize veya blog şablonunuza doğrudan ekleyebilirsiniz.
