Home-theater-designers
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üleneceğ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 kutu gölgesinin bazı etkili kullanımlarında size yol göstereceğiz.
CSS kutu gölgesi nedir?
NS kutu-gölge özellik, 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:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- yatay ofset: Yatay öteleme pozitifse, gölge kutunun sağında olacaktır. Ve yatay sapma negatifse, gölge kutunun solunda olacaktır.
- dikey ofset: Dikey ofset pozitifse, gölge kutunun altında olacaktır. Dikey sapma negatif ise, gölge kutunun üzerinde olacaktır.
- bulanıklık yarıçapı: Değer ne kadar yüksek olursa, gölge o kadar bulanık olur.
- yayılma yarıçapı: Gölgenin ne kadar yayılması gerektiğini belirtir. Pozitif değerler gölgenin yayılmasını arttırır, negatif değerler ise yayılmasını azaltır.
- Renk: Gölgenin rengini ifade eder. 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. Box-shadow'un en ilginç yanı, box-shadow değerlerini istediğiniz sayıda 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 Sola, Sağına ve Altına Soluk bir kutu gölgesi ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun üç tarafına (sol, sağ ve alt) çok soluk gölgeler ekleyebilirsiniz:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Çıktı:
2. Tüm Taraflara Loş bir kutu gölgesi ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun her tarafına açık gölgeler ekleyebilirsiniz:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Çıktı:
3. Alt ve Sağ Taraflara İnce bir kutu gölgesi ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun alt ve sağ tarafına gölgeler ekleyebilirsiniz:
fortnite xbox olmadan nasıl oynanır
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Çıktı:
4. Tüm Taraflara Karanlık bir kutu gölgesi ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun her tarafına koyu gölge ekleyebilirsiniz:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;Çıktı:
5. Her Tarafa Yayılan Gölge Ekleyin
Hedef HTML öğenizle aşağıdaki komutu kullanarak kutunun her tarafına yayılmış gölge ekleyebilirsiniz:
box-shadow: 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 Bir Kenarlık Gölgesi Ekleyin
Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun her tarafına basit bir kenarlık gölgesi ekleyebilirsiniz:
box-shadow: 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 inset;Çıktı:
7. Alt ve Sol Taraflara bir kutu gölgesi ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun alt ve sol kenarlarına bir gölge ekleyebilirsiniz:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Çıktı:
8. Üst ve Sol Taraflara Loş bir kutu gölgesi, Alt ve Sağ Taraflara Koyu Gölge ekleyin
Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun üst ve sol tarafına açık bir gölgenin yanı sıra kutunun alt ve sağ taraflarına koyu bir gölge ekleyebilirsiniz:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;Çıktı:
9. Her Tarafa İnce, Renkli Bir Kenar Gölgesi Ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun tüm kenarlarına basit renkli bir kenarlık gölgesi ekleyebilirsiniz:
box-shadow: 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 Ekleyin
Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun alt ve sol kenarlarına birden çok renkli kenarlık gölgesi ekleyebilirsiniz:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Çıktı:
Kapasitif dokunmatik ekranların dirençli dokunmatik ekranlara göre en önemli avantajlarından biri,
11. Altına Birden Çok Renkli Kenarlık Gölgesi Ekleyin
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak kutunun altına birden çok renkli kenarlık gölgesi ekleyebilirsiniz:
box-shadow: 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 Ekleyin
Hedef HTML öğenizle aşağıdaki CSS'yi kullanarak kutunun alt ve sağ taraflarına birden çok renkli kenarlık gölgesi ekleyebilirsiniz:
box-shadow: 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 Ekleyin, Aşağıya Gölge Yayın
Hedef HTML öğenizle aşağıdaki kutu gölgesi CSS'sini kullanarak sol ve sağ taraflara açık gölgeler ekleyebilir ve kutunun altına gölge yayabilirsiniz:
box-shadow: 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 HTML Sayfasıyla Entegre Edin
Artık CSS kullanarak harika kutu gölge efektleri eklemeyi biliyorsunuz, bunları HTML öğeleriyle çeşitli şekillerde kolayca entegre edebilirsiniz.
İlgili: CSS Dosyalarını Kontrol Etmek, Temizlemek ve Optimize Etmek için 11 Faydalı Araç
Bunu HTML sayfasının kendisine 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ü öğe. herhangi bir sayıda oluşturabilirsiniz bir HTML belgesindeki öğelerdir, ancak bunlar arasında yer almaları gerekir. ve etiketler. İşte bir HTML belgesiyle Dahili CSS'nin nasıl kullanılacağını gösteren bir örnek:
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
Satır içi CSS
Satır içi CSS, bir HTML öğesine benzersiz stil kuralları eklemek için kullanılır. aracılığıyla bir HTML öğesi ile kullanılabilir. stil bağlanmak. style niteliği, şu şekilde CSS özelliklerini içerir: 'mülk değeri' noktalı virgülle ayrılmış ( ; ).
İlgili: 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. Bir HTML belgesiyle satır içi CSS'nin nasıl kullanılacağını gösteren bir örnek:
CSS box-shadow
Style 4
Harici CSS
Harici CSS, stilleri HTML belgelerine uygulamanın en ideal yoludur. Harici bir stil sayfası, tüm stil kurallarını ayrı bir belgede (.css dosyası) içerir, bu belge daha sonra HTML belgesine şu şekilde bağlanır: etiket. Etkilenen HTML dosyası biçimlendirmede minimum değişiklik gerektirdiğinden, bu yöntem HTML belgelerine stiller tanımlamak ve uygulamak için en iyi yöntemdir. Bir HTML belgesiyle harici CSS'nin nasıl kullanılacağını gösteren bir örnek:
ile yeni bir CSS dosyası oluşturun. .css uzantı. Şimdi bu dosyanın içine aşağıdaki CSS kodunu ekleyin:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}Son olarak, bir HTML belgesi oluşturun ve bu belgenin içine aşağıdaki kodu ekleyin:
facebook uygulamasında beni takip edenler
CSS box-shadow
Style 4
CSS dosyasının HTML belgesi ile bağlantılı olduğunu unutmayın. etiket ve href bağlanmak.
Yukarıdaki üç yöntemin tümü (Dahili CSS, Satır İçi CSS ve Harici CSS) aynı çıktıyı görüntüler-
Web Sayfanızı CSS ile Zarif Hale Getirin
CSS kullanarak, web sayfanızın stili üzerinde tam kontrole sahip olursunuz. Çeşitli CSS özelliklerini kullanarak her HTML öğesini özelleştirebilirsiniz. Dünyanın her yerinden geliştiriciler CSS güncellemelerine katkıda bulunuyorlar ve 1996'da piyasaya sürülmesinden bu yana bunu yapıyorlar. Bu nedenle, yeni başlayanlar için öğrenecek ç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 alıştırma yapabilirsiniz.
Paylaş Paylaş Cıvıldamak E-posta 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu ÖrneğiCSS ile ilgili yardıma mı ihtiyacınız var? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.
Sonrakini Oku İlgili konular- Programlama
- Web Tasarım
- CSS
Yuvraj, Hindistan Delhi Üniversitesi'nde Bilgisayar Bilimleri lisans öğrencisidir. Full Stack Web Geliştirme konusunda tutkulu. Yazmadığı zamanlarda farklı teknolojilerin derinliğini keşfediyor.
Yuvraj Chandra'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın