W3 CSS
Daha küçük, daha hızlı ve kullanımı daha kolay!
Renkler (Colors)
w3-color sınıfları, pazarlamada, yol işaretlerinde ve yapışkan notlarda kullanılan modern renklerden ilham almıştır:
Konteyner (Container)
w3-container sınıfı, W3.CSS sınıflarının en önemlisidir. Aşağıdaki gibi eşitlik sağlar:
- Common margins (Ortak kenar boşlukları)
- Common paddings (Ortak dolgular)
- Common vertical alignments (Ortak dikey hizalamalar)
- Common horizontal alignments (Ortak yatay hizalamalar)
- Common fonts (Ortak yazı tipleri)
- Common colors (ortak renk)
w3-container sınıfı, genellikle aşağıdakiler gibi HTML kapsayıcı öğeleriyle kullanılır:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, ve dahası.
Bu bir Başlıktır
Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir. Bu makale açık gri ve metin kahverengidir.
Bu bir alt bilgidir.
Panelleri, Notlar ve Alıntılar
w3-panel sınıfı, her türlü notu ve alıntıyı görüntüleyebilir:
Londra, 9 milyondan fazla nüfusuyla Birleşik Krallık'ın en kalabalık şehridir.
Londra, 9 milyondan fazla nüfusuyla Birleşik Krallık'ın en kalabalık şehridir.
Uyarıları (Alert)
w3-panel sınıfı, her türlü uyarı için de kullanılabilir:
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Uyarı!
Sarı genellikle dikkat edilmesi gerekebilecek bir uyarıyı gösterir.
Başarı!
Yeşil genellikle başarılı veya olumlu bir şeyi gösterir.
Bilgi!
Mavi genellikle nötr bir bilgilendirici değişikliği veya eylemi gösterir.
Kartlar (Cards)
w3-card sınıfları, hem resimler hem de notlar için uygundur:
Araba
Araba, ulaşım için kullanılan tekerlekli, kendi kendine çalışan bir motorlu araçtır.
Terimin çoğu tanımı, arabaların öncelikle yollarda çalışacak, bir ila sekiz kişilik oturma yeri olacak ve tipik olarak dört tekerleğe sahip olacak şekilde tasarlandığını belirtir.
(Wikipedia)
İnanılmaz
Fransız Alpleri
Tablolar (Tables)
w3-table sınıfları her türlü tabloyu işleyebilir:
| Ad | Soyad | Yaş |
|---|---|---|
| Arda | Balkan | 18 |
| Metin | Aksu | 19 |
| Code | Null | Null |
| Doğan | Dağdelen | 20 |
| Altuğ | Akgül | 21 |
| Ömer | Dinç | 60 |
Listeler (Lists)
w3-ul sınıfı her türlü listeyi işleyebilir:
-
Arda Balkan
Son PHP'ci -
Metin Aksu
Doktor -
Code
Errorle Mücadele Daire Başkanı -
Doğan Dağdelen
20 Yıllık Usta Yazılımcı -
Altuğ Akgül
Anket Man (Yellow)
Düğmeler (Buttons)
w3-button ve w3-btn sınıfı, her boyutta ve türde düğme sağlar.
Geniş düğmeler: (Wide buttons)
Dairesel veya kare düğmeler: (Circular or square buttons)
Etiketler, Rozetler ve İşaretler (Tags, Labels, Badges, and Signs)
w3-tag ve w3-badge sınıfları, her türlü etiketi, rozeti ve işareti görüntüleme yeteneğine sahiptir:
2 8 A B
Yeni Uyarı Uyarı Bilgi
Duyarlı (Responsive)
Responsive Grid sınıfları, tüm cihaz türleri için yanıt verebilirlik sağlar: PC, dizüstü bilgisayar, tablet ve mobil.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS ayrıca küçük, orta ve büyük sınıflara sahip 12 sütunlu mobil öncelikli bir değişken ızgarayı da destekler.
Görüntülemek (Display)
w3-display sınıfları, HTML öğelerini belirli konumlarda görüntülemenize izin verir:
Modals
w3-modal sınıfı, saf HTML'de kalıcı diyalog sağlar:
Modal Görüntü:
İlerleme Çubukları (Progress Bars)
İlerleme Çubuklarında daha fazlasını okuyun
Açılır Menüler (Dropdowns)
w3-dropdowns sınıfları açılır listeler sağlar:
Akordiyon (Accordions)
Akordiyon için daha fazlasını okuyun
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Resimli Akordiyon:
Fransız Alpleri
Sekmeler (Tabs)
Sekmeler tek sayfalı web uygulamaları veya farklı konuları görüntüleyebilen web sayfaları için mükemmeldir.
Londra
Londra, İngiltere'nin başkentidir.
9 milyondan fazla nüfusuyla Birleşik Krallık'ın en kalabalık şehridir.
Paris
Paris, Fransa'nın başkentidir.
Paris bölgesi, 12 milyondan fazla nüfusuyla Avrupa'nın en büyük nüfus merkezlerinden biridir.
Tokyo
Tokyo, Japonya'nın başkentidir.
Büyük Tokyo Bölgesi'nin merkezi ve dünyanın en kalabalık metropol bölgesidir.
Navigasyon (Navigation)
w3-bar sınıfı, bir gezinme çubuğu oluşturmak için kullanılabilir:
Giriş içeren gezinti çubuğu:
Açılır listeli gezinti çubuğu:
w3-sidebar sınıfı bir yan gezinme oluşturur:
Sayfalandırma (Pagination)
sayfa numaralandırma için basit yollar sağlar.
Slayt Gösterileri (Slideshows)
Resimler veya diğer içerikler arasında geçiş yapmak için slayt gösterileri sağlar:
Hafif Kutu (Lightbox)
Bir ışık kutusu (modal resim galerisi) oluşturmak için Modal'ları ve Slayt Gösterilerini birleştirin:
Animasyonlar (Animations)
w3-animate sınıfları, öğeleri kaydırmak ve soldurmak için kolay bir yol sağlar:
Görüntüler (Images)
Görüntüleri şekillendirmek kolaydır:
Etkileri (Effects)
Herhangi bir öğeye özel efektler ekleyin:
opaklık
Gri Tonlama
Sepya
Giriş Formları (Input Forms)
w3-input sınıfları giriş formları içindir:
Giriş Formu
Giriş Formu
Filtreler (Filters)
Liste, tablo, açılır liste vb. içindeki belirli bir öğeyi aramak için filtreyi kullanın:
| Ad Soyad | Nerden? |
|---|---|
| Arda Balkar | Eskişehir |
| Metin Aksu | Giresun |
| Code | Dünya |
| Doğan Dağdelen | İstanbul |
| Altuğ Akgül | Ankara |
| Ömer Dinç | Jupiter'in içinden |
| Ümit Özdağ | Şam |
Yazı Tipleri (Fonts)
Web sayfasına yazı tipi eklemek son derece kolaydır:
Araç ipuçları (Tooltips)
w3-tooltip sınıfı, her tür araç ipucunu görüntüleyebilir:
Bu metnin üzerine gelin! Araç ipucu içeriği
Bu metnin üzerine gelin! Araç ipucu içeriği
Renk Temaları (Color Themes)
Renk temaları herhangi bir web uygulamasına kolayca eklenebilir:
Tema Indigo
Filmler 2014
-
Dondurulmuş
Animasyonlara verilen yanıt gülünçtü
-
Yıldızlarımızdaki Hata
Dokunaklı, sürükleyici ve gerçekten iyi yapılmış
-
Yenilmezler
Marvel ve Disney için büyük bir başarı
Tema Teal
Filmler 2014
-
Dondurulmuş
Animasyonlara verilen yanıt gülünçtü
-
Yıldızlarımızdaki Hata
Dokunaklı, sürükleyici ve gerçekten iyi yapılmış
-
Yenilmezler
Marvel ve Disney için büyük bir başarı
Renk temaları, mobil uygulamalar için mükemmel bir eşleşmedir.