W3.CSS Girişi ( Mutfak Lavabosu)
W3.CSS Renkleri
w3 renk sınıfları , pazarlama, yol işaretleri ve yapışkan notlarda kullanılan modern renklerden ilham almıştır:
W3.CSS Kapsayıcıları
w3-container sınıfı , W3.CSS sınıflarının en önemlisidir. Aşağıdaki gibi eşitlik sağlar:
- Ortak kenar boşlukları
- Ortak dolgular
- Ortak dikey hizalamalar
- Ortak yatay hizalamalar
- Ortak yazı tipleri
- Ortak renkler
w3-container sınıfı genellikle aşağıdaki gibi HTML kapsayıcı öğeleriyle birlikte kullanılır:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> ve daha fazlası.
Bu bir Başlık
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 altbilgi.
W3.CSS 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 milyonu aşan metropol alanıyla Birleşik Krallık'ın en kalabalık şehridir.
Londra, 9 milyonu aşan metropol alanıyla Birleşik Krallık'ın en kalabalık şehridir.
W3.CSS Uyarıları
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ı belirtir.
Başarı!
Yeşil genellikle başarılı veya olumlu bir şeyi gösterir.
Bilgi!
Mavi genellikle tarafsız bir bilgi değişikliği veya eylemi gösterir.
Örnek
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS Kartları
w3-card sınıfları hem görseller 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 tekerlekli olacak şekilde tasarlandığını belirtir.
(Vikipedi)
İnanılmaz
Fransız Alpleri
Örnek
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSS Tabloları
w3-table sınıfları her türlü tabloyu işleyebilir :
| İlk adı | Soyadı | Puan |
|---|---|---|
| Jill | Smith | 50 |
| Havva | Jackson | 94 |
| Adem | Johnson | 67 |
| Anja | delik | 100 |
Örnek
<table class="w3-table w3-striped w3-border">
W3.CSS Listeleri
w3-ul sınıfı her türlü listeyi işleyebilir :
-
Mike
Web Tasarımcısı -
Jill
Desteği -
Jane
Muhasebeci -
Jack
Danışmanı
Örnek
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSS Düğmeleri
w3-button ve w3-btn sınıfı , her boyutta ve türde düğmeler sağlar.
Geniş düğmeler:
Dairesel veya kare düğmeler:
W3.CSS Etiketleri, Etiketleri, Rozetleri ve İşaretleri
w3-tag ve w3-badge sınıfları her türlü etiketi, etiketi, rozeti ve işareti gösterebilir:
2 8 A B
Yeni Uyarı Tehlike Bilgi
NEFES ALMAYIN
W3.CSS Duyarlı
Duyarlı Izgara sınıfları , tüm cihaz türleri için yanıt verir: 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
50 piksel
dinlenmek
1/4
dinlenmek
100 piksel
45 piksel
dinlenmek
W3.CSS ayrıca küçük, orta ve büyük sınıflara sahip 12 sütunlu bir mobil öncelikli akışkan ızgarasını da destekler.
W3.CSS Ekranı
w3-display sınıfları , HTML öğelerini belirli konumlarda görüntülemenize olanak tanır:
W3.CSS Modelleri
w3-modal sınıfı , saf HTML'de kalıcı iletişim kutusu sağlar:
Kalıcı Görüntü:
W3.CSS İlerleme Çubukları
W3.CSS İlerleme Çubuklarında daha fazlasını okuyun
W3.CSS Açılır Listeleri
w3-dropdown sınıfları, açılır listeler sağlar :
W3.CSS Akordeonları
Read more at W3.CSS Accordions
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.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.