Online Takip

css’de uzman olmanızı sağlayacak 20 css dersi

Posted on: 15 Şub 2009

CSS’yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

\

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop’taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS’nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

\

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

\

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB’a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

\

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

\

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

\

1.7. CSS’de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

\

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box – Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

\

2.2. CSS’de Yuvarlatılmış Köşeler
CSS’de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV’lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd’un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

\

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE’de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

\

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox‘dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox’un aksine bu sürüm JavaScript’e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

\

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

\

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

  • IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
  • IE5.5 ve IE6’da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
  • Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.
\

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

\

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan css “hilelerinden” birisi de budur. eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: ie6’da üzerine ‘margin’ uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. ne şans ki ie6’nın bu hatasını gidermek çok basit.

\

5.2. CSS Çapraz Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS’nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz.

\

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili “footcollapse” adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

\

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

\

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

\

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

\

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

Web Tasarım

Oto Galeri Portalı = 200 $

Emlak Portalı = 200 $

Site Kurucu = 100 $

E Ticaret Sitesi = 250 $

İlan Sitesi = 200 $

Haber Portalı = 350 $

Arkadaşlık Sitesi = 200 $

E Katalog = 200 $

Flash Site Kurucu = 200 $

Kategoriler

Kategoriler

Takvim

Şubat 2009
P S Ç P C C P
« Oca   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

Arşiv

Blog İstatistikleri

  • 16,119 kişi

RSS Bay Bedava

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

RSS Bildirgec.org

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

RSS InternetHaber.com

  • Bir hata oluştu; besleme kapalı gibi görünüyor. Lütfen daha sonra tekrar deneyin.

Toplistler

News & Media Blogs - BlogCatalog Blog Directory
%d blogcu bunu beğendi: