Tarayıcıların Css3 desteklerinin genişlemesiyle birlikte bu alanda yapılan birçok çalışmayı artık rahatlıkla test edebiliyoruz. Özellikle son dönemlerde gördüğümüz örneklerde Css3′ün Transform parametresinden yararlanılarak birçok uygulama yapılabiliyor.

Bu makalemizde Css3 Transform (dönüştürme) işlemlerinin ne olduğunu ve nasıl kullanıldığını anlatacağız. Rotate, Translate, Skew ve Scale gibi özelliklerden bahsedecek ve örneklerle kodlarımızın nasıl çalıştığını göreceğiz.

Uzun bir aradan sonra yeniden merhabalar. Bu makalemizde Css ve Xhtml ile klasik bir yatay açılır menü yapacak daha sonra bu menümüzü jQuery ile biraz dinamik hale getireceğiz.

Menümüzü oluştururken Css3′ün bir takım özelliklerinden de yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

Merhabalar. Birçok tarayıcının güncellenmesiyle artık biz de Css3 kodlarımızı daha sağlıklı çalıştırır hale geldik. Özellikle Firefox 3.6 üzerinde yaptığımız uygulamaları daha iyi görme şansımız var.

Bu makalemizde de Css ile basit bir yatay menu yapacak, bu menüye gölge efekti verecek ve biraz da jQuery ile animasyon katacağız. Özellikle box-shadow ve border-radius bu makalemizde üzerinde duracağımız konulardan.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (3kb)

Uzun bir aradan sonra yine merhabalar. (Yazmayalı çok uzun zaman olmuş gerçekten) Bu makalemizde sizlerle web tasarımında son dönemlerde oldukça sık kullanılan açılır navigasyonları nasıl oluşturacağımızı anlatacağız.

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

jQuery şüphesiz en çok bilinen ve kullanılan Javascript kütüphanesi. Bunda kısa kodlarla büyük işler başarmasının elbette çok büyük payı var. jQuery’nin sunduğu efekt, olay ve işlemler sayesinde çok az bir kodla muhteşem şeyler yapılabiliyor. Ben bu yazımızda çok kısa olarak jQuery ile web sayfalarımızda kullanmak üzere bir açılır panelin nasıl yapılacağını anlatacağım. Makalemizin sonunda neler yaptığımızı anlatacak ve çalışır bir örneğimizi sizlerle paylaşacağız.

(Makalemize başlamadan önce jQuery’nin temel dosyasını indirmiş olmanız gerekiyor. jQuery’nin kararlı son sürümünü kendi sayfasından indirebilir ve üzerinde uygulamalar geliştirebilirsiniz)

Öncelikle panelimizin görünümünü düzenleyen Css kodlarını yazarak başlayalım…

(Merhabalar, bu anlamlı gün vesilesiyle tüm ziyaretçilerimizin 30 Ağustos Zafer Bayramı‘nı kutluyorum. Allah milletimize nice 30 Ağustosları barış, birlik ve beraberlikle görmeyi nasip etsin)

Web tarayıcıların gelişmesiyle artık (kısıtlı da olsa) Css3′ün nimetlerinden faydalanabiliyoruz. Bu makalemizde basit olarak özel bir yazıtipinin Css3‘te kullanımını ve gösterimini (Font Embed, Yazıtipi gömme olarakta dilimize çevirebiliriz) anlatacağız. Yapacağımız örnekleri Firefox 3.5+ sürümlerde rahatlıkla görebilirsiniz.

Önce örneğimizde kullanacağımız yazıtipini belirleyelim. Ben şurada bulunan White Board Modern isimli yazıtipini indirdim. Dilerseniz siz farklı bir yazıtipi kullanabilirsiniz. İndirdiğimiz yazıtipini gösterecek olan Css kodlarımızı yazalım ve bu yazdığımız kodu işleme koyacak olan bir alanda gösterelim.

Wordpress blog sahipleri için gönderiler içindeki bağlantılar çok önemlidir. Bunun gerekliliğini ben de oldukça fazla yaşadığım için sadece temamın bana sunduğu bağlantı karakterini kullanmakla yetinmiyorum. Bunun yerine temamın stil dosyasında farklı bir bağlantı sınıfı oluşturarak gönderilerim içinde bunu kullanıyorum. Bazen yazılarımızın içinde gördüğünüz bağlantılar (özellikle renkli ve ikon destekli olanlar) buna bir örnektir. Öncelikle size kullanmış olduğum Css kodlarını yazayım, sonrasında bunu bir Wordpress gönderisinde nasıl kullanacağımızı anlatalım.

Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

SmashingMagazine’den güzel bir makale daha. Farklı alanlarda kullanılabilecek 50 yeni Css tekniği derlenmiş.

Yeniden merhabalar. Bu gönderimizde sizlerle Css Sprite tekniğini konuşacak, hazırlamış olduğumuz örnekler ile konumuzu destekleyecek, Türkçe ve yabancı kaynakları paylaşaçağız. Dilerseniz hemen başlayalım.

Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite çok yeni bir teknik olmamakla birlikte uzun zamandır büyük siteler tarafından kullanılmaktadır. Css sprite tekniği özünde birden fazla resmi bünyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gösterilmesi mantığını taşımaktadır. Bu söylediğimi uygulamalı olarak gördüğünüzde ne demek istediğimi daha iyi anlayacaksınız.

Css sprite birçok yönden hem site sahiplerini hem de ziyaretçileri mutlu etmektedir. Çünkü birçok resim bağlantı ve resim ögenin kullanıldığı bir sitede bu resimlerin her biri için sunucumuza bir istek gitmektedir. Sizlerin de bildiği üzere Http request’lerin fazla olması sunucuya olan yükü fazlalaştırmakta ve site açılış hızını etkilemektedir. Css sprite bu yönden kullandığı tek bir resim dosyası nedeniyle birçok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretçiler de kullandığımız resim bağlantılarda (kısa bir süre de olsa) yeni resmin yüklenmesini beklemeyecektir.

Makalemizin başında söylediğimiz gibi Css sprite tekniğini birçok büyük site kullanmaktadır. Google, Youtube, Yahoo, Amazon, Digg gibi siteler bunların başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha iyi anlayabilmek için örneğimize geçelim.