CSS kutu gölgesi Nasıl Kullanılır: 13 Püf Noktaları ve Örnekler

CSS, geliştiricilerin bir web sayfasını biçimlendirmek için kullandıkları dildir. HTML öğelerinin bir ekranda, kağıt üzerinde veya başka herhangi bir ortamda nasıl görüntülendiğini kontrol eder. CSS, web sayfasını kendi görüntünüzde biçimlendirmek için tam özelleştirme gücü sağlar.

CSS kullanarak bir öğenin arka plan rengini, yazı tipi stilini, yazı tipi rengini, kutu gölgesini, kenar boşluğunu ve diğer birçok özelliğini değiştirebilirsiniz. Bu kılavuzda size kutu gölgesinin bazı etkili kullanımlarını anlatacağız.

CSS kutu gölgesi nedir?

kutu gölgesi özelliği, HTML öğelerine gölge uygulamak için kullanılır. Kutuları veya görüntüleri şekillendirmek için en çok kullanılan CSS özelliklerinden biridir.

CSS Sözdizimi:

kutu gölgesi: [yatay uzaklık] [dikey çıkıntı] [bulanıklık yarıçapı] [isteğe bağlı yayılma yarıçapı] [renk];

1. yatay uzaklık: Yatay uzaklık pozitifse, gölge kutunun sağında olacaktır. Yatay uzaklık negatifse, gölge kutunun solunda olacaktır.
2. dikey uzaklık: Dikey çıkıntı pozitifse, gölge kutunun altında olacaktır. Dikey uzaklık negatifse, gölge kutunun üstünde olacaktır.
instagram viewer
3. bulanıklık yarıçapı: Değer ne kadar yüksekse, gölge o kadar bulanık olacaktır.
4. yayılma yarıçapı: Gölgenin ne kadar yayılması gerektiğini belirtir. Pozitif değerler gölgenin yayılmasını artırır, negatif değerler yayılmayı azaltır.
5. Renk: Gölgenin rengini belirtir. Ayrıca, rgba, hex veya hsla gibi herhangi bir renk formatını destekler.

Bulanıklaştırma, yayılma ve renk parametreleri isteğe bağlıdır. Kutu gölgesinin en ilginç yanı, kutu gölge değerlerini istediğiniz kadar ayırmak için virgül kullanabilmenizdir. Bu, öğeler üzerinde birden çok kenarlık ve gölge oluşturmak için kullanılabilir.

1. Kutunun Soluna, Sağına ve Altına bir Sönük kutu gölgesi ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun üç tarafına (sol, sağ ve alt) çok sönük gölgeler ekleyebilirsiniz:

kutu gölgesi: rgba (149, 157, 165, 0.2) 0px 8px 24px;

Çıktı:

2. Tüm Taraflara Karartılmış kutu gölgesi ekleyin

Hedef HTML öğenizle birlikte aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun her tarafına açık gölgeler ekleyebilirsiniz:

kutu gölgesi: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Çıktı:

3. Alt ve Sağ Taraflara bir İnce kutu gölgesi ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun altına ve sağ tarafına gölge ekleyebilirsiniz:

kutu gölgesi: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Çıktı:

4. Tüm Taraflara Koyu kutu gölgesi ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun her tarafına koyu gölge ekleyebilirsiniz:

kutu gölgesi: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Çıktı:

5. Tüm Taraflara Yayılmış Gölge Ekle

Hedef HTML öğenizle aşağıdaki komutu kullanarak kutunun her tarafına yayılmış gölge ekleyebilirsiniz:

kutu gölgesi: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Çıktı:

6. Tüm Taraflara İnce Bordür Gölgesi Ekleyin

Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun her tarafına basit bir sınır gölgesi ekleyebilirsiniz:

kutu gölgesi: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px iç metin;

Çıktı:

7. Alt ve Sol Taraflara bir kutu gölgesi ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun alt ve sol taraflarına bir gölge ekleyebilirsiniz:

kutu gölgesi: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Çıktı:

8. Üst ve Sol Taraflara Sönük kutu gölgesi, Alta ve Sağ Tarafa Koyu Gölge ekleyin

Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun üst ve sol tarafına açık bir gölge ve ayrıca kutunun alt ve sağ taraflarına koyu bir gölge ekleyebilirsiniz:

kutu gölgesi: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Çıktı:

9. Tüm Taraflara İnce, Renkli Kenarlık Gölgesi Ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun her tarafına basit renkli bir kenarlık gölgesi ekleyebilirsiniz:

kutu gölgesi: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Çıktı:

10. Kutunun Alt ve Sol Taraflarına Birden Çok Renkli Kenarlık Gölgesi Ekleme

Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun alt ve sol taraflarına birden çok renkli kenar gölgesi ekleyebilirsiniz:

kutu gölgesi: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px iç metin, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px iç metin;

Çıktı:

11. Alta Birden Çok Renkli Kenarlık Gölgesi Ekleyin

