HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur – Bilişim & Programlama
CSS Dersleri

HTML ve CSS’de Kutu Gölgeleri Nasıl Oluşturulur

HTML’de bir kart tasarladığınızda, kutu gölgeleri kartların öne çıkmasında hayati bir rol oynar.

İster bir fiyatlandırma sayfası kartı, ister bir e-ticaret ürün listeleme kartı olsun, kutu gölgeleri, bu kartların iletmesi gereken görünümü ve mesajın tamamını oluşturabilir veya bozabilir.

Bugün, güzel kutu gölgelerinin nasıl yapıldığını ve onları nasıl öne çıkaracağımızı anlayalım.

box-shadow sözdizimi:

Örnek:

Yukarıdaki kod parçasında 5 önemli kısım bulunmaktadır. Ne demek istediklerini anlayalım:

  • x-konum : Yukarıdaki örnekte 1 piksel. Bu, gölgenin yatay olarak karttan ne kadar uzakta olacağını gösterir. Olumlu, sağda, olumsuz solda demektir.
  • y-konum : Yukarıdaki örnekte 2 piksel. Bu, gölgenin karttan dikey olarak ne kadar uzakta olacağını gösterir. Olumlu, aşağı, olumsuz, yukarı anlamına gelir.
  • blur : Yukarıdaki örnekte 3 piksel. Bu, gölgenin ne kadar bulanık görüneceğini gösterir. Daha yüksek yarıçap, daha fazla bulanıklık anlamına gelir.
  • dağılma : Yukarıdaki örnekte 4 piksel. Bu, gölgenin her yöne ne kadar yayılacağını gösterir.
  • renk : yukarıdaki örnekte rgba(20,20,20,0.4). Bu, gölgenin rengini belirler. Sağlanmazsa, varsayılan metin rengi kullanılacaktır. Renk değerleri Hex, RGB veya HSL olabilir.

Yukarıdaki kodu çalışırken görelim:

CSS'de Kutu Gölgeleri Örnekleri
CSS’de Kutu Gölgeleri Örnekleri

Kutu Gölgeleri Kartları Nasıl Etkiler?

Buradaki iki örneği göz önünde bulundurun:

CSS’de Kutu Gölgeleri Örnekleri

İlk örnekte kutu gölgesi yokken ikinci örnekte kutu gölgesi var. İkincisi ekrandan fırlıyor gibi görünüyor (bu, birincisine kıyasla biraz öne çıkmasını sağlıyor.)

Bu nedenle, kartlarınızın öne çıkmasına ihtiyacınız varsa, kutu gölgeleri onları gerçekten öne çıkarmanıza yardımcı olabilir.

Diyelim ki bir e-ticaret uygulaması geliştiriyorsunuz ve ürün kartlarınızın öne çıkmasını istiyorsunuz. Kutu gölgeleri bunu başarmanıza ve müşterilerinizin ürünlerinizi fark etmelerine yardımcı olabilir.

Web uygulamanız kartlarınızın ince olmasını gerektirse bile, kartlara daha hoş bir estetik his vermek için her zaman ince kutu gölgeleriyle gidebilirsiniz.

Kutu Gölgelerinin Çoklu Katmanları Nasıl Kullanılır
Kartlarınızda birden fazla kutu gölgesi katmanı kullanabilirsiniz – ve muhtemelen bunu çok yapacaksınız.

Birden çok kutu gölgesi katmanı oluşturmaya yönelik sözdizimi şöyle görünür:

CSS'de Kutu Gölgeleri Örnekleri
CSS’de Kutu Gölgeleri Örnekleri

Renkli Kutu Gölgeleri Nasıl Kullanılır

Renkler, kartlarınızı görsel olarak öne çıkararak size yardımcı olsa da, her zaman en iyi seçenek değildir. Bazen düz gri bir gölge, beyaz bir arka plan üzerinde harikalar yaratır. Ancak bu tamamen web sitenizin temasına bağlıdır.

Çok sayıda boşluk ve genel metin içeriği olan basit bir blog uygulaması düşünün. Web sitesinde blogları görüntüleyen bir kartınız varsa, en iyi yol, kartlara iyi bir pop vermek için basit ama incelikli bir kutu gölgesi eklemek olacaktır.

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.