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
CSS3 – Gölgeler (Shadow)
06 Eylül 2009
Mustafa AYDIN
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:
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.
CSS3 – Border (Çerçeveler – Kenarlar)
06 Eylül 2009
Mustafa AYDIN
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:
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.
CSS3 – Oval Köşeler
04 Eylül 2009
Mustafa AYDIN
CSS3 ile birlikte artık oval köşelerimizi, yuvarlak köşelerimizi çok daha kolay yapabileceğiz. CSS’yi geliştirenler işimizi daha da kolaylaştırabilmek için Photoshop gibi resim editörleriyle yaptığımız ve resimlerle sitelere eklediğimiz oval köşeler için yeni kodlar eklemişler. Bu kodları yazarak grafiksiz olarak oval köşelerimizi halledebiliriz. Bu özellik kodu “border-radius”tur. Şimdi örnek bir uygulama yapalım o zaman. İlk olarak Xhtml dosyamıza şu kodu ekleyelim:
1 2 3 | <div class=”oval-kutu”> <p>Bu bir paragraftır.</p> </div> |
Gördüğünüz gibi div etiketimize oval-kutu sınıfını atadık. Şimdi de CSS ile oval-kutu sınıfının özelliklerini yazalım:
1 2 3 4 5 6 7 8 9 | .oval-kutu { background-color: #666; color: #fff; line-height: 20px; width: 200px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
CSS3’e Yavaş Bir Başlangıç
04 Eylül 2009
Mustafa AYDIN
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.
CSS 3 İle Dışarıdan Font Dosyası Kullanma
31 Ağustos 2009
Mustafa AYDIN
CSS3 ile bir sürü yenilik girdi hayatımıza. Bunlardan biri de var olan yazı fontlarıyla yetinmeyenler için dışarıdan font dosyası tanıtma özelliğidir. Bu şekilde çok değişik fontları sitemizde dilediğimizce kullanabiliriz. Tabii bunun için öncelikle sunucumuza attığımız fontumuzu css dosyamıza tanıtmamız lazım. Bunun içinde css dosyamızın en başına şu şekilde bir kod eklemeliyiz:
1 2 3 4 | @font-face { font-family: SketchRockwell; src: url(‘SketchRockwell.ttf’); } |
Sonrasında bu fontu dilediğimizce istediğimiz yerde kullanabiliriz:
1 2 3 4 5 6 | .ornek-sinif { font-family: SketchRockwell; font-size: 3.2em; letter-spacing: 1px; text-align: center; } |
Şu anda bu özelliği destekleyen tarayıcılar: Firefox 3.5, Safari (3.2.1, Windows), Internet Explorer 7 ve 8 (Eğer. eot uzantılı yazı fontu kullanıyorsanız, pek fazla mümkün değil.)
CSS 3 Dahil Tüm CSS Kodları (PDF Dosya)
28 Ağustos 2009
Mustafa AYDIN
CSS 3 ile birlikte birçok özellik eklendi. Bu yüzden herkes tarayıcıların CSS 3’e uyumlu olmasını bekliyor. Gerçi Firefox son sürümüyle bazı özellikleri destekliyor ama bizim için yetmez. 
İşte CSS 3 ile eklenen yeni kodlar da dahil tüm kodlar aşağıda linki bulunan pdf dosyasında. Unutmadan dosya içeriği İngilizce ama çok basit İngilizce… Sözlükten birkaç kelimeye bakarak çok rahat anlarsınız. Zaten cümle de yok. Sadece komutlar verilmiş ve karşısında da aldığı değerler. Mutlaka yardımı olacaktır. Her tasarımcının elinin altında bulunması gerekir bence.
