Yeni sayfanın ba
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.
![css text-shadow](imagescss/text-shadow/text-shadow.jpg)
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](imagescss/text-shadow/shadow1.jpg)
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](imagescss/text-shadow/shadow2.jpg)
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](imagescss/text-shadow/shadow3.jpg)
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:
![css text-shadow](imagescss/text-shadow/shadow4.jpg)
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](imagescss/text-shadow/shadow5.jpg)
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](imagescss/text-shadow/shadow6.jpg)
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](imagescss/text-shadow/shadow7.jpg)
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](imagescss/text-shadow/shadow8.jpg)
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](imagescss/text-shadow/shadow9.jpg)
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](imagescss/text-shadow/shadow10.jpg)
Ç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](imagescss/text-shadow/shadow11.jpg)
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](imagescss/text-shadow/shadow12.jpg)
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:
İ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](imagescss/text-shadow/istanbul.jpg)
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- HTML DİV ve SPAN NEDİR?
- HTML RESİM EKLEME
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- CSS YATAY MENÜ YAPIMI
- HTML KAYAN RESİM VE Marguee KULLANIMI
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
Bu sayfa hakkında yorum ekle: