CSS box-shadow Oluşturucu
Sürüklenecek bir tuval değil, bildirimin kendisi.
Örnekler girdiyi ve ayarları geçici olarak değiştirir. Önceki çalışmanızı geri yükleyebilirsiniz.
- gölge
- 1
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Dosyalarınız cihazınızda kalır
Bu araç tamamen tarayıcınızda çalışır. Yapıştırdığınız içerik cihazınızda işlenir ve asla bir sunucuya gönderilmez; bu yüzden token'lar, anahtarlar ve yayımlanmamış metinlerle güvenle kullanabilirsiniz.
Örnek
Örnek: ürün kartına iki katmanlı yumuşak gölge, fotoğraf üstündeki başlığa text-shadow
El yapımı seramik satan küçük bir dükkânın sitesini kodlayan Can, beyaz zemindeki ürün kartlarının sayfadan hafifçe kalkmış görünmesini, kapak fotoğrafının üstündeki başlığın da okunur olmasını istiyor. Kaydırıcılar yerine kutuya her satıra bir gölge yazıyor.
- Kutuya iki satır yazın: 0 1 2 rgba(0,0,0,.06) ve 0 8 24 -4 rgba(0,0,0,.12). İlki kartın kenarındaki dar ve koyu gölge, ikincisi altındaki geniş ve yumuşak gölge.
- Her sayıya px eklenir ve iki gölge alt alta hizalanmış tek bir box-shadow bildirimi olur (tablonun ikinci satırı).
- Eksi yayılma (-4px) gölgeyi bulanıklaştırmadan önce daraltır: gölge kartın yanlarından taşmaz, yalnızca altında görünür.
- Başlık için text-shadow’a geçip 0 2 6 rgba(0,0,0,.6) yazın. Dördüncü bir sayı yazarsanız sayfa onu çıkarır ve altına text-shadow’un yayılması olmadığını söyleyen bir not ekler.
| Kutuya yazılan | Çıkan CSS |
|---|---|
| (boş; kaydırıcılar önceden ayarlı) | box-shadow: 0px 4px 12px rgba(0,0,0,.15); |
| 0 1 2 rgba(0,0,0,.06) ve 0 8 24 -4 rgba(0,0,0,.12) | box-shadow: 0px 1px 2px rgba(0,0,0,.06), 0px 8px 24px -4px rgba(0,0,0,.12); |
| 0 2 4 rgba(0,0,0,.15), İçe işaretli | box-shadow: inset 0px 2px 4px rgba(0,0,0,.15); |
| 0 2 6 rgba(0,0,0,.6), text-shadow | text-shadow: 0px 2px 6px rgba(0,0,0,.6); |
Kart için iki katmanlı, başlık için tek katmanlı bildirim hazır; kopyalayıp CSS dosyasına yapıştırın. Kartın üzerine gelindiğinde daha belirgin bir gölge için ikinci satırı 0 12 32 -6 rgba(0,0,0,.18) yapın ve çıkan bildirimi :hover kuralına koyun.
Nasıl çalışır
- Tek gölge için kaydırıcıları kullanın; birkaç gölge için her satıra bir tane yazın.
- Bir satır “x y bulanıklık yayılma renk” demektir — atlanan her sayı sıfır sayılır.
- Gölgelenecek olan metinse text-shadow’a geçin.
- Bildirimi kopyalayın.
Sık sorulan sorular
- Neden birden çok gölge isteyeyim?
- Çünkü tek gölge neredeyse hiçbir zaman doğru görünmez. Gerçek bir gölge, dar ve koyu bir kenar artı geniş ve yumuşak bir yayılmadır; farklı bulanıklık ve saydamlıkta iki üç gölgeyi üst üste koymak, bir kartın çerçevelenmiş değil sayfadan kalkmış görünmesini sağlayan şeydir.
- Yayılma ne yapar?
- Gölgeyi bulanıklaştırmadan önce büyütür ya da küçültür. Eksi yayılma onu içe çeker; bir ögenin altında duran ama yanlardan taşmayan gölge böyle elde edilir.
- text-shadow’daki yayılmam neden yok sayılıyor?
- Çünkü text-shadow’un yayılması yoktur; yalnızca x, y, bulanıklık ve renk alır. Dört uzunluklu bir text-shadow’u tarayıcı geçersiz sayar ve bildirimin tamamını sessizce atar: gölge hiç görünmez. Dördüncü bir sayı yazdığınızda sayfa onu CSS’ten çıkarır ve çıktının altına bunu söyleyen bir not ekler.
- “İçe” ne demek?
- Gölgeyi kutunun dışına değil içine çizer; bir şeyi içeri basılmış göstermenin yolu budur. Yalnızca box-shadow için geçerlidir.
- Yatay kaydırma (x) için kaydırıcı neden yok?
- Kaydırıcılar dikey kaydırma, bulanıklık, yayılma ve renk içindir; onlarla yapılan gölgede x her zaman 0’dır, ışık yukarıdan geliyormuş gibi. Yana düşen bir gölge için satırı kutuya yazın: 4 8 16 rgba(0,0,0,.2) satırında ilk sayı x’tir ve çıktı 4px 8px 16px olur.
- Sayıların yanına px yazmam gerekir mi?
- Hayır: 8 de 8px de olur, çıktıda her sayıya px eklenir. Atlanan sayılar 0 sayılır; renk yazılmazsa rgba(0,0,0,.2) kullanılır. Renk adı, #hex ya da rgba() yazabilirsiniz; rgba içindeki boşluklar satırı bölmez.
- Bir sunucuya bir şey gönderiliyor mu?
- Hayır. Tarayıcıda çalışır; yazdığınız şey bilgisayarınızda kalır.