Box Shadow Jeneratörü

CSS Box Shadow Özelliklerinin Temelleri

CSS box-shadow özelliği, web arayüzlerindeki elemanlara derinlik ve boyut kazandırmak için kullanılır. Bir kutu gölgesinin görsel yapısı; yatay uzaklık, dikey uzaklık, bulanıklık yarıçapı, yayılma yarıçapı, renk ve gölgenin elemanın içinde mi yoksa dışında mı yer alacağını belirleyen konum parametrelerine dayanır.

Bu parametrelerin her biri, gölgenin gerçekçiliğini ve yoğunluğunu doğrudan etkiler:

• Yatay uzaklık: Gölgeyi elemanın sağ veya sol tarafına doğru konumlandırır. Pozitif değerler gölgeyi sağa, negatif değerler ise sola kaydırır.
• Dikey uzaklık: Gölgeyi elemanın üst veya alt tarafına doğru konumlandırır. Pozitif değerler gölgeyi aşağıya, negatif değerler ise yukarıya 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 dağınık ve belirsiz hale gelir.
• Yayılma: Gölgenin bulanıklaşma işlemi başlamadan önce ne kadar büyüyeceğini veya küçüleceğini kontrol eder. Pozitif değerler gölgeyi genişletirken, negatif değerler gölgeyi içeriye doğru çeker.

Box Shadow Jeneratörü Arayüzü ve Kontrolleri

Box Shadow Jeneratörü, tasarım sürecinde ihtiyaç duyulan tüm bu parametreleri görsel kaydırıcılar ve kontroller aracılığıyla gerçek zamanlı olarak yapılandırmanızı sağlar. Tarayıcı üzerinde çalışan araçta şu girdiler yer alır:

• Yatay uzaklık: -50px ile 50px arasında ayarlanabilen kaydırıcı.
• Dikey uzaklık: -50px ile 50px arasında ayarlanabilen kaydırıcı.
• Bulanıklık: 0px ile 100px arasında ayarlanabilen kaydırıcı.
• Yayılma: -50px ile 50px arasında ayarlanabilen kaydırıcı.
• Gölge rengi: Gölgenin rengini belirlemek için kullanılan renk seçici.
• Opaklık: Gölgenin şeffaflık derecesini ayarlayan kaydırıcı.
• İç gölge (Inset): Gölgeyi elemanın dışından içine doğru çeviren geçiş anahtarı.

Arayüzde varsayılan olarak beş katman önceden yüklenmiş durumdadır. İlk katman 0 8 24 -4 değerlerine ve %18 opaklığa sahip siyah renkle başlarken, diğer dört katman başlangıçta gizlidir. Yeni bir efekt oluşturmak veya mevcut yapıyı genişletmek için "Katman ekle" butonunu kullanabilir, ihtiyaç duymadığınız katmanları ise "Katmanı kaldır" butonu ile silebilirsiniz.

Derinlik ve Gerçekçilik İçin Çoklu Katman Kullanımı

Web tasarımında tek bir kalın gölge katmanı kullanmak, elemanların yapay ve dijital görünmesine neden olabilir. Gerçek dünyadaki ışık kaynakları, nesnelerin arkasında tek bir keskin gölge yerine, farklı yoğunluklarda ve dağılımlarda üst üste binen birden fazla gölge katmanı oluşturur.

Bu fiziksel etkiyi CSS ile taklit etmek için birden fazla gölge katmanı üst üste eklenir. Box Shadow Jeneratörü üzerinde "Katman ekle" butonuna basıldığında, varsayılan değerlere sahip yeni bir katman oluşturulur. Çoklu katmanlar etkinleştirildiğinde, üretilen CSS çıktısı her bir katmanı virgülle ayırarak tek bir box-shadow kuralı altında birleştirir.

Örneğin, gerçekçi bir derinlik hissi yaratmak için şu iki katmanlı yapı tercih edilebilir:

1. Birinci Katman (Yakın ve Koyu): Elemanın hemen arkasında duran, düşük bulanıklık ve negatif yayılma değerine sahip dar bir gölge. Bu katman elemanın sınırlarını belirginleştirir.
2. İkinci Katman (Uzak ve Yumuşak): Daha yüksek dikey uzaklık ve yüksek bulanıklık değerine sahip, düşük opaklıklı geniş bir gölge. Bu katman ise elemanın arka plandan yükseliyormuş gibi görünmesini sağlar.

İç Gölge (Inset) ile Basık Eleman Tasarımı

Standart bir kutu gölgesi, elemanın sınırlarının dışına taşarak onun arka plandan yukarıya doğru yükseldiği izlenimini verir. Ancak bazı arayüz elemanlarında, elemanın içeriye doğru çökmüş veya basılmış gibi görünmesi istenir.

"İç gölge (Inset)" seçeneği aktif hale getirildiğinde, gölge yönü tamamen tersine döner ve elemanın dış çerçevesinden içeriye doğru uygulanır. Bu teknik özellikle şu durumlarda kullanılır:

• Kullanıcının veri girişi yapacağı form alanları ve metin kutuları (inputs) için derinlik oluşturmak.
• Tıklanmış veya aktif duruma getirilmiş butonlarda basılma hissi yaratmak.
• Arayüz üzerinde gömülü paneller veya kart alanları tasarlamak.

Tarayıcı İçi İşleme ve Veri Güvenliği

Box Shadow Jeneratörü üzerinde yaptığınız tüm görsel ayarlamalar ve katman değişiklikleri doğrudan kullandığınız web tarayıcısı içinde işlenir. Sürüklediğiniz kaydırıcılar, seçtiğiniz renkler veya oluşturduğunuz katman kombinasyonlarına dair hiçbir veri BroBroGo sunucularına gönderilmez veya harici bir sisteme yüklenmez. Tüm CSS üretim süreci yerel olarak cihazınızda gerçekleşir.

Sıkça Sorulan Sorular

Uzaklık, bulanıklık ve yayılma tam olarak neyi kontrol eder? Uzaklık (offset) gölgeyi sağa/sola ve yukarı/aşağı hareket ettirir, bulanıklık (blur) kenarlarını yumuşatır ve yayılma (spread) bulanıklaşmadan önce gölgeyi büyütür veya küçültür. Negatif bir yayılma değeri gölgeyi içeri çeker, bu da dar ve yakın gölgeler için kullanışlıdır.

İç gölge (inset) seçeneği ne işe yarar? Normal bir gölge, yükseltilmiş bir kartın arkasındaki ışık gibi elemanın dışına düşer. Inset ise gölgeyi içeriye doğru çevirir, böylece eleman içeri göçmüş gibi görünür; bu, basık girdiler (inputs) veya basılmış butonlar için kullanışlıdır.

Neden birden fazla gölge katmanı üst üste eklenir? Tek bir gölge, belirli bir boyuttan sonra yapay ve düz görünür. Gerçekçi bir derinlik hissi genellikle dar ve koyu bir gölge ile yumuşak ve daha geniş bir gölgenin birleşiminden oluşur. İkinci bir katman ekleyip her birini bağımsız olarak ayarlayarak bu etkiyi elde edebilirsiniz.