CSS box-shadow kodu nasıl oluşturulur?

Alanlara gölge değerlerini girin ve iç gölge gerekiyorsa ilgili seçeneği etkinleştirin. Araç, sayısal değerleri px ekiyle ve seçili iç gölgeyi inset ifadesiyle içeren bir CSS box-shadow bildirimi oluşturur.

CSS box-shadow kodu ne işe yarar?

CSS box-shadow bildirimi, bir öğe için gölge ayarlarını CSS biçiminde ifade eder. Bu araç, bildirimi elle kurmak yerine yatay uzaklık, dikey uzaklık, bulanıklık, yayılma, renk ve iç gölge seçeneği üzerinden oluşturmanıza yardımcı olur. Böylece birkaç gölge değerini değiştirerek yeni bir CSS satırı hazırlayabilirsiniz.

Araçta sayısal değerler için dört ayrı alan bulunur: yatay uzaklık, dikey uzaklık, bulanıklık ve yayılma. Ayrıca renk metnini girebileceğiniz bir alan ve iç gölgeyi seçmek için bir onay kutusu vardır. Alanlara değer yazmadığınızda başlangıç değerleri yatay uzaklıkta 2, dikey uzaklıkta 2, bulanıklıkta 5, yayılmada 0 ve renkte #00000033 olarak kullanılır. İç gölge seçeneği başlangıçta kapalıdır.

Bu yapı, bir bileşenin stil bildirimi için farklı gölge ayarlarını karşılaştırırken işe yarar. Önce başlangıç değerleriyle bir çıktı alabilir, ardından yalnızca değiştirmek istediğiniz alanı düzenleyebilirsiniz. Böylece hangi değerlerle çalıştığınızı takip etmek daha kolay olur. Araç CSS box-shadow bildirimi üretmeye odaklanır; başka CSS özellikleri için çıktı hazırladığı varsayılmamalıdır.

Adım adım kullanım

1. Yatay uzaklık, dikey uzaklık, bulanıklık ve yayılma alanlarını belirleyin. Bu alanlar isteğe bağlı sayısal girdiler içindir. Bir alanı değiştirmeden bırakırsanız ilgili başlangıç değeri kullanılır. Dört sayısal değer oluşturulan bildirime px ekiyle aktarılır.

2. Renk alanına gölgede kullanmak istediğiniz metni girin. Başlangıç rengini kullanmak istiyorsanız renk alanını değiştirmeden bırakabilirsiniz. Renk girdisi, oluşturulan box-shadow bildiriminin renk bölümünde yer alır.

3. İç gölge istiyorsanız iç gölge seçeneğini etkinleştirin. Dış gölge biçimi için bu seçeneği kapalı bırakın. Seçiminiz bildirimin içine inset ifadesinin eklenip eklenmeyeceğini belirler.

4. Oluşturma veya hesaplama işlemini başlatan kontrolü kullanın. Araç, girdiğiniz yatay ve dikey uzaklık, bulanıklık, yayılma ve renk değerlerini bir box-shadow bildirimi biçiminde düzenler. Gösterilen hesaplama yolu başarılı bir sonuç raporlar.

5. Oluşturulan CSS bildirimini inceleyin. Sayısal değerlerin sırasını yatay uzaklık, dikey uzaklık, bulanıklık ve yayılma olarak kontrol edin. Renk metninin bu değerlerden sonra geldiğini ve iç gölgeyi seçtiyseniz inset ifadesinin bildirime eklendiğini doğrulayın.

6. Yeni bir varyasyon denemek isterseniz tek bir alanı değiştirip işlemi yeniden başlatın. Örneğin yalnızca yayılma değerini düzenleyerek yeni bildirimin önceki sonuçtan nasıl ayrıldığını görebilirsiniz. İç gölge seçeneğini değiştirirken de bildirimin inset içerip içermediğini kontrol edin.

7. Sonucu kullanacağınız stil kuralına aktarın. Bildirimi uygun seçicinin stil bildirimleri arasında kullanın ve sayfanızdaki diğer CSS kurallarıyla birlikte değerlendirin. Araçtan beklenen çıktı, gölge bildiriminin kendisidir; seçici veya başka bir stil kuralının tamamını üretmesi beklenmez.

Sıfır değerleriyle de bir hesaplama yapılabilir. İncelenen başarılı durumda yatay uzaklık, dikey uzaklık, bulanıklık ve yayılmanın dördü de 0 olarak kabul edilmiştir. Bu değerleri girdiğinizde araç, sayısal bölümleri 0px biçiminde düzenleyen bir bildirim oluşturur. Sıfır kullanırken özellikle dört sayısal alanın sırasını ve iç gölge seçeneğinin durumunu birlikte kontrol edin.

