CSS Kutusu Gölge Eğitimi: Adım Adım Kılavuz (+ Örnekler)

box-shadow CSS özelliği neden kendi öğreticisini hak ediyor? Çünkü aşağıda göreceğiniz gibi aynı anda birden fazla değer alan daha karmaşık özelliklerden biridir. Bu, özellikle yeni başlayanlar için zorlayıcı olabilir.

Şimdiye kadar box-shadow doğru kullanmakta zorlandıysanız, doğru yere geldiniz. Aşağıdaki kılavuzda, bu CSS özelliği hakkında bilinmesi gereken her şeyi gözden geçireceğiz. Ne yaptığından, sözdiziminin nasıl doğru kullanılacağından, bazı harika CSS box-shadow örneklerinden ve son olarak onunla çalışmayı kolaylaştıran bazı oluşturucu araçlardan bahsedeceğiz.

CSS Kutu Gölgesi nedir?

Şimdiye kadar CSS box-shadow özelliğinden haberdar olmasanız bile, muhtemelen web üzerinde çalışırken görmüşsünüzdür.

Yukarıda, vahşi doğada nasıl göründüğüne dair güzel bir örnek var (bir noktaya değinmek için burada biraz artırmış olsam bile). box-shadow temelde adından da anlaşılacağı gibi: hemen hemen her öğenin çerçevesine bir alt gölge eklemenize olanak tanır. Gölge, kare, dikdörtgen, yuvarlak veya oval olsun, çapasının şekline de yapışacaktır. Bu, bir border-radius özelliği ayarladığınızda bile geçerlidir.

Web'de insanlar bunu bir dizi farklı efekt oluşturmak için kullanırlar ve aşağıda bazı ilginç box-shadow örnekleri göreceğiz. Şimdilik en temel düzeyde nasıl çalıştığından bahsedelim.

Temel Kutu Gölge Sözdizimi

Tarayıcı geliştirici araçlarını kullanarak kutu gölgeli bir öğeye baktığınızda, şöyle bir işaretleme bulacaksınız:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Biraz karmaşık görünüyor, değil mi?

Ama merak etmeyin, bu beyanların hepsine her zaman ihtiyacınız yok. Ayrıca, nasıl çalıştıklarını anladığınızda, artık başlangıçtaki kadar kafa karıştırıcı görünmüyor.

Yukarıda görebileceğiniz gibi, box-shadow altı değere kadar alabilir. Bunların üzerinden tek tek geçelim.

ofset-x

İlk değer, alt gölgenin bağlantı elemanının yanından yatay mesafesidir. Pozitif bir değer onu sağa, negatif bir değer sola taşır.

px , em , vh ve daha fazlası gibi bu değer için uzunluğu belirten tüm yaygın CSS veri türlerini kullanabilirsiniz. En sık kullanılanlar px ve em .

ofset-y

Yukarıdakiyle aynı, ancak dikey eksen için. Pozitif değer, gölgeyi öğenin altına, negatifleri yukarıya taşır.

bulanıklık yarıçapı

Bu, kutu gölgesinin bulanıklığını tanımlar. Değer ne kadar yüksek olursa, o kadar bulanık olur. blur-radius ayrıca tüm yaygın CSS uzunluk birimlerini alır, ancak negatif değerler içermez.

yayılma yarıçapı

Bu, gölgenin, öğesinin yüksekliğinin veya genişliğinin ötesine yayılmasını kontrol eder. Uzunluk ne kadar yüksek olursa, yayılma o kadar büyük olur. Büzülmeyi tanıtmak için negatif sayıları da kullanabilirsiniz.

renk

