CSS Dersleri
- Temel CSS Dersleri
- Arayüz Geliştiricilerin Görev Tanımı
- Yeniliklerin Takibi ve Google Reader
- Arayüz Geliştiriciler(HTML-ci) Tasarımcıdan Ne İster?
- CSS’e başlamak
- CSS’in Yapısı
- (X)HTML Sayfa Yapısı ve CSS Kullanımı
- Özellik Seçicileri(Attribute Selectors)
- Doğru DOCTYPE Kullanımı
- Pseudo-sınıfları ve Pseudo-elementleri
- CSS Birimleri
- CSS’i Web Sayfalarına Eklemek
- CSS’de Kısaltmalar
- Hızlı CSS Referansı
- CSS – Zemin(Background) Özellikleri
- Font Özellikleri
- CSS Sınıflandırma-Liste Özellikleri
- CSS Kutu Modeli Özellikleri 1 – Kenarlık(border) Özellikleri
- CSS Kutu Modeli Özellikleri 2 – Margin Özellikleri
- CSS Kutu Modeli Özellikleri 3 – Padding Özellikleri
- CSS Kutu Modeli Özellikleri -4
- CSS Kutu Modeli Özellikleri 5 – Görünüm Efekti Özellikleri
- CSS Metin(Text) Özellikleri
- Tablo Özellikleri
- Dış hat çizgisi(outline) özellikleri
- Arapça Site Kodlamak ve direction:rtl özelliği
- CSS Editörleri
- İnternet Tarayıcıları
- CSS Kod Yazma Düzeni
- CSS Seçicilerinin Optimizasyonu
- Gelişmiş CSS Dersleri
- CSS’de Kalıtsallık(Inheritance)
- CSS’de Tanımlamalar ve Etkinlikleri(Specificity)
- !important Tanımı
- CSS’de Çıktı alma (Print)
- CSS ile Kutu modeli
- CSS Kodlama Teknikleri ve CSS Kodlarını Azaltma Yöntemleri
- CSS Kodlama Teknikleri ve CSS Kodlarını Azaltma Yöntemleri 2
- CSS ile konumlandırma(positioning)
- Sabit Konumlandırma (Postion:fixed)
- z-index
- CSS ile sayfalarımızı ve elementlerimizi ortalamak
- CSS ile Dikey Ortalama
- Yatay ve Dikeyde Ortalı Alanlar Oluşturmak
- Genişliği Belli Olmayan Blok-level Elemanları Yatayda Ortalamak
- Float ve Clear özellikler ile konumlandırma
- İçiçe Float Elementlerinin Kullanımı
- CSS ile Web Sayfası Oluşturma
- CSS ile Web Sayfası Oluşturma II
- CSS ile Web Sayfası Oluşturma III
- %100 Genişlik ve %100 Yükseklite Sayfa İskeleti Hazırlama
- Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)
- Yuvarlak Kenarlı Kutular
- CSS ile Menü Yapmak I – Dikey Menüler
- CSS ile Menü Yapmak II – Yatay Menüler
- CSS ile Menü Yapmak III – Dikey Açılır Menüler
- CSS ile Menü Yapmak IV – Yatay Açılır Menüler
- CSS ile Menü Oluşturmak V – Resimli Menüler
- CSS ile Menü Oluşturmak VI – Sekmeli(Tab) Menü Yapımı
- CSS ile Menü Oluşturmak IV – Basit Resimli Menü Yapmak
- CSS ile Tabloları şekillendirmek
- CSS ile Erişilebilir Formlar Yapmak – I
- CSS ile Erişilebilir Formlar Yapmak – II
- Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)
- sIFR 3 Kullanımı ve İpuçları
- @font-face kullanımı
- CSS ile gölge vermek
- CSS ve Tipografi
- Internet Explorer 6 için saydam PNG desteği
- Eksi Margin Kullanımı
- Süper bir özellik display:inline-block
- CSS Teknikleri
- Xhtml – CSS : Başlıklar
- Listerlerin Blok Olarak Linklenmesi
- CSS ile Araç İpucu(Tooltip) Hazırlama
- Alıntı: blockquote ve q etiketleri
- CSS ile Yüzde Çubuğu Hazırlama
- CSS ile Resim Haritaları(imagemap) yapmak
- CSS ile Basit Şekilde Fare Üzerine Gelince(Rollover) Resim Değişimi Yapmak
- CSS ile <hr /> Stil Vermek
- CSS ile sayfalama görselliğini ayarlama
- Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer)
- CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek
- PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması – I
- PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II
- PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması III
- Çok kolonlu yapılar ve çok kolonlu menüler
- İlk harfi büyük(drop caps) paragraflar oluşturmak
- CSS ile buton yapmak
- Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak
- HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler
- HTML Mailing 2 – Mailing HTML Kodunun Yazılması
- Resim Kullanmadan Altı Çizgili Başlıklar Oluşturmak
- CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak
- Sayfa Zeminini Tamamen Kaplayan Resimler Tanımlamak
- IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek
- Saydam Kenar Çizgileri Oluşturmak
- CSS Problemleri ve Çözüm Önerileri
- IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak
- CSS Hata Ayıklama Yöntemleri
- Css de kodumuzu İE’den gizleme
- CSS ile Kutu modeli, sorunları ve çözümleri
- IE’da İkikat görülen Margin Problemi ve Çözümü
- IE’da min-width, min-height,max-width, max-height Kullanmak
- Satır Dönüşü(word wrap) Firefox sorunu nasıl çözülür?
- IE6′un Tekrarlayan Karakter Sorunu
- IE’un 3 piksel Metin Öteleme Hatası
- IE6′da CEE-EEE(peek-a-boo) Hatası
- Göreceli-Mutlak Konumlandırma Sorunu
- Internet Explorer 7 ve CSS
- Kenar Boşluğu(Margin) Çökmesi
- Float Uygulanmış Elementleri Tam Kapsayamama Sorunu
- Firefox’da satıriçi(inline) elemanların padding-right sorunu
- IE iframe ardalanında beyaz renk sorunu
- Internet Explorer 6 olmasa hayat daha kolay ve zevkli olurdu
- En çok kullandığım CSS Hileleri(Hack)
- Tüm tarayıcılar için CSS Düzeltmeleri(Hack)
- IE 8 için CSS Düzeltmesi(Hack)
- Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu
- Firefox’un Negatif Değerli z-index Desteği
- Dış Hat Çizgilerini(outline) Kaldırmak
- Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım
- İE 6 iki CSS seçicisi Sorunu ve Çözümü
- İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak
- CSS Yorumlarında Türkçe Karakter Kullandığımızda İE6′da Sorun Çıkarıyor
- IE6′da Liste Ardalan Görmeme Sorunu
- İnternet Explorer’da sağdaki sabit kaydırma çubuğunu kaldırmak
- İnternet Explorer 8′in CSS Desteği
- İE kalıtsal margin sorunu: form elementleri ve hasLayout
- ie6/7′da postion:relative Uygulanmış Elemanlarda z-index Sorunu
- İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
- IE’de Liste elemanları arasındaki boşluk sorunu
- overflow ve position:relative kullanımında ie sorunu
- display:inline elemanlar arasındaki doğal boşluklar
- IE6 ve IE7′de bağlantılardaki cursor sorunu
- IE’de Textarea’da Enter çalışmıyor
- overflow:auto içinde %100 genişlikte tablo kullanımında ie7’de yatay kaydırma çubuğu sorunu
- ie6′da border-color:transparent desteği sağlamak
- İE7 Bitişik Kardeş Seçicisi Sorunu
- CSS İpuçları
- CSS İpuçları 1 : üç kelimeli font tanımı
- CSS İpuçları 2 : CSS’de hata yakalama yöntemleri
- CSS İpuçları 3 : CSS ile birlikte yürürlükten kalkan HTML elementleri
- CSS İpuçları 4 : CSS ile birlikte yürürlükten kalkan HTML özellikleri
- CSS İpuçları 5 : CSS seçicilerini tanımlarken küçük-büyük harfe dikkat etmek
- CSS İpuçları 6 : CSS kısaltmaları hakkında
- CSS İpuçları 7 : CSS yorum kodu ekleme
- CSS İpuçları 8 : CSS id ve sınıf ismi verirken dikkat edilecek hususlar
- CSS İpuçları 9 : CSS ve (X)HTML kodlamada yorum satırı eklemenin avantajları
- CSS İpuçları 10 : CSS’e eklenen resimlerinin konumu
- CSS İpuçları 11 : CSS Kodlarını Web Tarayıcıları ile Test etmek
- CSS İpuçları – 12 : 3 köşeye border tanımı
- CSS İpuçları 13 : CSS’de Cellspacing=”0¨ nasıl yakalarız
- CSS İpuçları 14 : IE div yüksekliği sorunu
- CSS İpucu 15: align=”absmiddle” yerine vertical-align:middle kullanmak
- CSS İpucu 16: Evrensel seçicilerde yazıtipi kısaltması kullanımında sorun
- CSS İpucu 17: Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
- CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek
- CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity)
- CSS İpucu 20: Firefox’da Kaydırma Çubuğu Çıkarma
- CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek
- CSS İpucu 22: iPhone için CSS Yazmak
- CSS İpucu 23: Internet Explorer 8′i 7 gibi yorumlama kodu
- CSS İpucu 24: HTML Sayfalarına %100 genişlikte ve %100 yükseklikte flash dosyaları eklemek
- CSS İpucu 25: Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama
- CSS İpucu 26: Çift çizgili ayraç kullanımı
- CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma
- CSS İpucu 28: FireBug yardımı ile daha kolay CSS Sprite Uygulamak
- CSS İpucu 29: CSS ile Önden Resim Yükleme Teknikleri
- CSS İpucu 30 : background() tanımında tırnak kullanımı
- CSS İpucu 31 : Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü
- CSS 3
- CSS 3 medya sorguları
- CSS3 Seçicileri
- CSS3 resize özelliği
- CSS ile metinlere gölge vermek(text-shadow)
- Kutulara Gölge Vermek (box-shadow)
- Yuvarlak kenarlı kutular(border-radius) oluşturmak
- CSS3 RGBA Renk Tanımı
- CSS3 Module: Paged Media
- CSS3 Yazı Tipi Özellikleri
- CSS3 Metin Özellikleri
- CSS3 box-sizing Özelliği
- HTML 5′in yeni elementlerine bir göz atalım
- HTML5: Doküman Yapısını Oluşturan Elemanlar
- Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu
- CSS3 ile yuvarlak kenarlı resim yapmak
- CSS Renk Geçişleri (Gradients)
- CSS3 Çoklu Ardalan(Multiple Background)
- CSS3 background-size özelliği
- CSS3 background-origin ve background-clip özellikleri
- CSS3 Kenar Resimleri (border-image)
- CSS3 Çoklu Kolonlar
- CSS3 calc() değeri
- CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout)
- CSS3 pointer-events özelliği yeni
- CSS Kaynakları
- CSS Geliştirme Araçları
- FireBug – Genel Bakış
- FireBug 1.2 ve yenilikleri
- FireBug 1.4 sürümü çıktı
- FireBug İpucu : FireBug’ın Yetenekleri
- FireBug 1.5 Çıktı
- Küçük bir ipucu: FireBug ile satır numarası bilgisi
- FireBug Net Sekmesi ve Kullanımı
- Jquery Geliştiricileri için Güzel Bir FireBug Eklentisi FireQuery
- Googe Chrome 12 ile birlikte gelen güzel bir özellik(Built-in de-obfuscation)
- Chrome Geliştirici Aracı(Developer Tool) Hesaplanmış Stiller Özelliği
hocam ellerine sağlık… hakikaten güzel hazırlamışsınız. teşekkürler. Hocam yalnız “hızlı css referansı” konusundan itibaren pdf’leri bulamadım. Bu derslerin hepsini tek bir pdf halinde sunsanız çok iyi olacak diye düşünüyorum.
bu arada tema da çok güzelmiş hakkatten…
Merhaba! CSS ile ilgili aklımızdaki bir çok soru işaretini kaldırdın, bu anlaşılır kaynaklar için çok teşekkür ederim.
Ã?alıştığım projelerde araştırıp bulduğum çözümleri unutmamak için topladığım bilgileri paylaşmak için bayağı bekledim. Biraz kendi üşengeçliğimden ve birazda insanlar bunlara ihtiyaç duymayacağına olan inancımdan dolayı siteyi açmam gecikti, şimdi yaptığım işin bir nebze olsun işe yaradığını görmek beni sevindiriyor. Ancak daha yapacak çok şey var. Sizler konulara yazdığınız yorumlarla bu siteyi daha canlı tutarak bana yardım ediyorsunuz. Bu nedenle siteye yorum yazan herkese şükranlarımı sunmak isterim.
İlginiz için teşekkürler arkadaşlar.
Evet tr ‘ deki en güzel kaynak sitesi. Tebrik ediyorum, emeklerin için çok teşekkürler.
Sayende css öğreniyorum :D
Css üzerine bu kadar güzel bir içerik ve kaynak ile ilk kez karşılaşıyorum. Bir çok insanın dertlerine derman olacağına eminim :) Çalışmalarında başarılar dilerim
bende zamanında asp ile ilgi blog aradım. Asp tabanlı blog scriptleri var ancak yeterli değil.
Ben WordPress kullanıyorum. Gayet memnunum, tabi ufak tefek sorunları saymazsak.
Ben asp bilgim ile WordPress php ile yazılmış olsa da idare ediyorum. Zaten çok derin php bilgisine gerek yok.
Yapacağınız düzenlemeler genelde Türkçeleştirme ve bazı eklentiler eklemek onlarıda genel programala bilgisi ile yapabiliyorsunuz.
kolay gelsin
google css dersleri diyee aratığımda sayfanızla karşılaştım gayet güzel ve başarılı bir çalışma olmuş tebrik ediyorum..
css derslerini devamlı takip etmeyi düşünüyorum cidden bu kadar net anlatım yok sanırım…umarım sayenizde ögrenicegim :) teşşekürlerimi sunuyorum….
blog yapımından biraz bahsedebilirmisin hiç bir bilgim yok da kodlama sizemi ait bende kendim için kodalamak istiyorum nelere dikkat etmeliyim :S …asp ile yeterli bir blog oluşturulabilirmi…(blog ların çogu php benim php bilgim hiç olmadığı için:( asp yle yapılabilirmi)
biraz bilgi verirseniz sevinirim…
saygılarımla…
esra ….
Kusura kalma Halil ben pek yeni versiyonları çıkarçıkmaz kurma taraftarı değilmidir. bunendele İE 7 yi anca kurdum ve dediğin hatayı düzelttim.
Teşkkürler uyarın için
css her tarayıcıda farklı gösteriyor dediniz. bu durumda metinleri resim olarak yüklemek daha mantıklı değil mi? sonuçta her tarayıcıda test etme gibi bi şansımız olmamaz.
Ben tasarımlarımı hep photoshopta yapyorum sliclyp dreamweavera atıyorum tablonun içine.Hiçbir sorun çıkmıyor fakat güncelleme yaparken çok uzun sürüyor pratik değil bu yüzden.
Sorun css de değil eskimiş tarayıcılarda. Tarayıcılardaki sorunlar nedeni ile kodumuzu kökten değiştirmektense, sorunlu olan bölgeler için çözüm üretmek daha mantıklı
CSS calısırken bugün rastladım sayfanıza.Bir haftadır HTML calışıyorum,ancak CSS çok karmaşık gelmişti.Notlarınız cok faydalı oldu benim için:).Cok güzel hazırlamışsınız,ellerinize sağlık…Calısmalarınızın devamını bekleriz.”Bilgiler paylaştıkça değer kazanır”.Tebrikler…
şöyle bir durum var . Ben ie 7 beta kullanıyorum. Sayfanda bulunan css derslerine tıklayamıyorum. Ancak firefox’ta problemsiz gözüküyor… Firefox tan önce view source diyip sayfaya girebildim:P Haberdar etmek istedim. Kolay gelsin, ellerine sağlık…