HTML5 - Kutu Gölgesi

Bu, yeni standartın en çok beklenen özelliklerinden biridir. CSS3 ve bununla birlikte HTML5 birçok bakışı kendine çekmeyi başarıyor, Kutu Gölge belgemizdeki kutuların üzerine gölgeler yerleştirmemize izin veren HTML, böylece sayfada yüzüyormuş gibi bir efekt oluşturur.
Box Shadow öğesi aşağıdaki gibi oluşturulmalıdır:
kutu gölgesi: hofset voffset bulanıklığı yayılmış renkli iç metin
Niteliklerinin her birinin bir işlevi yerine getirdiği durumlarda, bunların her birini ayrıntılı olarak görelim:

• Hoffset: Bir uzunluk değeri olan yatay ofsettir. Pozitif bir değer, Kutu Gölge sağda ise, negatif bir değer Kutu Gölgesini sola kaydırır.

• Vofset: Bir uzunluk değeri olan dikey kaymadır. Pozitif bir değer, Kutu Gölgesini öğenin kutusunun altına kaydırır ve negatif bir değer, Kutu Gölgesini öğenin kutusunun üstüne kaydırır.

• Bulanıklık: (İsteğe bağlı) Bir uzunluk değeri olan gölge tanımının yarıçapını belirtir. Değer ne kadar yüksek olursa, öğe kutusunun kenarı o kadar bulanık kalır. 0 varsayılan değeri için, kutu gölgesinin kenarlığı tam olarak tanımlanmış görünüyor.

• Yayılmış: (İsteğe bağlı) Gölgenin yayılma yarıçapını belirtin, bu bir uzunluk ölçüsüdür. Pozitif bir değer, gölgenin içeren öğenin kutusunun her yönüne genişlemesine neden olur ve negatif bir değer, içeren öğenin gölgesinin büzülmesine neden olur.

• Renk: (Opsiyonel) Gölgenin rengidir. Atlanırsa, tarayıcı renge karar verir.

• Ek: (İsteğe bağlı) Gölgenin uygulandığı elemanın kutusunun içine dökülmesini sağlar.

Nitelikleri öğrendikten sonra, öğrendiklerimizi uygulamaya koymak için hızlıca bir kod örneğine geçelim.

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Gördüğümüz gibi uygulayabiliriz. Kutu Gölge Stil etiketinin içindeki CSS'de bu kod aşağıdaki sonucu üretir:

Bir başka ilginç yön de, aynı Kutu Gölge bildiriminde birkaç gölge belirleyebilmemizdir, örneğin, aşağıdaki kodda ek içine ek bir gölge ekleyeceğiz, bakalım:

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Şimdi her iki gölgenin de elementimizde nasıl görüntülendiğini görelim: