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:

Kutu Gölgeleri Kartları Nasıl Etkiler?

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

İ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:

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.