Not: CSS3 bazı tarayıcıların desteklemediğini hatırlatmak istiyorum, IE ve bazı tarayıcılar henüz bu özelliği desteklemiyor, bu çalışmamız Chorome, Firefox ve Safaride sorunsuz çalışıyor.
Önizleme - Preview
Bu dersimizde normalde Photoshop ile gölgeli yazı efekti vererek oluşturduğumuz efekti css ile yapmaya çalışacağız, ama yinede bu derstede Photoshop kullanacağız, yalnız Photoshopu bu sefer sadece arka plan resmimizi oluşturmak için kullanacağız. Hazırsanız Photoshop programımızı açalım ve 200x200 px 72 dpi özelliklerinde yeni belge açalım ve bu belgenin içini Paint Bucket Tool (G) aracımızı kullanarak #333333 rengi ile dolduralım.
Hemen arkasından görseli biraz daha arttırmak adına Filter/Noise/Add noise değerlerini aşağıdaki gibi verelim.
Son olarak Filter/Noise/Reduce Noise efektinide aşağıdaki değerleri ile verelim.
Daha sonra masa üstümüzde bir klasör oluşturalım ve ismini anlatımlarda karıştırmamamız için şimdilik Shadow & Hover olarak adlandıralım. Arkasından Bu klasörümüzün içine yeni bir klasör daha oluşturalım ve ismini images olarak değiştirelim, devamında az önce oluşturduğumuz bg isimli çalışmayı bu images isimli klasörümüzün içine bg.gif formatında kaydedelim. (Bu bizim arka plan resmimiz olacak) Bu işlemi tamamladıysak devamında yeni bir Not Defteri açalım ve içine aşağıdaki html kodlarını elle yazalım yada buradan - html kodlar 1.zip indirebilirsiniz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>CSS Shadow & Hover Effect</title>
</head>
<body>
</body>
</html>
Yukarıda görmüş olduğunuz kodlar html kodların değişmez iskeletidir diyebiliriz. Asıl kodlarımızı bundan sonra yazacağız, öncelikle <body> ve </body> taglarımızın arasına aşağıdaki örnek yazılarımızı yazalım yada buradan html kodlar 2.zip indirelim ve Not Defterimize ilgili bölümüne ekleyelim.
<h3><a href="http://bestpstutorials-tr.blogspot.com">ANA SAYFA</a></h3><hr color="#686868" width="190">
<h1><a href="http://bestpstutorials-tr.blogspot.com">CSS HOVER EFFECTS</a></h1><hr color="#686868" width="585">
<h2>CSS SHADOW EFFECTS</h2>
Yukarıdaki kodların anlamı, h1, h2 ve h3 tagları yazılarımızın boyutunu belirler, normalde html bunu kendisi boyutlandırır ama bizhtml kodlarının iradesine bırakmayacağız ve CSS ile bu tag'lerin hangi boyutlarda göstermesi gerektiğini belirteceğiz. Devamında hr kodu ise yazılarımızın altına oluşturduğumuz çizginin html kodudur, bu tag'ın devamındaki Color ve Width komutları ise isimlerindende anlaşılacağı üzere rengini ve genişliğini belirlememize olanak tanırlar. Bu kodlarıda anladığımıza göre html ile işimiz bitti demektir, artık html kodları arasındaki yazılarımızı biçimlendireceğimiz CSS kodlarımıza geçebiliriz.
Bunun için öncelikle css kodlarımızın başlangıcı ve bitişini ifade eden mutlaka eklememiz gereken CSS kod başlangıç ve bitiş kodlarımızı yazmamız gerekiyor. Örnek aşağıdaki gibidir.
<style type="text/css">
</style>
Bundan sonra aşağıdaki kodlarımızı incelerseniz h1, h2 ve h3 olmak üzere 3 başlığımız var ve hepsinin komutlarını ayrı ayrı verdik, aşağıdaki kodlarıda elle yazın yada buradan CSS Kodlar.zip indirerek not defterinizde az önce oluşturduğumuz <head> ve </head> kodlarımızın arasına yerleştirin.
<style type="text/css">
body {
background: #191919 url(images/bg.gif);
margin-top: 225px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1 a {
display: block; text-decoration: none;
font: 60px Times, Tahoma, Tahoma, Helvetica, Sans-Serif;
text-align: center;
color: #787878; text-shadow: 1px 1px 2px #000;
}
h1 a:hover {
color: #686868; text-shadow: 1px 1px 2px #000;
}
h2 {
font: 36px Times, Arial, Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #787878; text-shadow: 1px 1px 2px #000;
}
h3 a {
display: block; text-decoration: none;
font: 36px Times, Arial, Tahoma, Helvetica, Sans-Serif; letter-spacing: -2px;
text-align: center;
color: #787878; text-shadow: 1px 1px 2px #000;
}
h3 a:hover {
color: #686868; text-shadow: 1px 1px 2px #000;
}
</style>
Şimdi sıra hangi kodlarımızın hangi işlemleri gerçekleştirdiği kısmına geldi.
1) Öncelikle CSS kodlarımız <style type="text/css"> - </style> tag'leri ile başlamak durumundadır, arasındaki css kodlarında ilk sıradaki background#191919 kodumuz arka planımızdaki resmimizin görüntülenme aşaması geciktiğinde görülecek olan rengimizi belirler, hemen yanındaki url(images/bg.gif); kodumuz ise öncelikli olarak arka planımıza yolu gösterdiğimiz takdirde bg.gif isimli dosyamızı kullanmasını istediğimizi belirtir.
2) Hemen altındaki margin-top komutu ise yazılarımızın yukarıdan kaç px boşluk bırakacağımızı ayarlar, ben 225 px olarak ayarladım. Diğerleri ise isimlerinden belli olacağı üzere, Sol, Sağ ve Alt hizalamalardır.
3) h1 kodlarımızın komutları buradaki gibi işler, yani bizim belirlediğimiz gibi, sizler kendi ihtiyacınıza göre değiştirebilirsiniz, bunlar örneksel verilerdir.
Buradaki text-decoration: none kodunun görevi linkimizin altındaki çizgiyi istemediğimizi belirler eğer bunu yes olarak değiştirirseniz linklerimizin altında çizgi belirir.
4) font: ile başlayan ikinci sıradaki kodlarımız ise öncelikle hangi fontu göstermesini istediğimizi belirler ama olası sayfayı görüntüleyen ziyaretçinin bilgisayarında o font olmaması ihtimaline karşı diğer font seçeneklerimizide belirttik. Buradaki önemli nokta mutlak her bilgisayarda bulunması muhtemel olan fontları seçmemizdir, aksi halde o font yine ziyaretçinin bilgisayarında yoksa default font ile görüntülenir, buda sizin ayarlarınızın geçerli olmaması anlamına gelir, o bakımdan font seçimi çok önemlidir (font-family).
5) text-align: center kodumuz ise fontumuzu sayfamıza ortalamak istediğimizi gösteriyor, eğer siz fontun sola dayanmasını istiyorsanız buradaki center kodunu left, yada sağa yanaşmasını istiyorsanız right kodları ile değştirebilirsiniz. Ben örnek olsun diye ortalamak için center kodunu seçtim.
6) Color ile başlayan kodlarımızı ise yine isminden belli olduğu üzere rengini ayarlamamızı sağlar, hemen yanındaki diyez işareti ile başlayan rakamlar ise vermek istediğimiz rengin kodlarıdır, devamındaki noktalı virgül ise bu renk kodunun bitişini, devamında başka bir komut uygulayabileceğimizi gösterir, ben devamında asıl dersimizin amacı olan shadow yani gölge efekti için text-shadow: kodunu verdim, yanındaki ilk sırada olan 1px gölgemizin 1 px sağa, ikinci sıradaki 1px ise 1 px aşağı taşmasını sağlar, hemen yanındaki ise yumuşaklığını (feather) ayarlar, ben 2 px değer girdim, hemen yanındaki son kodumuz ise yine diyez işareti ilen başlayan #000 ise gölgemizin hangi renkte olmasını istediğimizi soruyor, bende siyaha denk gelen #000 değeri girdim. Burada neden 6 adet rakamsal veri girmedik, sebebi şu, eğer birbirini ardına örnek olarak #000000 değeri yine siyaha tekabül eder ama 6 rakamımızda aynı veriyi taşıyorsa 3 adet girmemiz yine css de siyaha tekabül eder, ama #0236bc bu renk değerinde 3 rakam kullanamayaız çünkü farklı rakamsal değerler var.
7) Şimdi parantezi kapatmamızın sebebi, artık normal yazı değerlerimizin bunlarla sınırlı olduğunu css kodlarımıza tanıtmaktır, ama dikkat ederseniz hemen arkasında h1 kodumuzun komutlarının bitmediğini, hover efekti için bir kaç ayar daha istediğimizi belirttiğimiz bölüm devreye giriyor. Hover efekti bir yazının yada resmin olabilir üstüne mousemiz ile gittiğimizde renk yada resim değiştirme efektidir. Şimdi bu efekti örnek olarak hazırladığımız h1 başlığı için nasıl uygulamasını istediğimizi belirteceğiz. Ben yine h1 için üstüne Mousemiz ile gittiğimizde ilk sıradaki color: komutu ile almasını istediğim rengin kodlarını girdim.
8) Hemen arkasından hover efekti sırasında yine gölge efektimiz için text-shadow: komutu ile 1 px sağa 1 px aşağıya 2 px de yumuşaklık (feather) değeri vererek rengininde #000 ile yine siyah olmasını istemişim ve css ise beni kırmadan hemen uygulamaya geçecektir.
Şimdi h2 ve h3 teki kodlarımızında mantığı aynı olduğu için ayrı ayrı onların anlatımına girmiyorum zaten az önce anlattıklarım ile birebir aynıdır. Sizler bu değerleri kendiniz deneme yanılma yolları ile değiştirerek düzenleyebilirsiniz.
Benim dersimizde kullandığım örnek kodları ve dosyaları aşağıdan indirerek inceleyebilirsiniz, herkese kolay gelsin arkadaşlar.
Demo Preview
Tutorial Source Files Download - CSS_Shadow & Hover.zip
Güzel bir çalışmaydı,fakat daha çok photoshop ağırlıklı olursa çok güzel olacak :)
Ehehehehe tamam Tarık senimi kırıcam :D zaten CSS dersine deneme amaçlı girmiştim, ilgi durumuna göre devam etmeyi düşünüyordum, sanıyorum Photoshop'a devam :))) Ama arada CSS derslerinede girebiliriz :D
CSS dersleride olsa çok güzel olucak,bu bölüme ihtiyacım var zaten,hatta bunun için ayrı bir sayfa bile açılsa çok güzel olur.
İngilizce kaynaklara bakmakdan bıktım artık :P
thanks for sharing this..