Özel CSS renk gölgesine sahip yarı saydam fotoğraf. CSS'de İç Gölgeler

Standardın ortaya çıkışıyla CSS3 istenen görsel efekti vermek için bir öğenin kutusuna bir veya daha fazla gölge eklemeyi kolaylaştırdığından web geliştiricileri arasında yaygın olarak kullanılan box-shadow özelliğini tanıttı.

Önceki yazımızda border-radius özelliğine baktık, onu kullanarak köşeleri yuvarlatılmış bir gölge elde edebilirsiniz. Bir metin gölgesine (metin-gölge) benzetilerek, birden fazla gölge oluşturabilirsiniz, bunlar aşağıdakilere göre uygulanır: Z ekseniönden arkaya (ilk verilen gölge üstte olacak şekilde).

Bu modern özelliğin sözdizimine daha yakından bakalım:

Bu özelliğin olası değerlerini sırasıyla ele alalım:

Anlam	Tanım
hiçbiri	Gölge görüntülenmiyor. Bu varsayılan değerdir.
ek	İsteğe bağlı değer. Bu değer belirtilmezse (varsayılan), gölge elemanın dışında olacak ve elemanın şişkin olması efektini yaratacaktır. Anahtar kelime (değer) eki mevcutsa, gölge öğenin içine düşecek ve çentikli bir etki yaratacaktır. Başka bir deyişle dış gölgeden iç gölgeye geçiştir.
h-gölge	Gerekli değer. Yatay gölgenin konumunu ayarlar. Negatif değerlere izin verilir.
v-gölge	Gerekli değer. Dikey gölgenin konumunu ayarlar. Negatif değerlere izin verilir.
bulanıklık yarıçapı	İsteğe bağlı değer. Bulanıklaştırma yarıçapını ayarlar. Değer ne kadar yüksek olursa, bulanıklık da o kadar büyük olur ve gölge daha büyük ve daha açık hale gelir. Değer belirtilmezse değer 0 (keskin - belirgin gölgeler) olacaktır. Negatif değerlere izin verilmez.
yayılma yarıçapı	İsteğe bağlı değer. Gölge boyutu (gölge uzatma yarıçapı). Pozitif değerlerde gölge genişleyecek, negatif değerlerde ise küçülecektir. Hiçbir değer belirtilmezse değer 0 olacaktır (gölge, öğenin boyutuna karşılık gelir).
renk	İsteğe bağlı değer. Gölgenin rengini tanımlar (HEX, RGB, RGBA, HSL, HSLA, "Önceden tanımlanmış renkler"). Varsayılan değer siyahtır.

Öğelere gölge oluşturmak için anlamanız gereken ana noktalar şunlardır:

Box-shadow özelliğinin şu anda tüm modern tarayıcılar tarafından desteklendiğine dikkatinizi çekmek isterim:

Mülk			Opera		IExplorer	Kenar
kutu gölgesi	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Mobil cihazlar da dahil olmak üzere bazı tarayıcılara yönelik desteği genişletmek istiyorsanız iOS 3.2 - 4.3 Ve Android 2.1 - 3, bu durumda üretici öneklerinin kullanılması ve aşağıdaki sözdiziminin kullanılması önerilir (makaledeki örneklerde sözdizimi yalnızca modern tarayıcılar için kullanılacaktır):

-webkit-box-shadow : değer; /* Safari 3.1 - 4, IOS 3.2 - 4.3 ve Android 2.1 - 3 */-moz-box-shadow : değer; /* Firefox 3.5 - 3.6 */ box-shadow : değer ; /* yukarıdaki tablo */

Haydi pratiğe geçelim ve öğelere bir gölge eklediğimiz basit bir örnekle başlayalım:

Örneğimizin sonucu:

Birden Çok Gölge Kullanma

Aşağıdaki örnekte, birden fazla gölge kullanıldığında elde edilebilecek ilginç renk karıştırma efektini düşünmeyi öneriyorum:

