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’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 Pseudo-elementleri
04 Eylül 2009
Mustafa AYDIN
Bir önceki yazımda pseudo sınıflarından bahsetmiştim. Şimdi ise elementlerden bahsedeceğim. Yani sahte element sınıfları oluşturacağız diyebiliriz. Yazılışları pseudo sınıflarıyla aynıdır:
1 | secici-adi: pseudo-elementi {özellik:değer;} |
Hemen pseudo-elementlerinde bahsetmeye başlayalım:
First-line Pseudo-elementi
“First-line” pseudo elementi bir metnin ilk satırı için özel bir stil eklemek için kullanılır. Yani bir metnin sadece ilk satırının rengini değiştirebilir, kalın yapabilir, fontunu değiştirebilirsiniz. Kullanımı şu şekildedir:
1 2 3 4 5 | p:first-line { color:#ff0000; font-variant:small-caps; } |
CSS Pseudo-sınıfları
04 Eylül 2009
Mustafa AYDIN
CSS’de bulunan Pseudo (Sözde, Sahte) sınıflarla seçicilerinize özellikler ekleyebilirsiniz. Bunlar belli koşullarda uygulanacak özelliklerdir. Xhtml ile ulaşamadığımız koşullara ulaşabilmemizi sağlar. Belki şu anda ne demek istediğimi anlamadınız ama açıkladıkça emin olun kolay bir yöntem olduğunu fark edeceksiniz. Öncelikle Pseudo sınıflarının nasıl yazıldığını gösterelim:
1 | secici-adi: pseudo-sinifi {özellik:değer;} |
Gördüğünüz gibi her zamanki gibi bir sınıf adımız yani secici adımız var. Bu ister id olsun isterse de class olsun. Daha sonra iki nokta işaretini kullanıyor ve bir boşluk bıraktıktan sonra pseudo sınıf adını yazıyoruz ve süslü parantezlerimizin arasına da özellik ve özellik değerlerini belirtiyoruz.
Bağlantılar (Linkler) İçin Pseudo Sınıfları
Pseudo sınıflarını bağlantılarda kullanarak onlara istediğimiz şekilleri verebiliriz. Bağlantılarda kullanabildiğimiz pseudo sınıfları ise şunlardır : hover, visited, active, link. Belki bunları siz de kullanıyordunuz ama bunların adının pseudo sınıfları olduğunu bilmiyordunuz. Şimdi örnek kodlarımızı da gösterelim:
1 2 3 4 | a: link (color: # FF0000) /* ziyaret edilmemiş link */ a: visited (color: # 00FF00) /* ziyaret link */ a: hover (color: # FF00FF) /* fare ile üzerine gelinen link */ a: active (color: # 0000FF) /* seçilen link */ |
İkon Kütüphanesi Bölümü Açıldı
03 Eylül 2009
Mustafa AYDIN
Web 2.0 için ikonların önemini belirtmiştim Bu düşünceyle bir ikon kütüphanesi açmaya karar verdim. Beğendiğim, işinize yarayabilecek ikonları burada paylaşacağım. Rahatlıkla download ederek sitenizde yada uygulamalarınızda kullanabilirsiniz.
Her geçen gün buradaki ikon setlerinin sayısını arttıracağım. Eğer kırık link yada resmi gözükmeyen ikon seti bulunursa bana iletişim bölümünden lütfen ulaşın.
Sitemdeki ikon kütüphanesine yandaki Kategoriler menüsünden ulaşabilirsiniz.
İkon kütüphanem şu adreste: http://www.webilgic.com/category/icons/
Bağlantılara (Linklere) Küçük Önizleme Resmi
01 Eylül 2009
Mustafa AYDIN
Bazı sitelerde görürüz, var olan bağlantıların üzerine gittiğimizde açılacak olan sitenin küçük bir resmi gösterilir. İşte bunu ufak bir javascript ve css ile halledebiliriz. İlk olarak sayfanın en altında bulunan download butonuna tıklayarak gerekli dosyaları indirin. Bu .rar içerisinde iki adet dosya çıkacak. Biri javascript dosyası biri de image…
Şimdi ilk olarak javascript dosyamızı sitemizde head kodları arasına şu kodla ekleyelim (Not: Dosyalar sitenizin ana dizininde olduğu düşünülerek dosya yolu belirtilmiştir. Eğer başka bir dizine koyarsanız o yolu değiştirmeyi unutmayın.):
1 | <script language="JavaScript" type="Text/JavaScript" src=" arc90_linkthumb.js"></script> |
Şimdi de css kodlarımız arasına şu kodu da ekleyelim:
1 2 3 4 5 | .arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(linkpic_shadow.gif) no-repeat bottom right; } |
CSS Nimetleri – Bağlantınızın (Linkinizin) Üzerine Geldiğinizde Yeni Yazı Gösterme
01 Eylül 2009
Mustafa AYDIN
Başlıktan pek bir şey anlamamış olabilirsiniz. Uygun bir başlık olarak en uygunu bu olduğuna karar verdim pek bir şey anlaşılmasa bile. Ama açıklamaya başlayayım en iyisi. 
Bir bağlantınız var diyelim ve o bağlantınızın üzerine fare ile gelindiğinde o yazının yerin başka bir yazı çıkmasını ya da yanına bir yazı daha eklenmesini istiyorsunuz diye düşünürsek başlığı biraz daha anlaşılır kılmış oluyor muyuz? CSS’nin bize sağlamış olduğu content kodu bu işe yarıyor işte. Hemen örneklerle açıklamaya geçelim. İlk önce XHtml kodlarımızı hazırlayalım:
1 | <a href=”#”>Bağlantı Yazımız</a> |
Sonrada css dosyamızı şu şekilde hazırlayalım :
1 | a:hover:after{ content: “ (Yazının Üstüne geldiğimizde görünecek yazı)”;} |
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.)
Yatay Menüyü, Listeyi Ortalama
30 Ağustos 2009
Mustafa AYDIN
Yatay menü ya da liste yapıp, onu sayfada ortalayamıyor musunuz? Çünkü listenizi büyük ihtimalle float özelliği ile oluşturuyorsunuzdur. Float özelliği ile yapılmış listelerde liste elemanları sağa yada sola dayalı olduklarından dolayı ortalanmazlar. Bu yüzden yapmanız gereken listenize bir genişlik vermektir. Ancak bunun da şöyle bir eksik yönü var. Diyelim bir Wordpress teması yaptınız ve bu temayı dağıtacak ya da satacaksınız. Ama bu temayı alanların liste uzunluğunu nerden bileceksiniz ki. Bu temayı her kullanan kullanıcının liste uzunluğu hep farklı olacaktır. İşte bu durumlarda listeyi düzgün bir şekilde ortalamanız zor olur.
Eğer listenizi float değil de display özelliği ile yatay duruma getirirseniz, istediğiniz şekilde bu listeyi ortalayabilirsiniz. Bunun için de display:inline değerini kullanmanız gerekir ve asıl listeyi ortalayacak olan ise ul etiketinde yazıları text-align:center kodu ile ortalamanızdır. İşte örnek XHTML VE CSS kodları. Css’de display:inline ve text-align:center kodlarının hangi etiketlerde olduğuna dikkat edin:
RSS Besleme Dosyanızda CSS Kullanın
30 Ağustos 2009
Mustafa AYDIN
RSS Besleme dosyanızda Css kullanmak çok kolay. Böylece RSS Beslemenizde istediğiniz elementi görünür kılıp istediğiniz elementi de gizleyebilirsiniz. CSS sayesinde karmaşık haldeki metinleri daha anlaşılır hale sokabilirsiniz. Peki, Css dosyanızı nasıl RSS Besleme dosyanıza tanıtacaksınız. Çok basit, aşağıdaki örneğe bakarak ayarlayabilirsiniz.
1 2 3 | < ?xml version="1.0" ?> < ?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> ... |
Rss etiketinizde istediğiniz elementleri görünür kılıp istediğiniz elementleri de gizlemek için ise örnek kodumuz şu şekilde:
CSS İle Yıldızlı Oylama Bölümü Yapalım
28 Ağustos 2009
Mustafa AYDIN
Genellikle video paylaşım sitelerinde gördüğümüz ama her türlü içerikte uygulanabilecek hoş bir uygulamadır yıldızlı grafiklerle oylama bölümleri. İşte şimdi de bu sistem css ile nasıl yapılabiliyor bir bakalım.
İlk adım olarak XHTML dokümanımızı hazırlayalım.
1 2 3 4 5 6 7 8 9 | <div class="yildiz">
<ul>
<li><a href="#" class="bir-yildiz">1</a></li>
<li><a href="#" class="iki-yildiz">2</a></li>
<li><a href="#" class="uc-yildiz">3</a></li>
<li><a href="#" class="dort-yildiz">4</a></li>
<li><a href="#" class="bes-yildiz">5</a></li>
</ul>
</div> |
Css kodlarımıza başlamadan önce yıldız grafiğimizi buradan sağ tıklayıp farklı kaydedelim.
Şimdi de css dosyamızı hazırlamaya başlayalım.
