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.

text-shadow: horizontal-offset vertical-offset blur color;


css text-shadow

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


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

ÇIKTI:

Metin gölge efekti!

Sonra, gölgeye bir renk ekleyim:


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

ÇIKTI:

Metin gölge efekti!

Neon gölge


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

ÇIKTI:

Metin gölge efekti!

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:

Metin Etrafında Border

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

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

ÇIKTI:

css text-shadow

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);
}

css text-shadow

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:

css text-shadow

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.

text-shadow: shadow1, shadow2, shadow3;

İ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:

css text-shadow

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:

css text-shadow

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:

css text-shadow

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:

css text-shadow

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:

css text-shadow

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:

css text-shadow

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:

css text-shadow

Ç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:

css text-shadow

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:

css text-shadow

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:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

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

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:

Genellikle, bir kutu gölgesi için düz bir renk kullanmaya gerek yoktur, bazı opaklıklar eklemek daha doğal bir his verir onun için renk için rgba() kullanın.

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:

İsteğe bağlı üçüncü değer, gölgeye bulanıklaştırma efekti ekler.


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

Daha bulanık.


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

Daha bulanık ve Turuncu


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:

İsteğe bağlı dördüncü değer, gölgenin yayılmasını tanımlar.


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:

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


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

Bulanıklaştırma efekti ile birden çok gölge tanımlayın.


İç metin anahtar kelimesini ekleyin:


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

box-shadow: 5px 10px inset:

İnset anahtar sözcüğü, gölgeyi çerçevenin içindeki bir değere değiştirir.


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

İç içe, turuncu ve bulanık.

Resme gölge verme


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

css text-shadow
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

4942

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.