CSS Örnek
- Önceki Sayfa CSS Ağ Elemanı
- Sonraki Sayfa CSS Sınavı
CSS Seçicileri
CSS Kullanımı
CSS Renkleri
CSS Arka Plan
- Sayfanın arka plan renğini ayarla
- Farklı elementlerin arka plan renklerini ayarla
- Görseli sayfa arka planı olarak ayarla
- Arka plan görselini yalnızca yatay yönde tekrarlamak nasıl yapılır
- Arka plan görselini nasıl konumlandıracağınız
- Sabit arka plan görseli (bu görsel sayfanın geri kalanı ile birlikte kaynamaz)
- Tüm arka plan özellikleri bir açıklamada
- Gelişmiş arka plan örneği
CSS Kenarlık
- Dört kenarlık genişliğini ayarla
- Üst kenarlık genişliğini ayarla
- Alt kenarlık genişliğini ayarla
- Sol kenarlık genişliğini ayarla
- Sağ kenarlık genişliğini ayarla
- Dört kenarlık stilini ayarla
- Üst kenarlık stilini ayarla
- Alt kenarlık stilini ayarla
- Sol kenarlık stilini ayarla
- Sağ kenarlık stilini ayarla
- Dört kenarlık rengini ayarla
- Üst kenarlık rengini ayarla
- Alt kenarlık rengini ayarla
- Sol kenarlık rengini ayarla
- Sağ kenarlık rengini ayarla
- Tüm kenarlık özellikleri bir açıklamada
- Elemente Kenar Çizgisi Eklemek
- Her kenara farklı kenarlık ayarla
- Tüm üst kenarlık özellikleri bir açıklamada
- Tüm alt kenarlık özellikleri bir açıklamada
- Tüm sol kenarlık özellikleri bir açıklamada
- Tüm sağ kenarlık özellikleri bir açıklamada
CSS Kenar Boşluğu
- Elementin her kenarına farklı dış boşluk ayarla
- Dört değeri içeren kısa yazılım margin özelliği kullan
- Üç değeri içeren kısa yazılım margin özelliği kullan
- İki değeri içeren kısa yazılım margin özelliği kullan
- Bir değeri içeren kısa yazılım margin özelliği kullan
- Dış boşluğu auto olarak ayarlayarak içeriğindeki elementleri ortala
- Sol dış boşluğu ebeveyn elementinden devral
- Dış boşluk birleştirme
CSS İç Kenar Boşluğu
- Elementin her kenarına farklı iç boşluk ayarla
- Dört değeri içeren kısa yazılım iç boşluğu kullan
- Üç değeri içeren kısa yazılım iç boşluğu kullan
- İki değeri içeren kısa yazılım iç boşluğu kullan
- Bir değeri içeren kısa yazılım iç boşluğu kullan
- İç boşluk ve element genişliği (box-sizing ayarlanmamış)
- İç boşluk ve element genişliği (box-sizing ayarlanmış)
- Elementin sol iç boşluğunu ayarla
- Elementin sağ iç boşluğunu ayarla
- Elementin üst iç boşluğunu ayarla
- Elementin alt iç boşluğunu ayarla
CSS yükseklik/genişlik
- Elementin yüksekliğini ve genişliğini ayarla
- Elementin en büyük genişliğini ayarla
- Farklı elementlerin yüksekliğini ve genişliğini ayarla
- Görselin yüksekliğini ve genişliğini yüzdelikle ayarla
- Elementin en küçük genişliğini ve en büyük genişliğini ayarla
- Elementin en küçük yüksekliğini ve en büyük yüksekliğini ayarla
CSS kutu modeli
CSS Kontur
CSS Metin
- Farklı öğelerin metin renklerini ayarla
- Metni hizala
- Bağlantı altındaki çizgiyi kaldır
- Metni süsle
- Metndeki harflerin büyük/küçük yazısını kontrol et
- Metni içeri
- Karakter aralığını belirt
- Satır aralığını belirt
- Ögenin metin yönünü ayarla
- Harf aralığını artır
- Ögenin metin gölgesini belirt
- Öge içinde metin satır değişimini devre dışı bırak
- Metin içindeki görseli dikey hizalayın
CSS Yazı Tipi
CSS Bağlantı
CSS Liste
CSS Tablo
- table, th ve td öğelerinin siyah kenar çizgisini belirt
- border-collapse kullanarak
- Tablonun tek bir kenar çizgisini çevrele
- Tablonun genişliğini ve yüksekliğini belirt
- İçeriğin yatay hizalamasını ayarla (text-align)
- İçeriğin dikey hizalamasını ayarla (vertical-align)
- th ve td öğelerinin iç kenar boşluğunu belirt
- Yatay ayırıcı
- Tıklanabilir tablo
- Çubuk tablo
- Tablo kenar çizgisinin rengini belirt
- Tablo başlıklarının konumunu ayarla
- Duyarlı tablo
- Güzel bir tablo oluşturma
CSS Görünüm
CSS Konumlandırma
- Tarayıcı penceresine göre yerleştir
- Ögeyi normal konumuna göre yerleştir
- Ögeyi mutlak değerle konumlandır
- Yapışkan konumlandırma
- Öğeleri üst üste getir
- Öge şeklini ayarla
- Görselün üst kenarını piksel değeri ile ayarla
- Görselün alt kenarını piksel değeri ile ayarla
- Resmin sol kenarını piksel değeri ile ayarlama
- Resmin sağ kenarını piksel değeri ile ayarlama
- Metin resmini sol üst köşede konumlandırma
- Metin resmini sağ üst köşede konumlandırma
- Metin resmini sol alt köşede konumlandırma
- Metin resmini sağ alt köşede konumlandırma
- Metin resmini ortada konumlandırma
CSS Aşırı
- Overflow: visible - Aşırı kesilmedi. Element çerçevesi dışında render edilir.
- Overflow: hidden - Aşırı kesildi, geri kalan içerik gizlendi.
- Overflow: scroll - Aşırı kesildi, ancak geri kalan içeriği görmek için kaydırma çubuğu eklendi.
- Overflow: auto - Eğer aşırı kesildiyseniz, geri kalan içeriği görmek için kaydırma çubuğu ekleyin.
- Overflow-x ve overflow-y kullanımı
CSS Yüzen
- Float özelliğinin basit kullanımı
- Kenarlık ve dış kenar boşluğu ile sağa yüzen resim
- Başlıklı resim sağa yüzen
- Paragrafın ilk harfini sola yüzen
- Yüzen durumu kapatma (clear özelliği ile)
- Yüzen durumu kapatma (clearfix hilesi ile)
- Yüzen kutu oluşturma
- Yanyana resimler oluşturma
- Eş yükseklik kutuları oluşturma (flexbox ile)
- Yatay menü oluşturma
- Web düzeni oluşturma örneği
CSS Inline-block
CSS hizalama elementleri
- Dış kenar boşlukları ile ortalama
- Ortaya hizalanan metin
- Ortaya hizalanan resim
- Position ile sol/sağ hizalama
- Position ile sol/sağ hizalama - Çapraz tarayıcı çözümü
- Float ile sol/sağ hizalama
- Float ile sol/sağ hizalama - Çapraz tarayıcı çözümü
- Padding ile dikey ortalama
- Dikey ve yatay ortalama
- Line-height ile dikey ortalama
- Position ile dikey ve yatay ortalama
CSS kompozisyonu
CSS Pseudo-Sınıf
CSS Pseudo-Element
CSS içerik oluşturma
CSS Şeffaflık
CSS Nabız
- Tam stili olan dikey navigasyon çubuğu
- Tam stili olan yatay navigasyon çubuğu
- Tam yükseklikli sabit dikey navigasyon çubuğu
- Sabit yatay navigasyon çubuğu
- Yapışkan navigasyon çubuğu (IE veya Edge 15 ve daha eski sürümlerde çalışmaz)
- Yanıtlayıcı üst navigasyon çubuğu
- Yanıtlayıcı kenar navigasyon çubuğu
CSS açılır listesi
CSS Görsel Kütüphanesi
CSS Görsel Sürükle
CSS Özellik Seçicisi
- target özelliğine sahip tüm <a> elementlerini seçin
- target="_blank" özelliğine sahip tüm <a> elementlerini seçin
- title özelliğine sahip ve bu özellikte "flower" kelimesi bulunan tüm elementleri seçin
- Başında "top" olan class özellik değerine sahip tüm elementleri seçin (tam kelime olmalı)
- Başında "top" olan class özellik değerine sahip tüm elementleri seçin (tam kelime olmamalı)
- Sonu "test" ile biten class özellik değerine sahip tüm elementleri seçin
- "te" içeren class özellik değerine sahip tüm elementleri seçin
CSS Form
- Tam genişlikli giriş alanı
- Doldurulmuş giriş alanı
- Kenarlı giriş alanı
- Alt çizgili giriş alanı
- Renkli giriş alanı
- Odaklandığında giriş alanı
- Odaklandığında giriş alanı 2
- İkonlu giriş alanı
- Animasyonlu arama kutusu
- Metin kutusu stili ayarlama
- Seçim menüsü stili ayarlama
- Düğme stili ayarlama
- Yanıtlayıcı form
CSS Yuvarlak Köşeler
CSS Kenarlık Görseli
CSS Arka Plan
- Elemente Çoklu Arka Plan İkonu Ekler
- Arka Plan İkonunun Boyutunu Belirler
- "contain" ve "cover" Anahtar Kelimeleri ile Arka Plan İkonunu Ölçeklendirir
- Arka Plan İkonunun Boyutunu Tanımlar
- Tam Boyutlu Arka Plan İkonu (İçerik Alanını Tamamen Kaplar)
- background-origin ile Arka Plan İkonunun Konumunu Belirler
- background-clip ile Arka Planın Çizim Alanını Belirler
CSS Gradyan
- Doğru Yansıma - Üstten Aşağıya
- Doğru Yansıma - Soldan Sağa
- Doğru Yansıma - Çapraz Yansıma
- Doğru Yansıma - Belirli Açı
- Doğru Yansıma - Çoklu Renk İkonları
- Doğru Yansıma - Kuşkusuz Renk + Metin
- Doğru Yansıma - Şeffaflık
- Doğru Yansıma - Tekrarlanan Doğru Yansıma
- Yansıma - Eşit Dağılımlı Renk İkonları
- Yansıma - Renk İkonları Arasındaki Mesafe
- Yansıma - Şekil Ayarlama
- Yansıma - Farklı Boyut Anahtar Kelimeleri
- Yansıma - Tekrarlanan Yansıma
CSS Gölgeler Etkisi
- Basit Gölgeler Etkisi
- Gölgelere Renk Ekleyin
- Gölgelere Bulanıklık Etkisi Ekleyin
- Beyaz Metinle Siyah Gölgeler
- Kırmızı Neon Işık Gölgeleri
- Kırmızı ve Mavi Neon Işık Gölgeleri
- Beyaz Metinle Siyah, Mavi ve Koyu Mavi Gölgeler
- Elemente Basit bir box-shadow Ekleyin
- box-shadow'a Renk Ekleyin
- box-shadow'a Renk ve Bulanıklık Etkisi Ekleyin
- Kağıt Kartı Görünümünde (Metin) Oluşturma
- Kağıt Kartı Görünümünde (Polaroid Görsel) Oluşturma
CSS Metin Etkileri
- Kullanıcıya Görünmeyen Aşırı Konutun Nasıl Sunulacağını Belirler
- Fare İçin Element Üzerine Üstlenildiğinde Aşırı Konutun Nasıl Gösterileceği
- Uzun Metinlerin Parçalanıp Bir Sonraki Satıra Taşınmasına İzin Verir
- Satır Değiştirme Kurallarını Belirler
- Metnin Yazım Modunu Belirler (Yatay mı Dikey mi Yazılır)
CSS Web Yazı Tipi
CSS 2D Dönüşümler
- translate() - Mevcut Konumundan Elementi Sil
- rotate() - Elementi Soldan Sağa Çevir
- rotate() - Elementi Sağ Sola Çevir
- scale() - Elemanı Büyütme
- scale() - Elemanı Küçültme
- skewX() - Elemanı X Eksenine Boyunca Yansıtma
- skewY() - Elemanı Y Eksenine Boyunca Yansıtma
- skew() - Elemanı X ve Y Eksenleri Boyunca Yansıtma
- matrix() - Elemanı Döndürme, Çekme, Kaydırma ve Yansıtma
CSS 3D Dönüşümler
CSS Geçişler
CSS Animasyonlar
- Bir Elemana Animasyon Bağlama
- Animasyon - Bir Elemanın Arka Plan Rengini Değiştirme
- Animasyon - Bir Elemanın Arka Plan Rengini ve Konumunu Değiştirme
- Gecikmeli Animasyon
- Animasyon Durdurmadan Önce Üç Kez Çalışır
- Daimi Animasyon
- Ters Yönde Animasyon
- Alternatif Animasyon
- Animasyon Hız Çizgisi
- Animasyon Kısayol Özellikleri
CSS Araç İpuçları
CSS Stili Görseli
- Yuvarlak Kenarlı Görsel
- Daire Görseli
- Özet Görsel
- Bağlantı Olarak Kullanılan Özet Görsel
- Duyarlı Görsel
- Görsel Metni (Sol Üst Köşe)
- Görsel Metni (Sağ Üst Köşe)
- Görsel Metni (Sol Alt Köşe)
- Görsel Metni (Sağ Üst Köşe)
- Görsel Metni (Ortalanmış)
- Polaroid Görseli
- Gri Görsel Filtresi
- Gelişmiş - CSS ve JavaScript ile Gerçekleştirilen Görsel Modali
CSS Object-fit
CSS Düğmeler
- Temel CSS Düğmesi
- Düğme Rengi
- Düğme Boyutu
- Yuvarlak Kenarlı Düğme
- Renkli Kenarlı Düğme
- Sürüklenme Etkili Düğme
- Gölgeleyen Düğme
- Devre Dışı Bırakılmış Düğme
- Düğme Genişliği
- Düğme Grupları
- Kenarlı Düğme Grupları
- Animasyonlu Düğme (Sürüklenme Etkisi)
- Animasyonlu Düğme (Tuş Etkisi)
- Animasyonlu Düğme (Dalga Etkisi)
CSS Sayfaçözümleme
CSS Çok Sütun
- Çoklu sütun oluşturma
- Sütunlar arasındaki boşlukları belirtin
- Sütunlar arasındaki kuralların tarzını belirtin
- Sütunlar arasındaki kuralların genişliğini belirtin
- Sütunlar arasındaki kuralların rengini belirtin
- Sütunlar arasındaki kuralların genişliğini, tarzını ve rengini belirtin
- Elementin kaç sütuna geçmesini gerektirdiğini belirtin
- Sütunlar için en iyi genişliği belirtin
CSS Kullanıcı Arayüzü
CSS Değişkenler
CSS Box Sizing
CSS Esnek Box
- Üç esnek projeye sahip esnekbox
- Üç esnek projeye sahip esnek盒 - rtl yönlü
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Esnek proje sıralama
- Margin-right:auto;
- Margin:auto; = Mükemmel merkezi
- Esnek projelere align-self ayarlama
- Esnek projenin uzunluğunu, esnek projenin diğer kısımlarına göre belirleme
- Esnek盒 ile yanıt verici görsel kütüphanesi oluşturma
- Esnek盒 ile yanıt verici web siteleri oluşturma
CSS Medya Sorguları
CSS Medya Sorgusu - Daha Fazla Örnek
- Ekran Genişliğine Göre Farklı Arka Plan Renkleri Ayarlamak
- Duyarlı Gezinti Menüsü
- Yüzdürme Kullanarak Duyarlı Sütunlar
- Esnek Kutu Kullanarak Duyarlı Sütunlar
- Medya Sorguları ile Elemanları Gizlemek
- Duyarlı Yazı Boyutu
- Duyarlı Görsel Kütüphanesi
- Duyarlı Web Sitesi
- Tarayıcı Yönüne Göre Sayfa Düzenini Değiştirmek
- En Küçük Genişlikten En Büyük Genişliğe
CSS Duyarlı Web Tasarımı
CSS Ağ
- Önceki Sayfa CSS Ağ Elemanı
- Sonraki Sayfa CSS Sınavı
