Sitemizde 29 Kategoriye 2398 Eğitim Eklenmiştir, 4172 adet yorum bulunmaktadır.

CSS'de Kutu Gölgeleri Örnekleri

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

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.

Yazı Hakkında Ne Düşünüyorsunuz?


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

Daha Fazla Web Tasarım Eğitim Dersleri İçin Web Tasarım Eğitim Kategorisini İnceleyiniz…
#HTML #CSSde #Kutu #Gölgeleri #Nasıl #Oluşturulur

Van Web Tasarım

Sektörel Firma Rehberi

Sektörel Nakliyat Firmaları Rehberi

Van Son Dakika Haberleri

Tavsiye İçerik

HTML Body Örnek Kullanımı

HTML body Kullanımı

HTML body Kullanımı etiketi, bir web sayfası içeriğini (metin, resimler, bağlantılar vb.) tanımlar. öğesinden sonra …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.