Bir tarafta gölge css. CSS'de iç gölgeler. rgba neden kullanılır

Box-shadow CSS özelliği ile öğelere gölge ekleyebilir ve görünümlerini değiştirebilirsiniz. Bu tarz, üç boyutluluk ve üç boyutlu blok gibi ilginç efektleri hayata geçirmenizi sağlar. Özellik, tüm modern tarayıcılar tarafından desteklenir. İstisnalar IE8 ve Opera Mini'dir.

box-shadow özelliği: sözdizimi

Bu stil aşağıdaki gibi yazılır:

Kutu gölgesi: ek 4px 4px 8px 5px #333333;

Her bir parametrenin neden sorumlu olduğunu (soldan sağa) sırayla düşünün:

• anahtar kelime ek: isteğe bağlı bir parametre; bir gölge çizer içeri eleman.
• X Kaydırma: Gölgenin elemana göre yatay olarak ne kadar kaydırılacağını belirtir. Pozitif bir değer sağa kayma anlamına gelir, negatif bir değer sola kayma anlamına gelir. 0 değeri, gölgenin kaydırılmadığı anlamına gelir.
• Y-kaydırma: Gölgenin dikey yer değiştirme miktarını gösterir. Pozitif bir değer aşağı kaydırma, negatif bir değer yukarı kaydırma anlamına gelir. 0 değeri, kayması olmayan bir gölgedir.
• Bulanıklık yarıçapı: Bu, gölge bulanıklığının miktarıdır. Değer ne kadar büyük olursa, gölge o kadar bulanık olur. Parametre belirtilmezse varsayılan değer olan 0 kullanılır. Bu durumda, gölge tamamen net olacaktır.
• Eklenti: gölgeyi her iki eksen boyunca uzatmaktan sorumlu isteğe bağlı parametre; değer ne kadar büyük olursa, streç de o kadar büyük olur. Uzantı, yalnızca önceki parametre mevcutsa çalışır. Varsayılan değer 0'dır.
• gölge rengi: bu parametre ile her şey açıktır - öğenin gölgesinin rengini ayarlar. Varsayılan renk siyahtır.

Not. Android tarayıcıları ve iPhone Safari'nin eski sürümleri, box-shadow CSS özelliğinin düzgün çalışması için -webkit- ön ekini gerektirir.

Bu özellik birkaç değer grubu alabilir (aynı anda birkaç gölge yapın). Bunu yapmak için, bu parametre gruplarını virgülle ayırarak listelemeniz gerekir. Örneğin:

Kutu gölgesi: 15px 15px 20px #8b0163, ek 15px 15px 20px #630046;

kutu gölge örnekleri

CSS box-shadow özelliğinin gücünü ve güzelliğini daha iyi anlamak için size bazı pratik örnekler göstereceğiz. Bu özellik, sıradan bir bloğu büyük ölçüde dönüştürebilir!

açık gölge

Kutu gölgesi: 0 2px 4px rgba(0, 0, 0, .25);

kağıt efekti

Kutu-gölge: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), iç metin 0 0 40px rgba(0, 0, 0, .1);

Çoklu katmanlar

Kutu gölgesi: 6px 6px #ccc, 12px 12px #a3a3a3;

üçlü çerçeve

Kutu gölgesi: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);

köşeler

Kutu-gölge: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Gördüğünüz gibi box-shadow özelliği hayal gücü için çok geniş bir alan sağlıyor. Blokları istediğiniz gibi dönüştürebilirsiniz - asıl mesele bir orantı hissine sahip olmaktır! 😉

Bir sonraki bölümde, elemanların boyutunu belirleyen genişlik ve yükseklik özelliklerini keşfedeceksiniz.

Standardın ortaya çıkmasıyla CSS 3 istenen görsel efekti vermek için bir öğe kutusuna bir veya daha fazla gölge eklemeyi kolaylaştırdığından, web geliştiricileri arasında yaygın olarak kullanılmaya başlayan box-shadow özelliği tanıtıldı.

Bir önceki yazımızda border-radius özelliğine baktık, onu kullanarak köşeleri yuvarlatılmış bir gölge elde edebilirsiniz. Metin-gölge (metin-gölge) ile benzer şekilde, birden fazla gölge oluşturabilirsiniz, bunlar üzerine uygulanır. Z ekseniönden arkaya (ilk gölge üstte olacak şekilde).

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

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

Öğe gölgeleri 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 istiyorum:

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

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

Örneğimizin sonucu:

Birden fazla gölge kullanma

Aşağıdaki örnekte, birden çok gölge kullanıldığında elde edilebilecek ilginç bir renk karıştırma efektini ele almayı öneriyorum:

