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 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 */ |
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:
