W3 CSS Framework Seven Geliştiriciler Topluluğu W3 CSS Framework

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.


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.


"Mümkün olduğu kadar basitleştirin, ancak daha basit değil."

Albert Einstein


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

Car

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:

Sol Üst
Sağ Üst
Sol Alt
Sağ Alt
Sol
Sağ
Orta
Üst Orta
Alt Orta

Pants
Sol üst
Sağ Üst
Sol Alt
Sağ Alt
Sol
Sağ
Orta
Üst Orta
Alt Orta

Modals

w3-modal sınıfı, saf HTML'de kalıcı diyalog sağlar:

×

Üst Bilgi

Bazı metinler. Bazı metinler. Bazı metinler.

Bazı metinler. Bazı metinler. Bazı metinler.

Alt Bilgi



Modal Görüntü:

Nature
×
Nature

İlerleme Çubukları (Progress Bars)

İlerleme Çubuklarında daha fazlasını okuyun

25%

50%

0


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.

« 1 2 3 4 5 »



Slayt Gösterileri (Slideshows)

Resimler veya diğer içerikler arasında geçiş yapmak için slayt gösterileri sağlar:

1 / 3
Güzel Doğa
2 / 3
Fransız Alpleri
3 / 3
Dağlar

Hafif Kutu (Lightbox)

Bir ışık kutusu (modal resim galerisi) oluşturmak için Modal'ları ve Slayt Gösterilerini birleştirin:

×

Doğa ve Gün Doğumu
Fransız Alpleri
Dağlar ve Fiyortlar

Animasyonlar (Animations)

w3-animate sınıfları, öğeleri kaydırmak ve soldurmak için kolay bir yol sağlar:


Animasyon Eğlencelidir!
Animasyon Eğlencelidir!
Animasyon Eğlencelidir!
Animasyon Eğlencelidir!
Animasyon Eğlencelidir!
Animasyon Eğlencelidir!
Animasyon Eğlencelidir!

Görüntüler (Images)

Görüntüleri şekillendirmek kolaydır:

Northern Lights
Forest
Mountains
Nature
Nature

Etkileri (Effects)

Herhangi bir öğeye özel efektler ekleyin:

Normal

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:

Web'i güzelleştirmek!
Web'i yapmak!

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.