• İki sabit genişlik ve yükseklikte bloklar (15em ve 10em ), tüm kenarlara dolgu eklendi (2em ) ve hizalanmalarına izin vermek için satır içi olacak şekilde kutular ayarlayın.
• İçin Birinci sınıf ile blok .Ölçek belirttik dört elemanın her tarafında farklı gölgeler olması için farklı yatay ve dikey gölge değerlerine sahip gölgeler. Bire ayarlanan tüm gölgeler için bulanıklık yarıçapı. Her gölgenin rengi farklıdır ve önceden tanımlanmış renkler kullanılarak ayarlanır.
• İçin ikinci sınıf ile blok .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ı bire ayarlandı, gölge uzatması negatife ayarlandı, bu da gölgenin kendisinin küçülmesine neden oldu. Her gölgenin rengi farklıdır ve RGBA sistemi kullanılarak belirtilir.

Örneğimizin sonucu:

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

Bu makalenin son örneği, görüntüler için gölge kullanımına odaklanacaktır. Hemen dikkatinizi HTML öğesinin gölgesini doğrudan belirttiğine çekmek istiyorum. işe yaramayacak, ancak görüntüyü bizi ilgilendiren öğe için arka plan olarak belirleme ve zaten bu öğeye ihtiyacımız olan gölgeyi ayarlama fırsatımız var.

" " öğretici makalesinde arka plan görüntüleri ile çalışmaya ayrıntılı olarak bakacağız, ancak şimdi, gölgelerin kullanımına ilişkin incelemeye bir son vermek için, ona yüzeysel olarak değineceğiz ve bir öğenin arka planı olarak bir görüntüyü kullanacağız. aşağıdaki örnekte:

• İki sabit genişlik ve yükseklikte bloklar (237px ve 232px ), tüm kenarlara dolgu eklendi (2em ) ve hizalanmalarına izin vermek için kutuları satır içi olacak şekilde ayarlayın. 237px'e 232px blok boyutunu görüntünün boyutuyla eşleşecek şekilde ayarladık, böylece eğitimin bu aşamasında görüntüyü öğeye sığdırmak ve daha sonraki bir aşamada çalışılması planlanan CSS özelliklerini etkilemek zorunda kalmayacağız. ("" öğretici makalesinde).
• İçin Birinci sınıf ile blok .Ölçek yatay ve dikey gölgeleri sıfıra ayarladık, ancak bulanıklık yarıçapını 50 piksele ayarladık ve 10 piksellik bir esneme yarıçapı ile genişlettik. Gölgenin rengi önceden tanımlanmış bir renkle (menekşe) belirtildi. Bildirime gölgenin öğenin içine düşmesine neden olan inset anahtar sözcüğünü de ekledik. Yani elementin iç gölgesini oluşturduk.
• İçin ikinci sınıf ile blok .test2 yatay ve dikey gölgeleri sıfıra ayarladık, ancak bulanıklık yarıçapını 50 piksele ayarladık ve 10 piksellik bir esneme yarıçapı ile genişlettik. RGBA modunda belirtilen gölge rengi.

Örneğimizin sonucu:

Pirinç. 98 CSS resim gölge örneği (box-shadow özelliği)

Konuyla ilgili sorular ve görevler

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

Bir alıştırma alıştırmasını tamamlamakta sorun yaşıyorsanız, örneği her zaman ayrı bir pencerede açabilir ve hangi CSS'nin kullanıldığını görmek için sayfayı inceleyebilirsiniz.

2016-2020 Denis Bolshakov, site ile ilgili görüş ve önerilerinizi [email protected] adresine gönderebilirsiniz.

Tipografi, web tasarımcılarının favori oyuncağıdır. CSS'nin bileşiminde çok ilginç bir araç vardır - Metin gölgesi(metin gölgesi), ilk bakışta yeterince basit görünür, ancak yaratıcılığınızı ve hayal gücünüzü kullanırsanız unutulmaz efektler yaratmak için kullanılabilir.

Gölge Temelleri

Mülk Metin gölgesi kullanımı çok kolay. Tüm modern tarayıcılar tarafından ve hatta önek kullanılmadan desteklenir. Ancak IE'de (hatta IE9'da) destek yoktur. IE'nin eski sürümlerinde bile CSS3 efektlerini çıkarmaya yardımcı olması için Modernizr gibi araçları kullanabilirsiniz.

Sözdizimi

Özellik sözdizimi, bir metin gölgesi oluşturmak için kullanılır Metin gölgesi, aşağıda verilmiştir. Dört parametrenin tanımlanması gerekir: ilk ikisi gölgenin konumunu ayarlar, üçüncüsü bulanıklık seviyesini ayarlar ve dördüncüsü gölgenin rengini belirler.

Metin gölgesi: yatay_kaydırma dikey_kaydırma rengi bulanıklaştırır;