• İki sabit genişlik ve yükseklikte bloklar (15em ve 10em), tüm kenarlara dolgu (2em) eklendi ve blokları hizalayabilmek için blok hattı olacak şekilde ayarlandı.
• İçin Birinci sınıfla bloke et .Ölçek belirttik dörtÖğenin her tarafında farklı gölgelere sahip olması için farklı yatay ve dikey gölge değerlerine sahip gölgeler. Tüm gölgeler için bulanıklık yarıçapı aynı olarak ayarlandı. Her gölgenin rengi farklıdır ve önceden tanımlanmış renkler kullanılarak belirtilir.
• İçin ikinci sınıfla bloke et .test2 belirttik dört Farklı yatay ve dikey gölge değerlerine sahip gölgeler. Tüm gölgeler için bulanıklık yarıçapı aynı olarak ayarlandı, gölge uzaması negatif olarak ayarlandı, bu da gölgenin kendisinde bir azalmaya yol açtı. Her gölgenin rengi farklıdır ve RGBA sistemi kullanılarak belirtilir.

Örneğimizin sonucu:

Görüntüler için gölgeleri kullanma

Bu makalenin son örneği, görüntüler için gölgelerin kullanımına odaklanacaktır. HTML öğesinin gölgesini doğrudan belirleyebileceğiniz gerçeğine hemen dikkatinizi çekmek isterim. İşe yaramayacak ama ilgilendiğimiz öğenin arka planı olarak bir görsel belirleyip ardından ihtiyacımız olan gölgeyi bu öğeye atama şansımız var.

"" Ders kitabı makalesinde arka plan görselleriyle çalışmayı ayrıntılı olarak ele alacağız ve şimdi gölge kullanma çalışmasına son vermek için buna yüzeysel olarak değineceğiz ve görseli aşağıda bir öğenin arka planı olarak kullanacağız. örnek:

• İki sabit genişlik ve yükseklikte bloklar (237px ve 232px), tüm kenarlar için kenar boşlukları eklendi (2em) ve blokları hizalayabilmek için blok çizgisi olacak şekilde ayarlayın. Görüntünün boyutuna 237 piksele 232 piksellik blok boyutunu ayarladık, böylece eğitimin bu aşamasında görüntüyü öğeye uyacak şekilde ölçeklendirmek ve daha sonraki bir aşamada incelenmesi planlanan CSS özelliklerini etkilemek zorunda kalmadık. (Ders kitabı makalesinde " ").
• İçin Birinci sınıfla bloke et .Ölçek Yatay ve dikey gölge için sıfır değeri belirledik ama aynı zamanda 50px bulanıklık yarıçapı da belirledik ve 10px uzatma yarıçapı ayarlayarak genişlettik. Gölge rengi önceden tanımlanmış bir renkle (mor) belirtildi. Ayrıca bildirimde gölgenin öğenin içine düşmesine neden olan inset anahtar sözcüğünü de belirttik. Yani elementin iç gölgesini oluşturduk.
• İçin ikinci sınıfla bloke et .test2 Yatay ve dikey gölge için sıfır değeri belirledik ama aynı zamanda 50px bulanıklık yarıçapı da belirledik ve 10px uzatma yarıçapı ayarlayarak genişlettik. Gölge rengi RGBA modunda belirtilir.

Örneğimizin sonucu:

Pirinç. 98 CSS'deki görüntüler için gölge kullanma örneği (box-shadow özelliği)

Konuyla ilgili sorular ve görevler

Bir sonraki konuya geçmeden önce pratik ödevini tamamlayın:

Alıştırma görevini tamamlamakta zorluk yaşıyorsanız, örneği her zaman ayrı bir pencerede açabilir ve hangi CSS kodunun kullanıldığını anlamak için sayfayı inceleyebilirsiniz.

