Web tasarımınıza benzersiz bir dokunuş eklemek için bu dekoratif stil özelliklerini kullanın.

CSS, web sitelerinizin görünümünü geliştirmek için seçeneklerle doludur; metin ve kutu gölgeleri başlıca örneklerdir. Photoshop gibi görüntü düzenleme yazılımlarında bulunan gölgelere benzer sonuçlar sunarlar.

Ancak CSS gölgeleri nasıl çalışır? Hemen dalalım.

CSS Kutu Gölgesi Nasıl Kullanılır

Altı adede kadar değer içeren tek bir CSS satırı içeren bir CSS kutusu gölgesi uygulayabilirsiniz. Değerlerin sırası, CSS kutu gölgenizin çalışması için çok önemlidir ve şöyle görünür:

box-shadow: offset-x offset-y blur spread color inset;

Sırasıyla değerlerin her birine bir göz atalım.

CSS Kutusu Gölge Konumu

Ofset-x ve ofset-y değerleri, kutu gölgenizin konumunu kontrol eder. Ofset-x değeri, gölgenin yatay konumunu temsil ederken, offset-y dikey ofsettir.

 box-shadow: 10px 10px;

Pozitif değerler, öğenin altında ve sağında bir gölge ile sonuçlanır.

pozitif kutu gölge ofseti

h-ofset ve v-offset için negatif değerler de kullanabilirsiniz:

 box-shadow: -10px -10px;

Negatif bir h-kayması gölgeyi sola hareket ettirirken, negatif bir v-kayması onu yukarı doğru hareket ettirir:

CSS Kutusu Gölge Bulanıklığı

Gördüğünüz gibi, gölgenize h-ofset ve v-offset eklemek, geçiş yumuşatma olmadan düz bir gölge oluşturur. Bulanıklaştırma değeri, CSS kutunuzun gölgesini bulanıklaştırır ve üçüncü bir değer sağlarsanız etkili olur:

box-shadow: 10px 10px 20px;

Bulanıklaştırma değerine eklediğiniz sayı ne kadar yüksek olursa, CSS kutu gölgeniz o kadar bulanık olur. Bu değer negatif olamaz.

CSS Kutusu Gölge Yayılması

Yayılma değeri, konumunu değiştirmeden gölgenizin boyutunu değiştirmenize olanak tanır.

 box-shadow: 10px 10px 20px 30px;

Pozitif bir yayılma değeri, CSS kutunuzun gölgesini büyütür, negatif bir değer ise onu küçültür.

CSS Kutusu Gölge Rengi

CSS kutusu varsayılan olarak öğenin metin rengini gölgeler, ancak bir renk ekleyerek bunu geçersiz kılabilirsiniz:

box-shadow: 10px 10px 20px 10px #0000ff;

Kullandığınız renk, onaltılı kod, RGB kodu veya önceden tanımlanmış renk gibi bir CSS yasal renk biçiminde olmalıdır. Gölgelerinize başlamadan önce onaltılı kodlar ve diğer CSS yasal renk seçenekleri hakkında bilgi edinebilirsiniz .

CSS Kutusu Gölge İçi

CSS kutusunun gölgeleri varsayılan olarak atanan öğelerin dışına düşer. box-shadow özelliğine bir ek ekleyerek, gölgeyi öğenin içinde görüntüleyebilirsiniz.

box-shadow: 10px 10px 20px 10px #0000ff inset;

Bu, önceden tanımlanmış bir metin değeridir; değeri ayarlamak için basitçe ekleyin veya kaldırın.

CSS Metin Gölgesi Nasıl Kullanılır

CSS metin gölgeleri, değiştirilecek daha az değere sahip olmalarına rağmen, kutu gölgeleri gibidir. Bir CSS metin gölgesinin sözdizimi şöyle görünür:

text-shadow: offset-x offset-y blur-radius color;

Fakat bu değerler nasıl çalışır?