Aşağıda, iki piksel aşağı ve dört piksel sağa kaydırılan, üç piksel bulanıklaştırılan ve %30 opaklıkta siyah olan bir metin gölgesi örneği verilmiştir.

Metin gölgesi: 2px 4px 3px rgba(0,0,0,0.3);

Bu özelliği kullanmanın sonucu şöyle görünecektir:

Neden rgba kullanılır?

Özelliği tanımlarken gölge rengini ayarlamak için rgba kullanmak zorunda değilsiniz. Ancak rgba, gölge tanımına başka bir boyut daha ekler - şeffaflık düzeyi.

Bu yöntem diğer renk belirleme yöntemlerine göre çok daha basittir. Arka plan renginden biraz daha koyu veya daha açık olabilen gölge renginin gölgesini tanımlamaya odaklanmanız gerekmez. rgba ile renkleri karıştırırken istenen arka plan tonunu elde etmek için beyaz veya siyah renkleri kullanabilir ve opaklıklarını artırabilirsiniz.

özelliği kullanma Metin gölgesi metin için basit alt gölgelerle sınırlı olmayan çeşitli efektler oluşturabilirsiniz. Örneğin, burada girintili metin yanılsaması yaratan kod verilmiştir.

Öncelikle metin rengini arka plan renginden biraz daha koyu ayarlamanız gerekir. Ve sonra özelliği kullanmanız gerekir Metin gölgesi beyaz renk ve artan şeffaflık ile.

Arka plan rengi #222'dir ve metin renginin opaklığı %60'tır. Beyaz gölge, %10'luk bir opaklıkla hafifçe aşağı ve sağa yerleştirilmiştir.

Gövde ( arka plan: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

Gölgeyi hiç bulanıklaştırmak gerekli değildir. Net bir gölge, sitenin tasarımıyla iyi gider.

Metin gölgesi: 6px 6px 0px rgba(0,0,0,0.2);

Gerçek eğlence, yalnızca bir gölgeye sahip olma sınırlamasını bir kenara bıraktığınızda başlar. Tanımları ayırmak için virgül kullanarak istediğiniz kadar gölge kullanabilirsiniz!

Metin-gölge: gölge1, gölge2, gölge3;

İşte iki gölge kullanan bir örnek. İlki, arka planla aynı renge sahiptir.

Metin gölgesi: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Uzun bir mesafe aşağı hareket etmek

Çoklu gölgelerin kullanımında ustalaştığınızda, sonuç giderek daha anlamlı hale gelecektir. Metin için bir 3B efekti oluşturmak çok kolaydır.

Örnek, tümü farklı mesafelerde aşağı kaydırılmış ve bulanıklaştırılmış dört gölge kullanır.

Metin gölgesi: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1) );

Küçük bir mesafe aşağı kaydırın ve güçlü bulanıklık

İşte aynı fikrin başka bir uygulaması. Üç gölge daha küçük bir mesafeye taşınır ve daha bulanıktır.

Metin-gölge: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Mark Dotto'dan 3B metin

Efekt MarkDotto.com'da kullanılır. Harika bir 3D efekti oluşturmak için 12 farklı gölge kullanır.

Metin-gölge: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Gordon Hall tarafından kabartmalı metin

Yukarıdaki örnekte tekniğime "hızlı ve kirli" tipo baskı efekti dediğime dikkat edin. Bunun nedeni, çok daha inandırıcı olan, ciddi şekilde eklenmiş bir metin oluşturmanın çok daha karmaşık bir yolunun olmasıdır.

Gordon, yalnızca bir dış gölgeyi değil, aynı zamanda gerçek bir iç gölgeyi de çıkarmak için ciddi bir CSS vudu kullanıyor. Tekniğin tam açıklaması için blog gönderisine göz atın.

arka plan rengi: #666666; -webkit-arka plan-klip:metin; -moz-arka plan-klip:metin; arka plan klibi: metin; renk: şeffaf metin gölgesi: rgba(255,255,255,0.5) 0px 3px 3px;

parıltı

Metin gölgesi: 0px 0px 6px rgba(255,255,255,0.7);

Metin gölgesi: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Çoklu ışık kaynakları

Metin-gölge: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Renk: rgba(0,0,0,0.6); metin gölgesi: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Çözüm

Çoğu CSS efekti gibi, gölgelerin uygulanması da çok kolaydır. Ancak basit eylemlerin bir kombinasyonu şaşırtıcı etkilerle sonuçlanabilir.

box-shadow özelliği, bir öğeye bir veya daha fazla gölge ekler. Gölge, belirtilen mesafeye göre kaydırılan öğenin bir kopyasıdır. Gölgeler dış veya iç, bulanık veya düz olabilir, köşeleri yuvarlatılmış blokların konturlarını takip edebilirler. inset anahtar sözcüğü, öğe içinde gölgeler oluşturarak öğeyi görsel olarak hantal veya girintili hale getirir.