2016-2019 Denis Bolshakov, siteye ilişkin yorum ve önerilerinizi [email protected] adresine gönderebilirsiniz.

Düzenli gölgelerin kutu gölgesi veya metin gölgesi kullanılarak uygulanması kolaydır. Peki ya iç gölgeler yapmanız gerekiyorsa? Bu makalede, bu gölgelerin yalnızca birkaç satır kodla nasıl oluşturulacağı anlatılmaktadır.

Sözdizimi

Öncelikle CSS'de gölgeleri uygulamanın iki ana yoluna bakalım.

kutu gölgesi

Tasarım kutu gölgesi birkaç farklı anlam içerir:

Yatay ofset Ve dikey ofset- Sırasıyla yatay ve dikey yer değiştirme. Bu değerler nesnenin gölgesini hangi yöne düşüreceğini belirtir:

Bulanıklaştırma yarıçapı Ve yayılma yarıçapı biraz daha karmaşık. Fark ne? İki öğeli bir örneğe bakalım; burada değerler bulanıklık yarıçapı farklılık:

Gölgenin kenarı basitçe bulanıktır. Farklı değerlerle yayılma yarıçapışunları görüyoruz:

Bu durumda gölgenin geniş bir alana dağıldığını görüyoruz. Bir değer belirtmezseniz bulanıklık yarıçapı Ve yayılma yarıçapı o zaman 0'a eşit olacaklar.

Metin gölgesi

Sözdizimi şuna çok benzer: kutu gölgesi:

Anlamları benzer ama değil yayılmış gölge. Kullanım örneği:

Kutu gölgesine eklenmiş

Nesnenin içindeki gölgeyi "çevirmek" için şunu eklemeniz gerekir: ek CSS'de:

Temel kutu gölgesi sözdizimini anladıktan sonra iç gölgelerin nasıl uygulanacağını anlamak çok kolaydır. Değerler hala aynı, renk ekleyebilirsiniz (hex cinsinden RGB):

Renk RGB formatındadır, alfa değeri gölgenin şeffaflığından sorumludur:

Gölgeli görüntüler

Bir görüntüye iç gölge eklemek normal gölge eklemekten biraz daha zordur div. Başlangıç ​​olarak, her zamanki görsel kodunu burada bulabilirsiniz:

Bunun gibi bir gölge ekleyebileceğinizi varsaymak mantıklıdır:

resim (
kutu gölgesi: iç metin 0px 0px 10px rgba(0,0,0,0.5);
}

Ancak gölge görünmüyor:

Bu sorunu çözmenin, her birinin artıları ve eksileri olan birkaç yolu vardır. Bunlardan ikisine bakalım. Birincisi, görüntüyü düzenli bir şekilde sarmak div:

Div (
yükseklik: 200 piksel;
genişlik: 400 piksel;
}

img(
yükseklik: 200 piksel;
genişlik: 400 piksel;
konum: göreceli;
z-endeksi: -2;
}

Her şey çalışıyor ancak biraz fazladan HTML ve CSS işaretlemesi eklememiz gerekiyor. İkinci yol, görüntüyü istenen bloğun arka planı olarak ayarlamaktır:

