|
Sitemde ana menü başlıklarını oluşturan yazıların
altında gölge olduğuna dikkat etmiş olabilirsiniz:
İşte yazılar üzerine uyguladığımız bu gölge efektlerini "CSS" (Cascading
Style Sheets / Basamaklı Stil Şablonları ya da Basamaklı
Biçim Sayfaları) ile yapıyoruz.
İsterseniz gelin, bunun nasıl yapıldığını görelim:
Öncelikle (içine CSS kodlarını yazacağımız) CSS uzantılı
dosyamızı oluşturuyoruz. Bunun için Not Defteri'ni (Notepad'i)
açıp (içine henüz bir şey yazmadan) dosyamıza bir isim
verip Not Defteri'nin ".txt" olan uzantısını da "css"
yaparak kaydediyoruz. Genelde CSS uzantılı dosyalara "style"
ismi veriliyor ancak siz istediğiniz ismi verebilirsiniz
elbette. Benim size göstereceğim örnekte ben CSS
uzantılı dosyama "YaziyaGolgeVerme" ismini vermeyi tercih
ettim. Sonuçta "YaziyaGolgeVerme.css" isimli (ve css
uzantılı) içi boş (içine henüz herhangi bir CSS kodu
yazmadığım) bir dosyam oldu. Bu dosyanın içine
yazacağımız CSS kodlarıyla yazılara gölge vereceğimizden
html belgemizin (sayfamızın) içine de bu dosyayı
çağırmamız gerekiyor. Bunun için gerekli olan html
kodumuzu aşağıda veriyorum. Bu kodu html belgemizde
"<head> <head>"
etiketleri (tagleri) arasına yazıyoruz:
|
HTML Kodu |
<link type="text/css"
rel="stylesheet"
href="YaziyaGolgeVerme.css"> |
Yukarıdaki kodla "YaziyaGolgeVerme.css" isimli CSS kodlarını
yazacağımız dosyayı (ve yazılara gölge vermeye yarayacak
olan dosyanın içindeki kodları) html sayfamızın içine
çağırıyoruz. Böylece "YaziyaGolgeVerme.css" isimli
dosyamızın içindeki kodlarda hangi değişikliği yaparsak
html sayfamızda etkili olacak. (Tabii, bunun için html
sayfamızla "YaziyaGolgeVerme.css" adlı dosyamızın aynı
dizinde (klasörde) olması gerektiğini söylememe gerek
yok sanırım. Eğer "YaziyaGolgeVerme.css" adlı dosyamız
farklı bir dizindeyse o zaman "YaziyaGolgeVerme.css" isimli
dosyamızın yolunu yukarıdaki html kodlarında ona göre
yazıp, yolunu ona göre belirteceğiz.)
Şimdi de "YaziyaGolgeVerme.css" adlı dosyamızın
içine CSS kodlarını yazalım:
|
CSS Kodu |
|
.golge {
color: #013865;
text-shadow: 5px 5px 5px #d363a9
} |
Yukarıdaki kodları biraz açıklamamız gerekirse;
Öncelikle, CSS dosyamızın içine "golge"
isimli bir "class" (sınıf) ekledik. (Siz başka bir isim
de verebilirsiniz.) Yazıları gölgelendireceğimiz zaman bu
sınıfın içindeki kodlardan yararlanarak yazılara gölge
efektlerini vereceğiz. Bu kodlarda yer alan "color"
özelliği ise, yazımızın rengini belirtiyor. (Ben
"#013865" değerini içeren bir renk seçtim.)
Bu kodlardaki en önemli ifade ise
"text-shadow: 5px 5px 5px #d363a9"
ifadesi. "Text-shadow" değişkeni yazılara gölge
vermek için girebileceğimiz değerleri içeren bir kalıp
ifade. Buradaki kodlarda verdiğim örnekte "text-shadow"
özelliğiyle yazımızın, sağdan 5 piksel, yukarıdan 5
piksel uzakta olacak şekilde bir gölge oluşturmasını ve
gölgenin bulanıklık değerinin de 5 piksel olmasını
istediğimiz belirtmiş olduk. Bu satırda yer alan
"#d363a9" değeri ise gölgenin olmasını istediğimiz renk
değeri. Siz isterseniz buraya "red", "blue" gibi ana
renkleri de (başında "#" işareti olmadan)
yazabilirsiniz. O zaman da gölgenizin rengi kırmızı,
mavi ya da istediğiniz bir ana renk olacaktır.
Artık elimizde html belgemizin içine <head><head>
etiketleri arasına yazdığımız ve CSS kodlarını
çağırdığımız bir HTML koduyla, CSS kodlarını yazarak
yazıya gölge vermek için yararlanacağımız özellikleri
tanıttığımız "YaziyaGolgeVerme" adlı bir CSS dosyamız
var. Ancak bu şekilde html belgemize gölgeli olmasını
istediğimiz bir yazı yazdığımız zaman sadece bu kodların olması hiçbir
işimize yaramayacak ve yazıda gölge olmayacaktır. Yazıda
gölge oluşması (yani CSS kodlarının işe yaraması) için
gölgeli olmasını istediğimiz yazıya bir "class" (sınıf)
atamamız gerekiyor. Hatırlarsanız yukarıda CSS
dosyamızın içinde "golge" isimli bir "class"
tanımlamıştık. İşte gölge vermek istediğimiz yazıya da bu "class"ı
atayacağız. Bunun için html belgemizde yazımızın <p>
etiketine "golge" isimli "class"ı atayarak html kodunu şu şekilde
oluşturmamız gerekiyor:
|
HTML Kodu |
|
<p
class="golge">MERHABA
DOSTLAR</p> |
Yukarıdaki kodda "p class" etiketiyle "golge"
adlı "class"ı yazımıza atayarak CSS dosyası
içine yazdığımız kodları içine almasını ve
görüntülenebilirliğini sağlamış olduk.
Şimdi isterseniz örnek olarak (ve "#d363a9" rengi
açısından) bu kodların uygulamasını görelim:
MERHABA DOSTLAR
Yukarıdaki örneğin CSS kodunda yer alan gölge rengini
değiştirmek isterseniz "#d363a9" başka bir renk değeri
girebilirsiniz. İsterseniz ana renklerin İngilizce
isimlerini de (başında "#" işareti olmadan)
yazabilirsiniz. Hemen kırmızı (red) renkli gölgesi olan
bir örnek yapalım:
|
CSS Kodu |
|
.golge {
color: #013865;
text-shadow: 5px 5px 5px red
} |
Kırmızı rengi gölge olarak kullandığımız zaman yazıda
oluşan gölge efektini aşağıda görüyorsunuz:
MERHABA DOSTLAR
Şimdilik benim CSS kodlarıyla yazıya gölge verme
konusunda söyleyeceklerim bu kadar. Siz deneme yanılma yöntemiyle ve sürekli
test ederek bu konudaki başka püf noktalarını
keşfedip daha da geliştirebilirsiniz. Umarım
buraya kadar özet olarak verdiğim bilgiler
işinize yarar. |
