CSS3 text-shadow ve box-shadow Gölge Efekti

Tipografi, web tasarımında herkesin önem verdiği konudur. CSS ile gölge türünüzle oynamanızı sağladığı özellikle eğlenceli bir araç , İlk başta yeterince basit görünen, ancak biraz yaratıcılıkla dikkat çeken bazı efektler oluşturmak için kullanılan text-shadow css özelliğidir.

Text-shadow özelliği ile çalışmak süper kolaydır. Tüm modern browser'larda çalışır.

Sözdizimi:

Basit bir metin gölgesi oluşturma sözdizimi aşağıda gösterilmiştir. Çalışmanız gereken dört değişkeniniz var, ilk ikisi gölgenizin konumunu, üçüncüsü bulanıklık miktarını ve dördüncü gölgenin rengini belirler.

En basit kullanımında, yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz:

h1 {
  text-shadow: 2px 2px;
}

ÇIKTI:

Sonra, gölgeye bir renk ekleyim:

h1 {
    text-shadow: 2px 2px red;
   }
   	

ÇIKTI:

Neon gölge

h1{  
  color: white;
  text-shadow: 1px 1px 2px black, 
               0 0 25px blue, 
               0 0 5px darkblue;
  }

ÇIKTI:

Text-shadow özelliğini, bazı metinlerin etrafında düz bir kenarlık oluşturmak için de kullanabilirsiniz (gölgesiz):

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  } 

ÇIKTI:

Hoş ve basit bir gölge örnek yapalım.

 
 text-shadow: 2px 4px 3px rgba(0,0,0,0.3);	
 
 

ÇIKTI:

Neden rgba Renk

Kısa bir not olarak, gölgenizin rengi için RGBA kullanmanız gerekmez, ancak CSS renk yöntemlerinden herhangi birini kullanabilirsiniz. Bununla birlikte, RGBA'nın gölge için ideal renk ayarı olduğunu biliyorum çünkü çalışılacak başka bir boyut ekliyor. Gölgenin konumunu, bulanıklığını ve rengini ayarlamakla kalmaz, alfa değerini kullanarak opaklığını da ayarlayabilirsiniz.

Bu aslında diğer renk yöntemleriyle çalışmaktan daha kolaydır, çünkü genellikle biraz daha koyu veya daha açık olan arka plan rengine iyi bir vurgu için kullanmanız gerekebilir. RGBA ile sadece siyah veya beyaz kullanabilirsiniz ve arka plan ile karıştırmak için opaklığı azaltabilirsiniz.

Baskılı yazı

Örneğimizde #222 background rengini kullandık ve sonra metni %60 opaklıkta siyah olarak ayarladım. Sonunda, beyaz gölge hafifçe aşağı ve %10 opaklıkla sağa ayarlandı.

body {
    background: #222;
}
 
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Sert Gölge

Retro doğası nedeniyle, sert metin gölgelerdir. Retro'nun doğası gereği gölgeye bulanıklaştırma değeri verilmez.

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

ÇIKTI:

Duble Gölge

Text-shadow en güzel tarafı, tek bir gölge ile sınırlı olmadığınızı fark ettiğinizde başlar. Bildirimleri ayırmak için virgül kullanarak, istediğiniz kadar gölge uygulayabilirsiniz!

Sözdizimin ana hatları. İlk iki gölge arasına virgül ve son gölgeden sonra noktalı virgül bulunduğuna dikkat edin.

İlk gölgeye arkaplan gibi bir renk atanabilir, sonra resimdeki gibi bir efekt olacaktır.

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);	

ÇIKTI:

Aşağıda ve Uzakta Gölge

Metin hacimli ve arka plan üzerinde asılı görünüyor değil mi? Farklı bulanıklık ve konum seviyelerinde 4 gölge var. Genel olarak, ne kadar fazla gölge kullanılırsa, sonuç o kadar gerçekçi olur, bunu projelerinizde dikkate alın.

text-shadow: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);

	

ÇIKTI:

Yakın Ve Ağır Gölge

İşte aynı fikir için başka bir örnek, bu kez kaynağa çok yakın tutulmuş üç gölgeli Efekt, metninizin biraz daha ağır görünmesini sağlar.

text-shadow: 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);

ÇIKTI:

3B Metin

Her zaman gerçekten etkileyici göründüğünü düşündüğüm bir örnek. Çok inandırıcı bir 3D efekti çıkarmak için etkileyici on iki ayrı gölgeyi kullanıyor.

text-shadow: 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);

ÇIKTI:

Gerçek İç Metin

Yalnızca bir dış gölgeyi değil, aynı zamanda orijinal bir iç gölgeyi de çıkarmak için bazı CSS özellikleri kullanılırr.

background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

ÇIKTI:

Parlak Metin