Div (
yükseklik: 200 piksel;
genişlik: 400 piksel;
arka plan: url(http://lorempixum.com/400/200/transport/2);
kutu gölgesi: iç metin 0px 0px 10px rgba(0,0,0,0.9);
}

İç gölgeleri kullanırken şunlar olabilir:

Metin gölgesine ek

Bir iç metin gölgesi uygulamak için koda eklemeniz yeterlidir ekçalışmıyor:

Çözmek için önce başlığa uygulayın h1 Koyu bir arka plan ve açık bir gölge ayarlayın:

H1 (
arka plan rengi: #565656;
renk: şeffaf;
}

İşte olanlar:

Gizli bir içerik ekleme arka plan klibi bu, metnin ötesine geçen her şeyi keser (koyu bir arka plana kadar):

H1 (
arka plan rengi: #565656;
renk: şeffaf;
metin gölgesi: 0px 2px 3px rgba(255,255,255,0,5);
-webkit-arka plan-klibi: metin;
-moz-arka plan-klibi: metin;
arka plan klibi: metin;
}

Neredeyse tam ihtiyacımız olan şey ortaya çıktı. Şimdi metni biraz koyulaştırıyoruz (alfa), hepsi bu.

Bir sayfadaki blok öğesinin altındaki gölge genellikle üç boyutlu bir etki yaratmak, öğeye dikkat çekmek veya bir tasarımın parçası olarak kullanılır. Öğelerin altındaki küçük bir gölge de sayfaya hacim ve derinlik kazandırır.

Gölge eklemek için altı değere sahip olan ve yalnızca ikisi gerekli olan box-shadow özelliğini kullanın. İncirde. Şekil 1, box-shadow özelliğini tüm olası değerlerle birlikte, bunları tanımlayacak şekilde numaralandırılmış olarak göstermektedir.

Pirinç. 1. Kutu gölgesi özellik değerleri

1. inset anahtar sözcüğü öğenin içindeki gölgeyi ayarlar;
2. gölgeyi yatay olarak kaydırın (5 piksel - sağa, -5 piksel - sola);
3. dikey kaydırma (5 piksel - aşağı, -5 piksel - yukarı);
4. gölge bulanıklığı yarıçapı (0 - keskin gölge);
5. gölge uzatma (5 piksel - uzatma, -5 piksel - küçültme);
6. gölge rengi.

Yalnızca yatay ve dikey kaydırmayı belirtmek gerekir; diğer tüm parametreler varsayılan olarak alınacaktır. Bu durumda gölge, bulanıklık veya siyah olmadan keskin olacaktır.

Farklı parametreleri ve değerlerini birleştirerek çok çeşitli gölge türleri elde edebilirsiniz. Masada Şekil 1 kodu ve onun yol açtığı sonucu göstermektedir.

Masa 1. Gölge parametrelerinin kombinasyonları

Kod	Sonuç	Tanım
kutu gölgesi: 5px 5px;		Sağda ve altta keskin gölge.
kutu gölgesi: -5px -5px;		Solda ve üstte keskin gölge.
kutu gölgesi: 0 0 5px;		Bir öğenin etrafındaki bulanık gölge.
kutu gölgesi: 0 0 5 piksel 2 piksel;		Gölgeyi 2 piksel genişletin.
kutu gölgesi: 0 0 5px 2px kırmızı;		Öğenin etrafında kırmızı parıltı.
kutu gölgesi: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Yarı saydam gölge.
kutu gölgesi: ek 0 0 6px;		İçerideki gölge.

Tablodan da görülebileceği gibi, uygun olmasına rağmen gölge kaymasının piksel cinsinden belirtilmesi gerekmez. Gölgenin rengi mevcut herhangi bir formatta belirlenebilir; örneğin yarı saydam bir gölge elde etmek için RGBA formatı uygundur; böyle bir gölge her arka planda iyi görünecektir. Örnek 1 bunun nasıl yapılacağını göstermektedir.

Örnek 1: Arka plan resmindeki gölge

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2. Gölge bloğun köşelerinin yuvarlatılmasını takip eder.

Pirinç. 2. Arka plan resminde gölgenin görünmesi

"Geniş" bir gölge eklerken, bunun tarayıcı penceresinin görünen sınırlarının ötesine uzanabileceğini ve dolayısıyla yatay bir kaydırma çubuğunun görünmesine neden olabileceğini unutmayın.

Sahte öğelere gölgeler de eklenebilir; bu bazen karmaşık düzenler için gereklidir. İncirde. Şekil 3, üzerine gölge eklenmiş bir başlık bloğunu göstermektedir. Kavşakta herhangi bir çizgiden kaçınmak için ::after sözde elemanını kullanmanız ve ona bir gölge eklemeniz gerekir.

Pirinç. 3. Gölgeli blok

Örnek 2 böyle bir bloğun oluşturulmasını göstermektedir.

Örnek 2. Gölgeli blok

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bir öğenin birden fazla gölgesi olabilir, ancak aynı anda birden fazla gölgesi olabilir; bunların parametreleri, box-shadow özelliğinin değerinde virgüllerle ayrılmış olarak listelenir. Örnek 3, tüm görüntülere nasıl çift gölge ekleneceğini göstermektedir.

Örnek 2. Gölgeli blok

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 4.

Pirinç. 4. Çift Gölge Görüntüsü

İlk gölge, görüntünün solunda 20 piksel bulanıklık yarıçapıyla görüntülenir, boyutu dördüncü parametre (-20 piksel) kadar azaltılır. İkinci gölgenin parametreleri ondalık noktadan sonra gösterilir; gölge resmin sağında görüntülenir ve simetri açısından da küçültülür.

Box-shadow özelliği, bir öğeye bir veya daha fazla gölge ekler. Gölge, öğenin belirtilen mesafeye göre kaydırılmış bir kopyasıdır. Gölgeler dış veya iç, bulanık veya düz olabilir ve köşeleri yuvarlatılmış blokların ana hatlarını takip edebilir. İç metin anahtar sözcüğü kullanılarak öğenin içinde gölgeler oluşturulur ve öğe görsel olarak hacimli veya basık hale getirilir.

box-shadow özelliğini kullanarak kutu gölgesi nasıl yapılır

Tarayıcı desteği

yani: 9.0
Kenar: 12.0
Firefox: 4,0, 3,5 -moz-
Krom: 10.0, 4.0 -web kiti-
Safari: 5.1, 3.1 -web kiti-
Opera: 11.5
iOS Safari'si: 5.1, 3.1 -web kiti-
Android Tarayıcı: 4.0, 2.1 -web kiti-

1. Box-shadow özelliği söz dizimi

Her gölge bir ila beş parametre alır: yatay uzaklık, dikey uzaklık, bulanıklık yarıçapı (isteğe bağlı), yayılma yarıçapı (isteğe bağlı) ve gölge rengi. Gölgeler düzeni etkilemez ve bitişik öğelerle veya bunların gölgeleriyle örtüşebilir. Mülkiyet miras alınmaz.

Pirinç. 1. Box-shadow özelliği söz dizimi

Değerler:
x-ofseti	Gerekli değer. Gölgenin bloğa göre yatay konumu. Hem pozitif hem de negatif değerler alabilir; pozitif olan gölgeyi bloğun sağına, negatif olan ise sola kaydırır.
y-ofseti	Gerekli değer. Gölgenin bloğa göre dikey uzaklığı. Hem pozitif hem negatif değerler alabilir, pozitif gölgeyi aşağı doğru hareket ettirir, negatif ise gölgeyi yukarı taşır.
bulanıklık	İsteğe bağlı değer. Gölgenin bulanıklık yarıçapını belirler. Yarıçap ne kadar büyük olursa gölge o kadar bulanık olur. Yalnızca pozitif değerler kullanılabilir.
germe	İsteğe bağlı, bulanık kenarlar arasındaki katı kısmı kalınlaştırarak gölgeyi genişletir. Uzunluk birimleri (px vb.) cinsinden belirtilen hem pozitif hem de negatif değerleri kabul eder.
renk	İsteğe bağlı değer. Varsayılan olarak gölge siyahtır. Değeri ayarlamak için aşağıdaki renkli kayıt formatlarını kullanabilirsiniz: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . Safari için gölge renginin belirtilmesi gerekmektedir.
ek	Bloğun içinde bir gölge oluşturur.
hiçbiri	Varsayılan değer gölge olmadığı anlamına gelir.
ilk	Özellik değerini varsayılan değere ayarlar.
miras almak	Özellik değerini üst öğeden devralır.

2. Gölge örneklerini engelleyin

2.1. İç gölge

.example-shadow-1 ( arka plan: #e6e3df; text-align: center; ) .example-shadow-1 span ( kenar boşluğu: 50 piksel; yükseklik: 100 piksel; genişlik: 200 piksel; ekran: satır içi blok; kutu gölgesi: iç metin 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1); )

2.2. Bir tarafta düz gölge

düz

düz

.example-shadow-2 ( arka plan: bej; metin hizalama: merkez; ) .example-shadow-2 a ( ekran: satır içi blok; kenarlık yarıçapı: 5 piksel; dolgu: 15 piksel 35 piksel; yazı tipi boyutu: 22 piksel; kenar boşluğu : 20px; renk: beyaz; arka plan: #55acee; ​​kutu gölgesi: 0 5px 0 #3C93D5; ) .example-shadow-2 a:hover ( arka plan: #6FC6FF; )

CSS'deki gölgeler, ister kutu gölgesi ister metin gölgesi olsun, oldukça hızlı ve kolay bir şekilde uygulanabilir. Peki iç gölge uygulamak gerçekten bu kadar kolay mı? Bir iç kutu gölgesi oluşturabilir misiniz? Peki metni kullanırken aynı göreve ne dersiniz?

Bugün size sadece birkaç satır kod içeren, iç gölgeyi uygulamanın çok basit bir yolundan bahsetmek istiyoruz. Size hem kutu hem de metin gölgelerinden ve iç gölge oluşturmak için bunları nasıl değiştirebileceğinizden bahsedeceğiz.

Bu makaleyi beğendin mi? Sitemize abone olmayı unutmayın.

Gölge sözdizimi

Gömülü gölgelere geçmeden önce, iki farklı türde CSS gölgesi oluşturmaya yönelik temel sözdizimine bakalım. Bunu daha önce yapmış olsanız bile hafızanızı tazeleyelim.

kutu gölgesi

Kutu gölgeleri veya kutu gölgeleri muhtemelen CSS'deki en popüler gölgelerden biridir. Buradaki potansiyel uygulamalar büyük ölçüde farklılık gösterir ve geliştiriciler sıklıkla kendi yaklaşımlarını ve uygulamalarını kullanır. Kutu gölgesi sözdizimi bir bütün olarak oldukça karmaşıktır ve 6 ayrı değer içerir. En yaygın 5 uygulama örneğine bakarak başlayacağız.

Gördüğünüz gibi yukarıdaki liste yatay ofset, dikey ofset, bulanıklık yarıçapı, gölge yayılma düzeyi ve renk değerlerinin bir listesidir. İlk iki değer - yatay ve dikey sapma - çok açıktır. Pozitif değerler gölgeyi sırasıyla sağa ve aşağı hareket ettirecek, negatif değerler ise gölgeyi sola ve yukarıya hareket ettirecektir. Her iki anlamın bir örneğine bakalım:

Bulanıklaştırma yarıçapı ve yayılma yarıçapından sorumlu olan son iki değer biraz daha karmaşıktır. Muhtemelen merak ediyorsunuz, fark nedir? Buna cevap vermek için öncelikle muhtemelen zaten aşina olduğunuz bir şeye bakalım: bulanıklık yarıçapı.

Gördüğünüz gibi bulanıklık yarıçapını kullanmazsak keskin kenarlı bir gölge yapabileceğiz ancak büyük bir değer çok bulanık kenarlar verir. Çok basit değil mi? Peki yayılma yarıçapı parametresi ne olacak? Buradaki fark nedir? Bir resim durumu bin kelimeden daha iyi açıklayacaktır:

Gördüğünüz gibi yayılma yarıçapı, bulanıklık seviyesini etkilemeden gölge alanını artırmamıza veya azaltmamıza olanak tanıyor. Bu parametreyi gölgenin boyutu olarak kabul ederseniz yanılmanız mümkün değildir.

Bulanıklaştırma ve yayma kullanmazsanız bu varsayılan değerler 0'da kalacaktır. İnternetteki örnekler üzerinde biraz araştırma yaparsanız demo dosyalarının çoğunun spread seçeneğini kullanmadığını fark edeceksiniz. Ayrıca, tarayıcılar arası sorunları önlemek için box-shadow sürümünün genellikle –webkit önekiyle eklendiğini unutmayın.

Metin gölgesi

Artık kutu gölgesinin ne yaptığını ve ne olduğunu tam olarak bildiğimize göre, başka bir CSS gölgesi türünün sözdizimini öğrenmeye geçmenin zamanı geldi: text-shadow. Neyse ki buradaki sözdizimi kutu gölgelerine göre çok daha basittir.

Gördüğünüz gibi çoğu anlam aynı, yani birini anlarsanız diğerini de anlayacaksınız. İlginç olan şu ki burada gölgenin yarıçapını değiştiremeyeceksiniz. Bu fırsata sahip olsaydık harika olurdu ama burada değil.

Gömülü blok gölgeler

Artık temelleri ele aldık ve artık CSS gölgelerinin sözdizimini anlıyorsunuz. İç ve iç gölgelerin nasıl oluşturulacağını öğrenmenin zamanı geldi. Gölgeyi iç metin haline dönüştürmek için yalnızca iç metin kelimesini eklememiz gerekir.

Bu yüzden basit söz dizimi ile başladık. Genel olarak, kutu gölgesi kod pasajı biraz kafa karıştırıcı olabilir, ancak bir kez alıştığınızda basit görünecektir.

Burada tüm değerler temelde aynı şekilde çalışır, yalnızca gölge bloğun içine yerleştirilir. Bu görüntüde, bir gölgenin yayılma yarıçapının, gölgenin görünüşünü ne kadar etkileyebileceğini görebiliriz:

Bu sefer HEX değeri yerine RGBa rengini kullandığımıza dikkat edin. Opaklık değeri gölgeyi koyulaştırmayı veya açmayı hızlı ve kolay hale getirdiğinden, bu gölgeler için harikadır.

Görüntüler

Boş bir div öğesine box-shadow uygulamak oldukça kolaydır, peki ya bir görüntünün üzerine gölge koymak isterseniz? Kulağa basit geliyor ama gerçekte oldukça karmaşık. Hadi koda bakalım ve üreteceği sonucu görelim. Sade, eski bir img etiketiyle başlayalım.

Şimdi bunu CSS'mizde belirleyip kutu gölgesi ekleyeceğiz. Bunun gibi bir şeyin işe yarayacağını düşünebilirsiniz:

resim (
kutu gölgesi: iç metin 0px 0px 10px rgba(0,0,0,0.5);
}
Maalesef bu bizi bir sonraki sonuca götürecektir. Görüntü çalışacak ama gölge görünmez olacak!

Peki bir görüntüye iç gölgeyi nasıl uygularız? Birkaç uygulama yöntemi vardır ve hepsinin avantajları ve dezavantajları vardır. En popüler iki yaklaşıma bakalım.

İlk çözüm, görüntüyü görüntüyle aynı boyutta bir div'e sarmak ve ardından o div'in üzerine bir gölge uygulayarak görüntüye göreceli konumlandırma ve z-endeksi uygulamaktır. Kodumuz şu şekilde görünecek:

div(
yükseklik: 200 piksel;
genişlik: 400 piksel;
}

img(
yükseklik: 200 piksel;
genişlik: 400 piksel;
konum: göreceli;
z-endeksi: -2;
}

Bu yaklaşım işe yarar ancak ek kod ve oldukça fazla ek CSS gerektirir. Alternatif olarak, bir HTML resmi kullanabilir ve CSS kullanarak bir arka plan resmi ekleyebilirsiniz. Bu yaklaşımı kullanarak görüntünün gölgeyi kapatmayacağından ve varsayılan olarak gölgenin altına yerleştirileceğinden emin olabilirsiniz.

div(
yükseklik: 200 piksel;
genişlik: 400 piksel;
arka plan: url(http://lorempixum.com/400/200/transport/2);
kutu gölgesi: iç metin 0px 0px 10px rgba(0,0,0,0.9);
}

Bu teknikleri oldukça güçlü yayılımla birleştirirsek, yalnızca CSS kullanarak oldukça güçlü görüntü ayrıntılandırma elde edebiliriz.

Gömülü metin gölgesi

Gömülü blok gölgelerin uygulanması karmaşık olsa da anlaşılması oldukça basittir. İç metin kelimesini girin ve gölgeniz içsel hale gelecektir. Basit.

Maalesef metin gölgelerinde işler çok daha karmaşıktır. İç metin değeri metin gölgesiyle uyumlu olmadığından burada hiçbir şey çalışmaz:

Bunun yerine bunları biraz birleştirmemiz gerekiyor. Uygulama olağandışı olduğundan, burada neler olduğunu daha iyi anlamak için çalışmayı iki aşamaya ayıracağız. Öncelikle h1 başlığına girip aşağıdaki stilleri uygulamamız gerekiyor:

H1 (
arka plan rengi: #565656;
renk: şeffaf;
}
Ve şimdi zaten garip bir durumdayız. Arka plan rengini koyu, metin gölgesini beyaz ve dolgu rengini şeffaf olarak ayarladık. Bu size tuhaf geliyorsa sonuca bakın:

İhtiyacımız olan şey bu değil. İlginç olan ise en başa dönmüş olmamız. Her şeyin çalışmasını sağlayan gizli bileşen, metne ayarlanmış arka plan klip parametresidir.

H1 (
arka plan rengi: #565656;
renk: şeffaf;
metin gölgesi: 0px 2px 3px rgba(255,255,255,0,5);
-webkit-arka plan-klibi: metin;
-moz-arka plan-klibi: metin;
arka plan klibi: metin;
}
arka plan klip parametresini metne ayarlayarak, arka planda olan her şeyi (görüntüler, tonlamalar, renkler vb.) metnin ana hatları boyunca etkili bir şekilde ifade edebiliriz. Daha önce oluşturduğumuz kodu kullanarak bunu yaptığımızda sonuç şu şekilde oluyor:

Gördüğünüz gibi oldukça güzel bir etki elde ettik. Bulanık kenarlar kesilmiştir ve artık gömülü bir gölge görünümü verilmektedir. Bu arada text-shadow bize arka planın parlaklık seviyesini ayarlama yeteneği veriyor ve ayrıca metnin dışında hafif bir yükseltilmiş etki yaratıyor. Gölge değerini 0,5'ten 0,3'e değiştirirsek yazı koyulaşacaktır.

Tarayıcı desteği

Arka plan klipsi gibi farklı garip parametrelere sahip yaklaşımlar kullanmak istiyorsanız, nerede çalışıp nerede çalışmayacağını bilmeniz gerekir. Her zaman olduğu gibi, tarayıcı desteği söz konusu olduğunda .

Bu tabloya göre, arka plan klipi parametresi çoğu tarayıcıda oldukça iyi çalışır. IE9 bile bunu destekliyor! Güncel olmayan bazı tarayıcılarda sorun yaşayabilirsiniz.

Çözüm

Artık CSS'deki iç metin gölgeleri hakkında bilmeniz gerekenleri biliyorsunuz. Bu, keşfedilmesi çok ilginç bir alandır. Tüm yaklaşımların sezgisel olması muhtemel değildir ve uzmanlaşmak biraz zaman alacaktır. Önerilen çözümler hakkında ne düşündüğünüzü ve hangisini kullandığınızı bize bildirin.