box-shadow özelliğini kullanarak bir 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 -webkit-
safari: 5.1, 3.1 -webkit-
opera: 11.5
iOS Safarisi: 5.1, 3.1 -webkit-
Android Tarayıcı: 4.0, 2.1 -webkit-

1. box-shadow özelliğinin sözdizimi

box-shadow özelliği, bir kutuya bir veya daha fazla gölge ekler. Özellik, hiçbir gölge olmadığını belirten none değerini veya baştan sona sıralanmış virgülle ayrılmış bir gölgeler listesi alır.

Her gölge, 2 ila 4 uzunluk, isteğe bağlı bir renk ve isteğe bağlı bir ek anahtar sözcükle temsil edilen tek bir gölgedir. geçerli uzunluklar 0 ; atlanan renkler varsayılan olarak color özelliğinin değeridir.

Mülkiyet miras alınmaz.

Gölge efektleri şu şekilde uygulanır: ilk gölge üstte, geri kalanı arkada. Gölgeler düzeni etkilemez ve diğer öğelerle veya onların gölgeleriyle örtüşebilir. Yığınlama bağlamları ve çizim sırası açısından, bir öğenin dış gölgeleri doğrudan o öğenin arka planının altına çizilir ve bir öğenin iç gölgeleri doğrudan o öğenin arka planının üzerine çizilir (varsa border ve border-image altına).

Bir öğenin birden çok kutusu varsa, hepsi gölge alır, ancak gölgeler yalnızca kenarların da çizileceği yerlerde çizilir; bkz. box-decoration-break.

Gölgeler, kaydırmaya neden olmaz veya kaydırılabilir alanın boyutunu artırmaz.

2. Blok gölge örnekleri

2.1. İç gölge

2.2. Bir tarafta düz gölge

düz

düz

2.3. Malzeme tasarımı gölgesi

Normal gölgelerin, kutu gölgesi veya metin gölgesi ile uygulanması kolaydır. Peki ya iç gölgeler yapmanız gerekirse? Bu makale, yalnızca birkaç satır kodla bu gölgelerin nasıl oluşturulacağını açıklamaktadır.

Sözdizimi

kutu gölgesi

yatay ofset Ve dikey ofset- sırasıyla yatay ve dikey yer değiştirme. Bu değerler, nesnenin gölgeyi hangi yönde atacağını belirtir:

Bulanıklık yarıçapı Ve yayılma yarıçapı biraz daha zor. Onların farkı nedir? Değerlerin olduğu iki öğeli bir örneğe bakalım. bulanıklık yarıçapı farklılık:

Gölgenin kenarı sadece bulanıklaşıyor. Farklı bir değerle yayılma yarıçapışunları görüyoruz:

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

Metin gölgesi

Değerler benzer, ancak değil gölge yaymak. Kullanım örneği:

Kutu gölgesinde ek

Box-shadow'un temel sözdizimini anladığınızda, iç gölgelerin nasıl uygulandığını anlamak çok kolaydır. Değerler aynıdır, renk ekleyebilirsiniz (RGB'den hex'e):

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

Gölgeli görüntüler

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

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Ancak gölge görünmez:

Bu sorunu çözmenin, her biri artıları ve eksileri olan birkaç yolu vardır. Bunlardan ikisini ele alalım. İlki, görüntüyü normal bir şekilde sarmaktır. div:

Div ( yükseklik: 200 piksel; genişlik: 400 piksel; kutu gölgesi: iç metin 0 piksel 0 piksel 10 piksel rgba(0,0,0,0.9); ) img ( yükseklik: 200 piksel; genişlik: 400 piksel; konum: göreli; z-endeksi: -2 ;)

Her şey çalışıyor, ancak biraz fazladan HTML ve CSS işaretlemesi eklemeniz 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 0 piksel 0 piksel 10 piksel rgba(0,0,0,0.9); )

İç gölgeler kullanıldığında şunlar olabilir:

text-shadow içine girinti

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

H1 ( arka plan rengi: #565656; renk: saydam; metin gölgesi: 0 piksel 2 piksel 3 piksel rgba(255,255,255,0.5); )

İşte olanlar:

Gizli Malzemeyi Ekleme arka plan klibi, metnin ötesine geçen her şeyi (koyu bir arka plan üzerinde) keser:

H1 ( arka plan rengi: #565656; renk: saydam; metin gölgesi: 0px 2px 3px rgba(255,255,255,0.5); -webkit-arka plan-klip: metin; -moz-arka plan-klip: metin; arka plan-klip: metin ;)

Neredeyse ihtiyacım olanı aldım. Şimdi metni (alfa) biraz koyulaştırın ve sonuç: