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
- Çoklu Kenar Çizgisi(Border) Kullanımı
- @font-face yardımı ile ikon eklemek – Yeni TL sembolü eklemek
- ~ “Genel Kardeş Seçicisini” Cümle İçinde Kullanalım yeni
- 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
- İnternet Explorer hasLayout Kabulü ve Sorunları
- İnternet Explorer’da Renk Geçişi Sorunu ve Çözümü
- 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
- 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
çalışmaların için çok çok teşekkür ederim…
başarıların devamını dilerim fatih bey
yeni çalışmalarınızı sabırsızlıkla bekleyeceğim
CSS ile ilgili internet uzerinde ilk defa boyle derli toplu guzel bir turkce kaynak goruyorum. Ellerine saglik.
Bu birkaç satırlık kod beni yılgınlıktan kurtardı, teşekkür ederim
Firefox ve Opera uyumluluğu konusundaki ısrarların karşılık bulması sevindirici.
Kolaylıklar…
html,body {
height:100%;
margin:0;
padding:0;
}
body{
background: url(main.jpg) center bottom no-repeat;
}
Merhaba,
şu tarayıcı standartlarında anlaşsalar da bi oh desek. Son derece basit bir zemin resmi sorun oluyor. http://www.zerderest.com‘a bir gözatarsanız sevinirim. Firefox ve Opera’da bu resim niye görünmez anlamış değilim. Resim şurda, git al dedim, gitti aldı. Onu şimdi tabana koy, tekrarlama diyorum, firefox ve opera’ya bunu anlatamıyorum. ie’de sorun yok. Pes etmeden önce son bir çabayla bir de size danışayım dedim.
Sitenizi yeni keşfettim.
Hemen CSS Derslerine dalıyorum.
Teşekkürler.
WoredPress’de eklene içeriğin yanına tarih koyma işin php ile yapıyor anca buna takvim şeklini verme işini css ile yapıyoruz
merhabalar..
ellerine sağlık birçok döküman mevcut.. ben senden eklenen içeriklerin yanına çıkan tarihi nasıl ekleyebileceğiz onu soracaktım.. bu css ile yapılan birşeymiş diye duydum..
Teşekkürler..
Çok iyi bir kaynak site hazırlamışsınız. Dokümanların hepsini hemen bilgisayarıma kaydettim. Sitenizi de sık kullanılanlara.
Tebrik ederim ve çalışmalarınızın aynı güzellikte devam etmesini dilerim.
bir link veya kod yazarsanız yardımcı olabiliriz belki
id ve sınıf(class) seçimi için de
http://www.fatihhayrioglu.com/?p=42
bakmanızı tavsiye ederim.
Uygun bir yazı bulamadım sorunumu yazmak için. css ile yaptığım sayfalar firefox ve i.e de azda olsa farklı görünüyotr.Kodlarla ne kadar uğraşsamda istediğim sonucu alamıyorum Ve şunuda belirteyim id ve class tam olarak nered ve ne zaman kullanılır bilmiyorum ben sürekli id kullanıyorum