Hedef HTML öğenizle aşağıdaki kutu gölgeli CSS'yi kullanarak kutunun altına birden çok renkli kenarlık gölgesi ekleyebilirsiniz:

kutu gölgesi: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0.1) 0px 20px, rgba (240, 46, 170, 0.05) 0px 25px;

Çıktı:

12. Kutunun Alt ve Sağ Taraflarına Birden Çok Renkli Kenarlık Gölgesi Ekleme

Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun alt ve sağ taraflarına birden çok renkli kenarlık gölgesi ekleyebilirsiniz:

kutu gölgesi: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0.1) 20px 20px, rgba (240, 46, 170, 0.05) 25px 25px;

Çıktı:

13. Sol ve Sağ Taraflara Açık Gölgeler Ekleme, Alta Gölge Yayma

Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'yi kullanarak sol ve sağ taraflara açık gölgeler ekleyebilir ve kutunun altına gölge yayabilirsiniz:

kutu gölgesi: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

Çıktı:

CSS'yi bir HTML Sayfasıyla Entegre Edin

Artık CSS kullanarak harika kutu-gölge efektlerini nasıl ekleyeceğinizi biliyorsunuz, bunları HTML öğeleriyle birden çok yolla kolayca entegre edebilirsiniz.

İlişkili: CSS Dosyalarını Kontrol Etmek, Temizlemek ve Optimize Etmek İçin 11 Yararlı Araçlar

Bunu HTML sayfasına gömebilir veya ayrı bir belge olarak ekleyebilirsiniz. Bir HTML belgesine CSS eklemenin üç yolu vardır:

Dahili CSS

Gömülü veya Dahili Stil Sayfaları, kullanarak bir HTML belgesinin bölümü öğesi. İstediğiniz sayıda oluşturabilirsiniz HTML belgesindeki öğeler, ancak bunlar arasında ve etiketleri. Dahili CSS'nin bir HTML belgesiyle nasıl kullanılacağını gösteren bir örnek:

Tarzı 4

Satır içi CSS

Satır içi CSS, bir HTML öğesine benzersiz stil kuralları eklemek için kullanılır. Bir HTML öğesi ile birlikte kullanılabilir. stil öznitelik. Stil niteliği şu şekilde CSS özelliklerini içerir: "mülk değeri" noktalı virgülle ayrılmış (;).

İlişkili: CSS Izgarası ile İki Boyutlu Web Sitelerinin Nasıl Oluşturulacağını Öğrenin

Tüm CSS özellikleri tek satırda olmalıdır, yani CSS özellikleri arasında satır sonu olmamalıdır. Satır içi CSS'nin bir HTML belgesiyle nasıl kullanılacağını gösteren bir örnek:

Tarzı 4

Harici CSS

Harici CSS, HTML belgelerine stil uygulamanın en ideal yoludur. Harici bir stil sayfası, ayrı bir belgedeki (.css dosyası) tüm stil kurallarını içerir; bu belge daha sonra etiket. Etkilenen HTML dosyası biçimlendirmede minimum değişiklik gerektirdiğinden, bu yöntem HTML belgelerine stilleri tanımlamak ve uygulamak için en iyi yöntemdir. Harici CSS'nin bir HTML belgesiyle nasıl kullanılacağını gösteren bir örnek:

İle yeni bir CSS dosyası oluşturun .css uzantı. Şimdi bu dosyanın içine aşağıdaki CSS kodunu ekleyin:

.heading {
metin hizalama: merkez;
}
.image-box {
Ekran bloğu;
kenar-sol: otomatik;
sağ kenar boşluğu: otomatik;
kutu gölgesi: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Son olarak, bir HTML belgesi oluşturun ve aşağıdaki kodu bu belgenin içine ekleyin:

Tarzı 4

CSS dosyasının HTML belgesine şu yolla bağlandığını unutmayın: etiket ve href öznitelik.

Yukarıdaki üç yöntemin tümü (Dahili CSS, Satır İçi CSS ve Harici CSS) aynı çıktıyı gösterecektir.

CSS ile Web Sayfanızı Zarif Hale Getirin

CSS kullanarak web sayfanızın stili üzerinde tam kontrole sahip olursunuz. Her HTML öğesini çeşitli CSS özelliklerini kullanarak özelleştirebilirsiniz. Dünyanın her yerinden geliştiriciler CSS güncellemelerine katkıda bulunuyor ve bunu 1996'da piyasaya sürüldüğünden beri yapıyorlar. Bu nedenle, yeni başlayanların öğreneceği çok şey var!

Neyse ki, CSS yeni başlayanlar için uygundur. Birkaç basit komutla başlayıp yaratıcılığınızın sizi nereye götürdüğünü görerek mükemmel bir uygulama yapabilirsiniz.

10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kod Örneği

CSS kullanımı hakkında daha fazla bilgi edinmek ister misiniz? Başlamak için bu temel CSS kod örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.

Sonrakini Oku

Yazar hakkında