Burada uygulamamızda her şey basittir - gölge değişmez, daha sert bulanıklaştırılır ve beyaz yaparız sonuç parlak bir metin.

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);	

ÇIKTI:

Retro Tarzı

Retro Türü bir yazı çok şık güzel bir yazı

text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;

ÇIKTI:

Çoklu Işık Kaynakları

İşte her yöne gölgeleri veren çoklu ışık kaynaklarının etkisi.

text-shadow: 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);

ÇIKTI:

Yumuşak Kabartma

Dışbükey Kabartmalı metin oldukça basit bir etki, ancak manşetlerde çok güzel görünüyor.

color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
             0px -5px 35px rgba(255,255,255,0.3);

ÇIKTI:

Box Shadow

CSS'deki box-shadow özelliği kullanarak HTML öğelerinize güzel gölgeler ekleyebilirsiniz . Oldukça iyi bir tarayıcı desteğine sahip ve öğelerinize farklı türde gölge efektleri eklemek için kullanılabilir.

Bu özelliğin esas olarak beş parametresine değer verebilirsiniz. Bu değerlere geçmeden önce, sözdizimine bir göz atın.

Sözdizimi:

Bu parametrelerin her biri aşağıda tanımlanmıştır.

• horizontal offset (gerekli): Bu, gölgenin yatay uzunluğudur. Pozitif bir yatay ofset gölgeyi kutunun sağ tarafına yerleştirir, negatif bir yatay ofset gölgeyi kutunun sol tarafına yerleştirir.
• vertical offset (gerekli): Bu, kutunun üstünde veya altında gölgenin dikey uzunluğudur. Pozitif bir dikey ofset gölgeyi kutunun alt tarafına yerleştirir, negatif bir dikey ofset gölgeyi kutunun üst tarafına yerleştirir.
• blur radius (isteğe bağlı): Bu, gölgenin bulanıklaşma derecesidir. Bu nedenle, daha yüksek bulanıklık yarıçapı gölgeyi daha bulanık ve genişletir, böylece daha büyük ve daha açık hale getirir. Öte yandan, daha küçük bulanıklık yarıçapı daha keskin, daha parlak ve daha az genişletilmiş bir gölgeye neden olur.
• spread radius (isteğe bağlı): Bu, gölgenin boyutunu değiştirmek için kullanılır. Pozitif yayılma yarıçapı, gölgenin boyutunu artıracak, negatif bir değer boyutu azaltacak ve 0 değerinin gölgenin boyutunda bir değişiklik olmayacaktır.
• color (isteğe bağlı): Renk özelliği.

Yatay Uzaklık

Gölge sadece kutunun sağ veya sol tarafında istiyorsanız, dikey ofsetine sıfır değeri verin.

Pozitif bir değer, gölgeyi kutunun sağ tarafına yerleştirir.

.box {
  background-color:orange;
  height: 300px;
  width: 300px;

  box-shadow: 6px 0;
}

ÇIKTI:

Negatif bir değer, kutunun sol tarafına yerleştirilir.

.box {
  background-color:orange;
  height: 200px;
  width: 200px;

  box-shadow: -6px 0;
}	

ÇIKTI:

Dikey Uzaklık

Yatay ofset ile aynı, gölgenin yalnızca kutunun üstünde veya altında olmasını istiyorsanız, yatay ofset'e sıfır verin.

Alt gölge için pozitif bir dikey denge verin.

.box {
  background-color:orange;
  height: 200px;
  width: 200px;

  box-shadow: 0 6px;
}	
	

ÇIKTI:

Benzer şekilde, negatif bir dikey değer, üst kenarda bir gölge verecektir.

.box {
  background-color:orange;
  height: 200px;
  width: 200px;
  box-shadow: 0 -6px;
}		

Sağ alt gölge istiyorsanız, hem yatay hem de dikey kaydırma değer verin.

 
 .box {
  background-color:orange;
  height: 200px;
  width: 200px;
  box-shadow: 6px 6px;
}		
 
 

Gölgeye bulanıklaştırma efekti ekleyin:

 #example {
  box-shadow: 10px 10px 8px #888888;
} 

box-shadow: 5px 10px 8px #888888:

box-shadow: 5px 10px 18px #888888:

box-shadow: 5px 10px 18px orange:

Gölgenin yayılma yarıçapını tanımlayın:

#example {
  box-shadow: 10px 10px 8px 10px #888888;
}

box-shadow: 5px 10px 8px 10px #888888:

Birden çok gölge tanımlayın:

#example {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}  

box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:

box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:

İç metin anahtar kelimesini ekleyin:

#example {
  box-shadow: 5px 10px inset;
}

box-shadow: 5px 10px inset:

box-shadow: 5px 10px 20px orange inset:

Resme gölge verme

img {box-shadow: 10px 10px 11px 0px rgba(0,0,0,0.75);} 

4838

Gönder