Ads Top

15 adet CSS dersi { Türkçe Kaynak }

Arkadaşlar merhaba. Web sitesi yaparken en önemli unsurlardan olan css ile ilgili 15 adet uygulamalı ders derledim. Tamamı Türkçe kaynaklardan oluşmakta ve hepsini uygulaması çok basit. Yalnız belirtmeden geçemeyeceğim, türkçe kaynaklara ulaşması ya zor ya da yeterli derecede Türkçe kaynak yok. Belirli sayıda sitenin dışında diğerlerinin içerikleri hep aynıydı. Css nedirle başlayan ve sadece orada kalan kaynaklar fazlasıyla mevcut :)


Türkçe sitelerden en kapsamlı ve en çok beğendiğim kaynak diyebilirim.

1- } Tüm tarayıcılar için CSS Düzeltmeleri(Hack)

Css ile web sayfamızı düzenlerken farklı taryıcılardan farklı sonuçlar çıkabiliyor. Firefox`da gözüken 200px`lik bir boşluk ie6 da farklı algılanabiliyor. Bu yazıda bu gibi sorunları nasıl halledeceğimizden bahsedilmiş.

2- } CSS ile <hr /> Stil Vermek


CSS ile birlikte kodlama yaparken bir çok yerde <hr/> etiketi yerine elementlerin üst ve alt kenarlık değeri ataması yapılarak kodlama yapılmaktadır, bunun yerine <hr /> etiketini kullanabiliriz. <hr / > daha kolay eklenir ve css desteklemeyen araçlarda sayfa görünümünün bozulmasını engeller.


1- } Css Round ile yuvarlak köşeli kutular hazırlamak


Normalde yuvarlak köşeli kutular hazırlamak için css kodlarını ve imaj dosyalarını kendimiz hazırlıyorduk. Bu yazıda CSS Round kullanarak hazırlamanın pratikliği aktarılmış.


1- } Reset.css ve Kurtardığı hayatlar


Farklı tarayıcılarla ilgili problemlerin üstesinden gelmenin farklı bir yolu. Kısaca..
Reset.css, adı üzerinde css tanımlamalarından bazıları sıfırlıyor. Böylece, gerek Internet Explorer sürümleri, gerekse de Mozilla Firefox ve diğerleri için başlangıçta tüm elementler aynı görünüme kavuşuyorlar.


Css ve diğer programlama dilleriyle ilgili oldukça kapsamlı bir kaynak.

1- } Photoshop CS2 ve CS3 'teki şablonların CSS çıktısı


Photoshop programı ile yapılan grafik bazlı çalışmaların web ortamında rahat kullanılması için otomatik olarak CSS 'ye nasıl dönüştürebileceğimizi anlatılıyor. Oldukça yaralı bir kaynak.

2- } CSS ile açıklamalı menü


CSS ile açıklamalı bir menü yapım örneği.

3- } CSS ile Şeffaf Tasarımlar


XHTML sayfalarda gördüğünüz şeffaf tasarımlar CSS ile nasıl yapıldığını anlatıyor.


1- } Birbirinden güzel CSS Menü örnekleri


Sitede bir çok css ile hazırlanmış menü örneklerine rastlamak mümkün, hatta sitenin içeriği tamamen css menülerden oluşmakta.

Ayrıca sitede istek formu da mevcut, beğendiğiniz bir menünün adresini gönderiyorsunuz ve size nasıl yapıldığıyla ilgi dersi site üzerinden bildiriyorlar.


Volkan Görgülü`nün CSS dışında da çok güzel paylaşımları mevcut, eğer bu siteyi bilmiyorsanız (ki zor bir ihtimal ) girip bütün konuları incelemenizde fayda var. Şu an askerde olan Volkan Görgülü`ye hayırlı teskereler diliyoruz.

1- }  CSS Sprite Tekniği ile daha hızlı çalışan menüler


Normalde menüleri hazırlaken her menü başlığının imaj dosyasını ayrı hazılarız veya üzerine geldiğimizde farklı gözükmeleri için, farklı farklı imaj dosyaları hazırlar ve bunlara ayrı ayrı CSS ve xhtml kodu tanımlarız. CSS Sprite tekniği ile iki adet imaj dosyasıyla bu çalışmayı uygulayabiliriz.

2- } CSS Sıfırlama Tekniği


CSS sıfırlama tekniğiyle ilgili farklı bir kaynak, hem video hem de metin sürümü mevcut


1- } Sitillerin websayfasına eklenmesi


Sitilleri html gibi düz yazı olarak hazırlıyoruz. Hazırladığımız sitillerin websayfasına yerleştirmek için birkaç yöntem bulunmaktadır. Bu yöntemlerin farklı özellikleri ve faydaları bulunmaktadır.


1- } Css İle Resimlere gölge yapımı


Çok eski bir yazı olmasına rağmen hala kullanılabilir güzel bir kaynak. Web sitemize eklediğimiz bir resmin gölgelendirilmesi.


1-} CSS ile Tablosuz Katlanır Menü (Collapsible Menu Tableless)


Katlanır menüler menüdeki öğeleri gizlemek ve görüntü kirliliğinden kurtulmak için çok iyi bir seçimdir. Bugünkü yazımda JavaScript ve CSS yardımıyla tablosuz (tableless) katlanır menü nasıl yapılır.


1- } Blogger için CSS ile Soluk Resimler


Blogger için hazırlanmış bu çalışma ile resimlerin soluk gözükmesi sağlanıyor. Ayrıca Wordpress için de eklentisi mevcut.


1- } CSS ile margin ve padding kullanımı


Sitemizin layoutlarını hazırlarken sıklıkla kullandığımız margin ve padding seçicilerinin en kısa şekilde nasıl kullanılabileceği hakkında güzel bir kaynak.

3 yorum:

  1. Valla Çok Teşekkür ederim size.. Sayenizde Css i iyice kapıyorum:)

    YanıtlaSil
  2. TESEKURLER DADAS GUZEL KONULAR.

    YanıtlaSil
  3. resimler gözükmüyor bende.

    YanıtlaSil

Blogger tarafından desteklenmektedir.