CSS, web sitelerinizin görünümünü iyileş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 Kutusu Gölgesi Nasıl Kullanılır?
Altı adede kadar değer aralığı içeren tek bir CSS satırıyla bir CSS kutusu gölgesi uygulayabilirsiniz. Değerlerin sırası, CSS kutusu gölgenizin çalışması için çok önemlidir ve şöyle görünür:
kutu-gölge: ofset-x ofset-y bulanıklık yayılmış renk eki;Sırayla 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, ofset-y dikey ofsettir.
kutu gölgesi: 10px 10px;Pozitif değerler, öğenin altında ve sağında bir gölge oluşmasına neden olur.
h-offset ve v-offset için negatif değerler de kullanabilirsiniz:
kutu gölgesi: -10px -10px;Negatif bir h-offset, gölgeyi sola taşırken, negatif bir v-offset yukarı doğru hareket ettirir:
CSS Kutusu Gölge Bulanıklığı
Gördüğünüz gibi, gölgenize h-offset ve v-offset eklemek, herhangi bir geçiş yumuşatma olmaksızın düz bir gölge oluşturur. Bulanıklaştırma değeri, CSS kutusu gölgenizi bulanıklaştırır ve üçüncü bir değer sağlarsanız etkili olur:
kutu gölgesi: 10px 10px 20px;Bulanıklık değerine eklediğiniz sayı ne kadar yüksek olursa, CSS kutusu gölgeniz o kadar bulanık olur. Bu değer negatif olamaz.
CSS Kutusu Gölge Dağılımı
Yayılma değeri, konumunu değiştirmeden gölgenizin boyutunu değiştirmenize olanak tanır.
kutu gölgesi: 10px 10px 20px 30px;Pozitif bir yayılma değeri, CSS kutunuzun gölgesini büyütürken, negatif bir değer onu küçültür.
CSS Kutusu Gölge Rengi
CSS kutusu varsayılan olarak öğenin metin rengine göre gölgelenir, ancak bir renk ekleyerek bunu geçersiz kılabilirsiniz:
kutu gölgesi: 10piksel 10piksel 20piksel 10piksel #0000ff;Kullandığınız renk, onaltılık kod, RGB kodu veya önceden tanımlanmış renk gibi bir CSS yasal renk biçiminde olmalıdır. Yapabilirsiniz onaltılık kodlar hakkında bilgi edinin ve gölgelerinize başlamadan önce diğer CSS yasal renk seçenekleri.
CSS Kutusu Gölge Ek
CSS kutusu gölgeleri varsayılan olarak atandıkları öğenin dışına düşer. box-shadow özelliğine bir iç metin ekleyerek, gölgeyi öğenin içinde görüntüleyebilirsiniz.
kutu gölgesi: 10piksel 10piksel 20piksel 10piksel #0000ff ek;Bu önceden tanımlanmış bir metin değeridir; değeri ayarlamak için eklemeniz veya kaldırmanız yeterlidir.
CSS Metin Gölgesi Nasıl Kullanılır?
CSS metin gölgeleri, değiştirilecek daha az değerleri olmasına rağmen kutu gölgeleri gibidir. Bir CSS metin gölgesinin sözdizimi şöyle görünür:
metin-gölge: ofset-x ofset-y bulanıklık-yarıçap rengi;Ancak 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:
metin gölgesi: 10px 10px;Pozitif değerler, gölgeyi metnin altına ve sağına yerleştirir.
Negatif değerler, gölgeyi metnin üstüne ve soluna yerleştirerek tersini yapar.
metin gölgesi: -10px -10px;CSS metin gölgenizi mükemmel ş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ıklaştırma yarıçapı, metninizin arkasındaki gölgeyi bulanıklaştırmanıza olanak tanır.
metin gölgesi: 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 text shadow özelliğinin sonuna ekleyerek değiştirebilirsiniz.
Metin gölgesi: 10piksel 10piksel 10piksel #0000ff;CSS kutusu gölge renkleri gibi, bunun için de bir CSS yasal rengi kullanmalısınız.
CSS Kutusu ve Metin Gölge Tasarımı Örnekleri
Temel bilgileri anladığınızda, CSS kutusu ve metin gölgeleri kullanımınızı denemeye başlayabilirsiniz. Aşağıdaki fikirler, bu CSS özelliklerini kullanmanın kendi yaratıcı yollarını bulmanız için size ilham vermelidir.
İki CSS Kutusu 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.
kutu gölgesi: 30piksel 30piksel#0000ff, -30px-30px 0piksel#00ff00;Bu çift renkli kenarlık buna güzel bir örnektir. Zıt konumlara sahip ve bulanıklık/yayılma olmayan iki CSS kutusu gölgesi, mükemmel bir yaratıcı kenarlık oluşturur.
Dramatik Efekt için Çift CSS Metin Gölgeleri
Yukarıdaki fikre benzer şekilde, ilginç sonuçlar için metni birden çok metin gölgesi ekleyebilir ve konumlandırabilirsiniz.
metin gölgesi: 35 piksel 20 piksel 4 piksel koyu gri, -35 piksel -20 piksel 4 piksel koyu gri;Bu örnek, her ikisi de metin tabanlı renk değerlerine sahip olan, üzerinde bir gölge ve altında bir gölge bulunan bir metin satırını gösterir.
Ek CSS Kutusu 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 ek bir CSS kutusu gölgesi kullanmak buna harika bir örnektir.
kutu gölgesi: 20piksel 10piksel 10piksel 40piksel #000000 ek, -50px -30px 8px 60px gri ek, 30px 20px 6px 90px açık gri ek;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 etkiyi daha da artırmak basit bir meseledir. şık bir CSS arka plan gradyanı ekleme öğenize.
Yaratıcı Web Tasarımı için CSS Kutusu Gölgeleri ve Metin Gölgeleri
Onlarla nasıl çalışılacağını öğrendikten sonra CSS kutusu ve metin gölgelerini kullanmak 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.