Üretilen CSS çıktısı nasıl okunur?

Sonuç, box-shadow özelliğine ait bir CSS bildirimi biçiminde görünmelidir. Bildirimde yatay uzaklık, dikey uzaklık, bulanıklık, yayılma ve renk sıralanır. Dört sayısal gölge değerinin sonuna px eklenir. İç gölge seçeneği etkinleştirildiğinde inset de bildirime dahil edilir. Seçenek kapalıysa çıktı iç gölge için bu ifadeyi içermez.

Bir çıktıyı okurken önce bildirimin box-shadow ile ilgili olduğunu, ardından dört sayısal bölümün beklenen sırada bulunduğunu kontrol edin. Daha sonra renk metnini ve iç gölge seçeneğine bağlı inset ifadesini inceleyin. Bu kontrol, girilen ayarların bildirime aktarılıp aktarılmadığını anlamaya yarar. Araç, gölge ayarlarını tek bir CSS bildirimi olarak düzenler; sonuçtan seçici, renk paleti veya başka CSS özellikleri beklemeyin.

Başlangıç değerleriyle oluşturulan sonuçta sayısal bölümlerin 2px 2px 5px 0px biçiminde görünmesi ve renk bölümünde #00000033 bulunması beklenir. İç gölge kapalı olduğundan bu senaryoda inset eklenmez. Bir alanı değiştirdiğinizde yalnızca ilgili bölümün yeni girdiye göre düzenlendiğini kontrol edin. İç gölge seçeneğini açtığınız bir sonuçta ise inset ifadesini ayrıca arayın.

Sıfır değerleriyle oluşturulan sonuçta dört sayısal bölümün 0px biçimine dönüştürülmesi beklenir. Bu, incelenen hesaplama durumunda başarılı bir sonuç olarak raporlanmıştır. Ancak bu gözlem, doğrulanmamış renk biçimleri, sayısal aralıklar, yuvarlama davranışı veya hata koşulları hakkında ek bir kural göstermez. Bu nedenle sonucu, yalnızca girdiğiniz gölge ayarlarının CSS bildirimi olarak değerlendirin.

Uygulamalı örnek

Bir arayüz kartına başlangıç ayarlarıyla dış gölge bildirimi eklemek isteyen geliştirici, alanları değiştirmeden sonucu oluşturur.

Bir kart öğesi için yatay uzaklık, dikey uzaklık, bulanıklık ve yayılma alanlarını sırasıyla 2, 2, 5 ve 0 bırakın, renk alanında #00000033 değerini koruyun, iç gölge seçeneğini kapalı tutun ve oluşturma işlemini başlatın. Oluşan bildirimi kartın CSS seçicisindeki stil bildirimleri arasına aktarın.

Sonuç, box-shadow: ile başlayan ve 2px 2px 5px 0px #00000033 değerlerini içeren bir CSS bildirimi biçimindedir; iç gölge kapalı olduğu için inset bulunmaz.

Sınırlamalar

• Araç CSS box-shadow bildirimi oluşturmaya odaklanır; doğrulanmış kapsamda başka CSS özellikleri için kod üretimi gösterilmemiştir.

Sık yapılan hatalar

• İç gölge beklenirken seçenek kapalı bırakılırsa bildirime inset eklenmez. Seçeneği etkinleştirip oluşturma işlemini yeniden başlatarak sonucu tekrar kontrol edin.

Sık sorulan sorular

CSS box-shadow oluşturucuda 0 değeri kullanılabilir mi?

İncelenen başarılı hesaplama durumunda yatay uzaklık, dikey uzaklık, bulanıklık ve yayılma için 0 kullanılabilmiştir. Bu dört alanı sıfırladığınızda sonuçtaki sayısal bölümlerin 0px biçiminde düzenlenmesini bekleyebilirsiniz.

CSS box-shadow koduna inset nasıl eklenir?

İç gölge seçeneğini etkinleştirin ve oluşturma işlemini yeniden başlatın. Etkin seçim, üretilen CSS bildirimine inset ifadesinin eklenmesini sağlar.

Alanları doldurmazsam hangi CSS box-shadow değerleri kullanılır?

Alanları boş bıraktığınızda yatay uzaklık için 2, dikey uzaklık için 2, bulanıklık için 5, yayılma için 0 ve renk için #00000033 başlangıç değerleri kullanılır. İç gölge seçeneği kapalı başlar.