Tahmin edebileceğiniz gibi, bu, kutu gölgesinin rengini her zamanki gibi tanımlamanıza izin verir. Çoğunlukla onaltılık (örn. #ededed ) veya rgba (örn rgba(46, 182, 142, 0.9) ) değerleriyle gösterilir. İkincisi ayrıca, genellikle alt gölgeler için kullanılan opaklığı kontrol etmenizi sağlar.

Bir renk ayarlamazsanız, tarayıcının o anda kullanılan metin rengini kullanacağını unutmayın.

iç metin

Son olarak, bildirimin başına isteğe bağlı olarak ekleme inset . Bu, gölgeyi alt gölgeden öğenin içindeki gölgeye değiştirir. Kenarlığın içinde, arka planın üstünde, ancak öğenin içeriğinin altında görünür, bu nedenle örneğin herhangi bir metni kapsamaz.

Değerleri Sırayla Kullanma

İşte box-shadow özelliğinin değerlerinin göründüğü sıra.

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Bir kutu gölgesi atamak için en az iki uzunluk değerine ihtiyacınız vardır. Tarayıcı, offset-x ve offset-y için bunları otomatik olarak kullanır. Üçüncüyü eklerseniz, blur-radius olarak, dördüncüsü ise spread-radius olarak yorumlanır. inset ve color isteğe bağlıdır ve sonunda veya başında ve herhangi bir sırada görünebilir. Aşağıdaki CSS'nin tümü aynı sonuca sahip olacaktır.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Birkaç Kutu Gölgesi Atama

Herkesin bilmediği bir şey, aynı öğe için birkaç kutu gölgesi ayarlayabilmenizdir. Bunun için birden fazla değer grubu sağlayın ve bunları virgülle ayırın.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Yukarıdaki kod şöyle görünür:

Bunu, öğelerin etrafında çizgiler oluşturmak için de kullanabilirsiniz. Bunun için, farklı renklerde birkaç gölge eklemeniz ve ofsetlerini ve bulanıklıklarını sıfıra ayarlamanız yeterlidir.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Bu, farklı renklerle ana hatlarla sonuçlanır:

Bunun kutu modeli boyutlarını etkilemediğini unutmayın, bu nedenle kutu gölgeleri bir öğenin genel boyutuna margin veya border yapacağı şekilde eklemez.

Tarayıcı Uyumluluğu

box-shadow için tarayıcı uyumluluğu gerçekten endişelenmeniz gereken bir şey değil. İç inset ve çoklu gölgeler gibi işaretleme de dahil olmak üzere hemen hemen her tarayıcı tarafından kabul edilen çok köklü bir CSS özelliğidir.

Bazı tarayıcıların eski sürümlerini desteklemek için, -webkit-box-shadow ve -moz-box-shadow özelliklerini aynı değerlerle eklemek yaygındır. Ancak, en yaygın tarayıcıların en son sürümleri için bu artık gerekli değildir.

CSS Kutusu Gölge Örnekleri

Bu box-shadow eğitiminde, bu özellik ile nelerin mümkün olduğunu görebilmeniz için bazı CSS kutu gölgeleri örneklerinin üzerinden geçmek istiyoruz. Oldukça standart uygulamalardan daha sıra dışı olanlara geçeceğiz çünkü göreceğiniz gibi, onunla gerçekten heyecan verici şeyler yapabilirsiniz.

Düğmeye Gölge Ekleme

Düğmeler genellikle üzerlerine bir kutu gölgesi uygulanan bir öğedir. Bunun nedeni, onları sayfada öne çıkarmanın iyi bir yolu olmasıdır. Sonuçta, bir düğme eklerseniz, genellikle insanların onu tıklamasını istersiniz. Bunu yapmalarını istemek için, bunu bir kutu gölgesiyle nasıl yapabileceğinize dair basit bir örnek.

Ekteki işaretleme şöyle görünür:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Yumuşak Kutu Gölge

Nispeten yumuşak bir CSS kutu gölgesi oluşturmak istiyorsanız, ofsetleri 0 olarak ayarlarken çoğunlukla blur ve spread ile çalışırsınız. Bu şekilde gölge belirgin bir şekil almaz, sadece kenarlarda yumuşak bir şekilde görünür.

Yukarıdaki efekti elde etmek için aşağıdaki işaretlemeyi kullanabilirsiniz:

 box-shadow: 0 0 50px 10px #999;

Bu aynı zamanda bir öğenin her tarafında bir kutu gölgesi oluşturmanın harika bir yoludur. Daha belirgin hale getirmek istiyorsanız, sadece formayı artırın, bulanıklığı azaltın ve daha koyu bir renk kullanın.

Çoklu Kutu Gölgeleri

Son box-shadow örnekleri, aynı anda birden çok gölge kullanmak içindir. Bu farklı olanaklar sunar. Birincisi, serin bir solma, birkaç adımlı kutu gölgesi sunabilirsiniz.

Şaşırtıcı derecede basittir: Aynı anda opaklığı azaltırken, eşit olarak artan ofsetlerle kutu gölgelerini birbirinin üzerine yığmanız yeterlidir. Bu arada, çok sayıda kutu gölgesi kullanırken, bildirimleri uzun bir bildirim yerine ayrı satırlarda yazmak yardımcı olur. Anlamayı çok kolaylaştırıyor.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Bunu, aralarında negatif spread-radius değerine sahip beyaz kutu gölgeleri ekleyerek daha da ileri götürebilirsiniz, bu da birkaç öğenin birbirinin üzerinde olduğu yanılsamasına neden olur.

Neden negatif yayılma değeri? Çünkü aksi halde beyaz kutu gölgeleri, altlarındakileri kaplayacaktı. Negatif değer onları küçültür, böylece arkadaki renk parlayabilir. Kendi web sitenizde benzer bir etki yaratmak istiyorsanız ihtiyacınız olan işaretleme aşağıdadır:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Birkaç CSS kutusu gölgesi için son örnek, yukarıda belirtilen ofsetleri ve bulanıklığı 0 olarak ayarlama yöntemidir. Yukarıda gördüğümüz gibi, bu durumda birkaç anahatlı, renkli olan eleman ile sonuçlanır. Ancak bu yalnızca, her bir kutu gölgesi için spread-radius değeri arttığı için işe yarar.

Bunu kendiniz denemek istiyorsanız, bununla başlayabilirsiniz:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

En İyi Kutu Gölge Üreticileri

Daha önce de belirttiğimiz gibi, box-shadow bir çok değer alır. Bu nedenle, istediğiniz gölge türüne ulaşana kadar biraz deneme yanılma gerektirebilir.

Bunu kolaylaştırmak için, kontrolleriyle oynamanıza, sonuçları hemen görmenize ve ardından memnun kaldıktan sonra işaretlemeyi kopyalamanıza izin veren bir sürü kutu gölgesi oluşturucu aracı var.

Kutu gölge oluşturucular için en iyi seçenekler şunlardır:

• box-shadow.dev — Bu tek amaçlı araç, ihtiyacınız olan tüm işlevselliğe ve grubun en iyi kullanıcı arayüzüne sahiptir. inset kullanabilir, birkaç kutu gölgesi oluşturabilir, kaymaları kontrol edebilir, kaydırıcılar aracılığıyla bulanıklaştırabilir ve yayabilir ve renkleri manuel olarak girebilirsiniz. Memnun kaldığınızda, CSS işaretlemesini kopyalamak için Kodu göster'i tıklayın. Tek dezavantajı, eski tarayıcılar için kod sağlamamasıdır.
• CSSmatic Box Gölge CSS Oluşturucu — Yukarıdakine benzer. box-shadow özelliklerini kaydırıcılar aracılığıyla kontrol etmenize ve sayıları manuel olarak girmenize olanak tanır. Opaklık için kendi kontrolüne sahip, ki bu güzel. Öte yandan, çoklu gölgeler için eksik işlevsellik. Aldığınız kod işaretlemesi daha eski tarayıcıları içerir.
• Box Shadow CSS Generator - Renk seçme özelliğine sahip ve size eski tarayıcılar için de kod veren sağlam bir seçenek. Basit bir tıklama ile kopyalayabilirsiniz. Opaklık kontrolüne sahiptir ancak yalnızca bir alt gölge oluşturabilir.
• CSS3gen CSS3 Box Shadow Generator — Başka bir gölge oluşturucu. Buradaki harika bir özellik, x ve y ofsetleri yerine gölge açısını ve mesafesini seçebilmeniz ve aracın gerisini otomatik olarak yapmasıdır. Bazı nedenlerden dolayı spread-radius ve inset kendi menülerine sahiptir. Basitçe kopyalayıp yapıştırabileceğiniz CSS, daha eski tarayıcı nesilleri için işaretleme de içerir.

Son Düşünceler: CSS Kutu Gölgesi

box-shadow özelliği ilk başta bunaltıcı olabilir. Çok fazla değer alan özelliklerden biridir, bu nedenle gerçekte olduğundan daha karmaşık görünebilir. Umarım, bu CSS kutu gölge öğreticisi, bu hissi dindirmiştir.

Yukarıda, CSS box-shadow ne olduğunu ve nasıl çalıştığını inceledik. Sözdizimini, değerleri ve birlikte nasıl çalıştıklarını açıkladık. Ek olarak, hemen kullanabileceğiniz işaretleme de dahil olmak üzere, CSS kutu gölgelerinin gerçek hayatta nasıl kullanılacağına ilişkin birkaç örneği inceledik. Son olarak, biraz yardım isteyenler için, sizin için birçok ağır yükü kaldırabilecek bir dizi CSS box-shadow oluşturucuyu listeledik.

Şimdiye kadar, bu CSS özelliğini web sitenizde kullanabileceğinizi hissetmelisiniz. Bununla ne yapacağınızı görmek için sabırsızlanıyoruz.

Web sitenizde CSS kutu gölgesini nasıl kullanıyorsunuz? Yukarıda ele almadığımız heyecan verici kullanım durumları var mı? Aşağıdaki yorumlarda bize bildirin!