Beşiktaş.Us

Beşiktaş Haber Portalı

SinerjiSoft için hazırladığım Beşiktaş Haber Sitesi tasarımının script giydirilmesi tamamlandı ve site yayın hayatına beta olarak basladı.

Siteye Katkım:

 Tasarım, Xhtml ve Css Kodlama

SinerjiSoft.Com Beşiktaş.Us - Ziyaret Et

CSS3 – Gölgeler (Shadow)

tarih 06 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS3 Hakkında
yorum 1 Yorum;

CSS3’ün getirmiş olduğu yeniliklerden bir tanesi de gölgelendirme efektleridir. Böylece metinlerimize ya da kutularımıza kolayca gölge ekleyebileceğiz.

Metne Gölge Ekleme

İstediğimiz metne, başlığa, paragrafa istediğimiz renkte istediğimiz ebatlarda gölge atayabiliriz. Bunu da sadece text-shadow kodu ile yapacağız. Hemen örnek kodumuz üzerinde gösterelim:

Kodu Görüntüle CSS
1
2
3
4
5

p{
	font-family:Arial, Helvetica, sans-serif;
	color:#ea9800;
	text-shadow: 4px 4px 7px #999;
}

Buradaki ilk iki kodu anlatmayı atlıyorum. Çükü bizim konumuzu ilgilendiren asıl kod kısmı son kısımdır. Text-shadow kodunda 4 değer görüyoruz. Bunlardan ilk 4px.lik değer gölgemizin metnin sağından uzaklığını belirler, ikinci değer olan 4px.lik değer ise gölgemizin metnin aşağısından uzaklığını belirler, üçüncü değerimiz (2px.lik değer) ise gölgemizin yoğunluğunu, bulanıklılık değerini belirler. Son değerimiz ise gölgemizin rengidir. Aşağıda bu kodların örnek görünümü de bulunmaktadır. Bu örneği görebilmeniz için sitemizi Firefox 3, Opera ve Safari ile görüntülemeniz gerekmektedir.

devamını oku

CSS3 – Border (Çerçeveler – Kenarlar)

tarih 06 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS3 Hakkında, Web Tasarım
yorum 0 Yorum;

Css3 ile gelen yeniliklerden biri de borderlar üzerinde artık daha fazla hakim olabileceğiz. Yani şöyle ki artık borderlara istediğimiz resmi arkaplan olarak atayabileceğiz. Çok güzel bir özellik değil mi.  Diğer özellik ise kalın borderlarda her pixele ayrı bir renk tonu atayarak gradient görünümlü borderlar hazırlayabilirsiniz. Birde köşeleri ovalleştirebildiğimizi zaten bir önceki konuda ayrıntılarıyla anlatmıştım.

Köşelerde her pixele ayrı renk atama:

Evet bu özellik şu anda sadece Firefox tarayıcısında çalışıyor. Örnek kodlarımız da işte şöyle:

Kodu Görüntüle CSS
1
2
3
4
5
6
7
8

#kutu {
	border: 8px solid #000;
	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	width:400px;
}

Aşağıda da örnek görünümü bulunuyor. Bu kutuyu görebilmeniz için Firefox ile sitemizi ziyaret etmeniz gerekir.

devamını oku

CSS3’e Yavaş Bir Başlangıç

tarih 04 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS3 Hakkında
yorum 0 Yorum;

CSS3 şu anda hala geliştirme aşamasında. Ancak bazı yenilikler yavaş yavaş denenmeye, kullanılmaya başlandı. Evet şu anda bunları kullanmanız anlamsız gelebilir. Çünkü IE hala bu yenilikleri desteklemiyor. Ama bunun yanında Firefox, Opera, Safari ve Chrome bazı CSS3 yeniliklerini kullanmamıza izin veriyor. Bence şimdiden alışmaya başlamak lazım ki yavaş yavaş CSS3 tekniğine şimdiden ayak uydurabilelim, ileride zorluk çekmeyelim.

Ben CSS3 Hakkında adlı kategorimde yeni özelliklere değineceğim. Buradan yenilikleri takip edebilirsiniz.