CSS Metin Gölge Konumu

CSS metin gölge ofsetleri, aynı kutu gölge değerlerine çok benzer şekilde çalışır:

text-shadow: 10px 10px;

Pozitif değerler, gölgeyi metnin altına ve sağına yerleştirecektir.

metin gölgesi pozitif ofset

Negatif değerler, gölgeyi metnin üstüne ve soluna yerleştirerek tam tersini yapar.

 text-shadow: -10px -10px;

CSS metin gölgenizi mükemmel bir şekilde konumlandırmak için negatif ve pozitif değerleri karıştırabilirsiniz.

CSS Metin Gölge Bulanıklığı Yarıçapı

CSS metin gölge bulanıklık yarıçapı, metninizin arkasındaki gölgeyi bulanıklaştırmanıza olanak tanır.

text-shadow: 10px 10px 10px;

Bu değer için varsayılan değer 0’dır (bulanıklık yok).

CSS Metin Gölge Rengi

Varsayılan olarak, CSS metin gölgeleri metnin rengiyle eşleşir. Metninizin rengini CSS metin gölge özelliğinin sonuna ekleyerek değiştirebilirsiniz.

text-shadow: 10px 10px 10px #0000ff;

CSS kutu gölge renkleri gibi bunun için de bir CSS legal rengi kullanmalısınız.

CSS Kutusu ve Metin Gölge Tasarım Örnekleri

Temel bilgileri anladıktan sonra CSS kutusu ve metin gölgeleri kullanımınızı denemeye başlayabilirsiniz. Aşağıdaki fikirler, bu CSS özelliklerini kullanmak için kendi yaratıcı yollarınızı bulmanız için size ilham vermelidir.

İki CSS Kutu Gölgeli Çift Renkli Kenarlıklar

Bir HTML öğesine birden fazla kutu gölgesi veya metin gölgesi ekleyebilirsiniz. Aralarında virgül olduğu sürece, tek bir özelliğe yeni gölgeler ekleyebilirsiniz.

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

Bu çift renkli kenarlık buna iyi bir örnektir. Zıt konumlara sahip ve bulanıklık/yayılma içermeyen iki CSS kutu gölgesi, mükemmel bir yaratıcı kenarlık oluşturur.

Dramatik Etki için Çift CSS Metin Gölgeleri

Yukarıdaki fikre benzer şekilde, ilginç sonuçlar için metin birden çok metin gölgesi ekleyebilir ve konumlandırabilirsiniz.

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Bu örnek, her ikisi de metne dayalı renk değerlerine sahip olan, üstte gölgeli ve altta gölgeli bir metin satırını gösterir.

İç CSS Kutu Gölgeleri ile Çok Renkli Arka Planlar

CSS, herhangi bir harici dosya olmadan benzersiz ve ilginç varlıklar oluşturacak kadar güçlüdür. Arka plan olarak bir CSS kutusu gölgesi kullanmak buna harika bir örnektir.

box-shadow: 20px 10px 10px 40px #000000 inset, -50px -30px 8px 60px gray inset, 30px 20px 6px 90px lightgray inset;

Bu kutunun beyaz bir arka planı ve farklı renklerde üç ek gölgesi vardır. Benzersiz bir arka plan oluşturmak için gölgeler birbiriyle örtüşür.

Bu efekti daha da geliştirmek, öğenize şık bir CSS arka plan gradyanı eklemek kadar basit bir meseledir.

Yaratıcı Web Tasarımı için CSS Kutu Gölgeleri ve Metin Gölgeleri

Onlarla nasıl çalışılacağını öğrendikten sonra CSS kutusu ve metin gölgelerinin kullanımı kolaydır. Artık kendi tasarımlarınız üzerinde çalışmaya başlamak için ihtiyacınız olan araçlara sahipsiniz, ancak becerilerinizi geliştirmek için CSS’yi araştırmaya devam etmelisiniz.