W3.CSS Referansı
W3.CSS Sınıfları
| Sınıf |
tanımlar |
|
| w3-konteyner |
16 piksel sol ve sağ dolgulu HTML kapsayıcı |
|
| |
Başlık olarak kullanılır |
|
| |
Altbilgi olarak kullanılır |
|
| w3 paneli |
16 piksel sol ve sağ dolgu ve 16 piksel üst ve alt kenar boşluğuna sahip HTML kapsayıcı |
|
| |
Bir not görüntülemek için kullanılır |
|
| |
Bir teklif görüntülemek için kullanılır |
|
| w3-rozeti |
Dairesel rozet |
|
| w3 gün |
dikdörtgen etiket |
|
| w3-ul |
Sırasız liste |
|
| w3-ekran-konteyner |
w3-display- sınıfları için kapsayıcı (elemanların kap içinde konumlandırılmasını sağlar) |
|
| w3-blok |
Herhangi bir öğe için tam genişlik tanımlamak için kullanılabilen sınıf |
|
| w3 kodu |
Kod kapsayıcısı |
|
| w3-kod aralığı |
Satır içi kod kapsayıcısı (kod parçacıkları için) |
|
| w3 içeriği |
Sabit boyutlu merkezli içerik için kapsayıcı |
|
| w3 araba |
Duyarlı boyut merkezli içerik için kapsayıcı |
|
| w3-streç |
Sağ ve sol kenar boşluklarını kaldıran sınıf (özellikle dolgulu satırları germek için kullanışlıdır (w3-satır dolgusu)) |
|
| Sınıf |
tanımlar |
|
| w3-tablo |
HTML tablosu için kapsayıcı |
|
| w3-çizgili |
çizgili masa |
|
| w3-sınır |
bordürlü masa |
|
| w3-kenarlıklı |
Kenarlıklı çizgiler |
|
| w3 merkezli |
ortalanmış masa |
|
| w3 üzerinde gezinilebilir |
gezinebilir masa |
|
| w3-tablo-tümü |
Tüm özellikler ayarlandı |
|
| |
w3 çizgili, w3 kenarlıklı ve w3 kenarlıklı |
|
| |
renkli kafa ile |
|
| |
w3 duyarlı |
|
| |
w3-minik ile |
|
| |
w3-küçük ile |
|
| |
w3-büyük ile |
|
| |
w3-xlarge ile |
|
| |
w3-xxlarge ile |
|
| |
w3-xxxlarge ile |
|
| |
renk ile |
|
| |
w3-jumbo ile |
|
| w3 duyarlı |
Duyarlı bir tablo oluşturur |
|
| Sınıf |
tanımlar |
|
| w3-kart |
w3-card-2 ile aynı |
|
| w3-kart-2 |
Herhangi bir HTML içeriği için kapsayıcı (2 piksel kenarlıklı gölge) |
|
| w3-kart-4 |
Herhangi bir HTML içeriği için kapsayıcı (4 piksel kenarlıklı gölge) |
|
| Sınıf |
tanımlar |
|
| w3-satır |
Bir satır sıvıya duyarlı içerik için kapsayıcı |
|
| w3-satır dolgusu |
Tüm sütunların varsayılan dolguya sahip olduğu satır |
|
| w3 araba |
Duyarlı boyut merkezli içerik için kapsayıcı |
|
| w3-streç |
Sağ ve sol kenar boşluklarını kaldıran sınıf |
|
| w3-yarım |
Yarım (1/2) elek sütun kabı |
|
| w3-üçüncü |
Üçüncü (1/3) ekran sütunu kabı |
|
| w3-üçte iki |
İki üçüncü (2/3) ekran sütun kabı |
|
| w3-çeyrek |
Çeyrek (1/4) ekran sütun kabı |
|
| w3-üç çeyrek |
Dörtte üçü (3/4) ekran sütun kabı |
|
| w3-col |
Herhangi bir HTML içeriği için sütun kabı |
|
| w3-dinlenme |
Sütun genişliğinin geri kalanını kaplar |
|
| |
|
|
| l1 - l12 |
Büyük ekranlar için duyarlı boyutlar |
|
| m1 - m12 |
Orta ekranlar için duyarlı boyutlar |
|
| s1 - s12 |
Küçük ekranlar için duyarlı boyutlar |
|
| |
|
|
| w3-gizle-küçük |
İçeriği küçük ekranlarda gizleyin (601 pikselden az) |
|
| w3-gizle-orta |
Orta ekranlarda içeriği gizle |
|
| w3-gizle-büyük |
İçeriği büyük ekranlarda gizle (992 pikselden büyük) |
|
| |
|
|
| w3-resmi |
Duyarlı resim |
|
| |
|
|
| w3-mobil |
Herhangi bir öğeye mobil öncelikli yanıt özelliği ekler.
Öğeleri mobil cihazlarda blok öğeler olarak görüntüler. |
|
| Sınıf |
tanımlar |
|
| w3 hücre satırı |
Düzen sütunları (hücreler) için kapsayıcı. |
|
| w3 hücreli |
Düzen sütunu (hücre). |
|
| w3-hücre üstü |
İçeriği bir sütunun (hücrenin) en üstüne hizalar. |
|
| w3-hücre-orta |
İçeriği bir sütunun (hücrenin) dikey ortasına hizalar. |
|
| w3-hücre-alt |
İçeriği bir sütunun (hücrenin) altına hizalar. |
|
| Sınıf |
tanımlar |
|
| w3 çubuğu |
Yatay çubuk |
|
| w3-bar-blok |
Dikey çubuk |
|
| w3-çubuk-öğesi |
Bar öğeleri için ortak stil sağlar |
|
| w3-kenar çubuğu |
yan çubuk |
|
| |
Bir kenar çubuğu her tür içeriği içerebilir |
|
| |
Ana içeriği kaplayan bir yan çubuk |
|
| |
Tüm ana içeriği kaplayan bir yan çubuk |
|
| |
Ana içeriği sağa kaydıran bir kenar çubuğu |
|
| |
Bindirme arka planı olan bir yan çubuk |
|
| |
Sağ tarafta bir Yan çubuk |
|
| w3-çöküşü |
Tam otomatik, duyarlı bir yan gezinme oluşturmak için w3 kenar çubuğuyla birlikte kullanılır. Bu sınıfın çalışması için sayfa içeriğinin bir "w3-main" sınıfı içinde olması gerekir. |
|
| w3-ana |
Duyarlı yan gezinmeler için w3-collapse sınıfını kullanırken sayfa içeriği için kapsayıcı |
|
| |
Tam otomatik sağ taraflı duyarlı yan gezinme |
|
| w3-açılır-tıklama |
Tıklanabilir açılır öğe |
|
| w3-açılır-açılır-hover |
Hoverable açılır öğe |
|
| |
Hoverable açılır öğe (w3-bar'da kullanılır) |
|
| |
Hoverable açılır öğe (w3-bar-block'ta kullanılır) |
|
| |
Üzerine gelinebilir açılır öğe (w3 kenar çubuğunda kullanılır) |
|
| Sınıf |
tanımlar |
|
| w3 düğmesi |
Fareyle üzerine gelindiğinde gri arka plan rengine sahip dikdörtgen düğme |
|
| w3-btn |
Vurgulu üzerinde gölgeler olan dikdörtgen düğme |
|
| w3-daire |
Dairesel bir düğme oluşturmak için kullanılabilir |
|
| w3-dalgalanma |
Dalgalanma efektli dikdörtgen düğme |
|
| |
Dalgalanma efektli dairesel kayan düğme |
|
| w3 çubuğu |
Öğeleri (düğmeler gibi) yatay bir çubukta gruplamak için kullanılabilir |
|
| w3-blok |
Tam genişlikte bir w3 düğmesi tanımlamak için kullanılabilecek sınıf |
|
| |
Tam genişlik w3-btn |
|
| |
Tam genişlikte dairesel düğme |
|
| Sınıf |
tanımlar |
|
| w3-giriş |
Giriş öğeleri |
|
| |
Kart olarak giriş formu |
|
| |
Giriş öğeleri (üst etiketler) |
|
| |
Giriş öğeleri (alt etiketler) |
|
| w3-kontrol |
Onay kutusu giriş türü |
|
| w3 radyo |
Radyo giriş tipi |
|
| w3-seçimi |
Giriş seçme elemanı |
|
| w3-animate-girişi |
Bir girdinin genişliğini %100 olarak canlandırır |
|
| Sınıf |
tanımlar |
|
| w3-modlu |
kalıcı kapsayıcı |
|
| w3-modal-içerik |
Kalıcı açılır öğe |
|
| w3-araç ipucu |
Araç ipucu öğesi |
|
| w3-metin |
Araç ipucu metni |
|
| Sınıf |
tanımlar |
|
| w3-animate-top |
Bir öğeyi ilk -300 pikselden 0 piksele canlandırır |
|
| w3-animasyon-sol |
Bir öğeyi soldan -300 pikselden 0 piksele canlandırır |
|
| w3-animate-alt |
Bir öğeyi alttan -300 pikselden 0 piksele canlandırır |
|
| w3-animasyon-sağ |
Bir öğeyi sağdan -300 pikselden 0 piksele kadar canlandırır |
|
| w3-animasyon-opaklık |
Bir öğenin opaklığını 0'dan 1'e canlandırır |
|
| w3-animasyon-yakınlaştırma |
Bir öğeyi boyut olarak %0'dan %100'e kadar canlandırır |
|
| w3-animasyon-solma |
Bir öğenin opaklığını 0'dan 1'e ve 1'den 0'a canlandırır (kararır VE söner) |
|
| w3-spin |
Bir simgeyi 360 derece döndürme |
|
| |
Herhangi bir öğeyi 360 derece döndürün |
|
| w3-animate-girişi |
Bir giriş alanının genişliğini %100 olarak canlandırır |
|
| Sınıf |
tanımlar |
|
| w3-minik |
10 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-küçük |
12 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-büyük |
18 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-xlarge |
24 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-xxlarge |
32 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-xxxlarge |
48 piksellik bir yazı tipi boyutunu belirtir |
|
| w3-jumbo |
64 piksellik bir yazı tipi boyutunu belirtir |
|
| w3 çapında |
Daha geniş bir metin belirtir |
|
| w3-serif |
Yazı tipini serif olarak değiştirir |
|
| w3-sans-serif |
Yazı tipini sans-serif olarak değiştirir |
|
| w3-el yazısı |
Yazı tipini el yazısı olarak değiştirir |
|
| w3-tek boşluk |
Yazı tipini monospace olarak değiştirir |
|
| Sınıf |
tanımlar |
|
| w3-merkezi |
ortalanmış içerik |
|
| w3-sol |
Bir öğeyi sola kaydırır (kayan: sol) |
|
| w3-sağ |
Bir öğeyi sağa kaydırır (kayan: sağ) |
|
| w3-sola hizalama |
Sola hizalanmış metin |
|
| w3-sağa hizala |
Sağa hizalanmış metin |
|
| w3-haklamak |
Sağa ve sola hizalanmış metin |
|
| w3-blok |
Herhangi bir öğe için tam genişlik tanımlamak için kullanılabilen sınıf |
|
| w3-daire |
Daire içine alınmış içerik |
|
| w3-gizle |
Gizli içerik (ekran:yok) |
|
| w3 gösterisi |
İçeriği göster (görüntüle:blok) |
|
| w3-show-block |
w3-show'un takma adı (ekran:blok) |
|
| w3-show-inline-block |
İçeriği satır içi blok olarak göster (ekran: satır içi blok) |
|
| w3-üst |
Sayfanın üst kısmındaki sabit içerik |
|
| w3-alt |
Bir sayfanın altındaki sabit içerik |
|
| w3-ekran-konteyner |
w3-display- sınıfları için kapsayıcı (konum: göreli) |
|
| w3-ekran-üst sol |
İçeriği w3-display-container'ın sol üst köşesinde görüntüler |
|
| w3-ekran-üst sağ |
İçeriği w3-display-container'ın sağ üst köşesinde görüntüler |
|
| w3-ekran-alt sol |
İçeriği w3-display-container'ın sol alt köşesinde görüntüler |
|
| w3-ekran-sağ alt |
İçeriği w3-display-container'ın sağ alt köşesinde görüntüler |
|
| w3-ekran-sol |
İçeriği w3-display-container'ın solunda (orta sol) görüntüler |
|
| w3-ekran-sağ |
İçeriği w3-display-container'ın sağında (orta sağda) görüntüler |
|
| w3-ekran-orta |
İçeriği w3-display-container'ın ortasında (ortada) görüntüler |
|
| w3-ekran-üst orta |
İçeriği w3-display-container'ın üst ortasında görüntüler |
|
| w3-ekran-alt-orta |
İçeriği w3-display-container'ın alt ortasında görüntüler |
|
| w3-ekran-konumu |
İçeriği w3-display-container'da belirtilen bir konumda görüntüler |
|
| w3-ekran-vurgusu |
W3-display-container'ın içinde fareyle üzerine gelindiğinde içeriği görüntüler |
|
| Sınıf |
tanımlar |
|
| w3-opaklık |
Bir öğeye opaklık/saydamlık ekler (opaklık: 0.6) |
|
| |
Metne opaklık/şeffaflık ekleyin |
|
| w3-opaklık-kapalı |
Opaklığı/saydamlığı kapatır (opaklık: 1) |
|
| w3-opaklık-min |
Bir öğeye opaklık/saydamlık ekler (opaklık: 0.75) |
|
| w3-opaklık-maks |
Bir öğeye opaklık/saydamlık ekler (opaklık: 0,25) |
|
| w3-gri tonlamalı-min |
Bir öğeye gri tonlama efekti ekler (gri tonlama: %50) |
|
| w3-gri tonlamalı |
Bir öğeye gri tonlama efekti ekler (gri tonlama: %75) |
|
| w3-gri tonlamalı-maks |
Bir öğeye gri tonlama efekti ekler (gri tonlama: %100) |
|
| w3-sepya-min |
Bir öğeye sepya efekti ekler (sepya: %50) |
|
| w3-sepya |
Bir öğeye sepya efekti ekler (sepya: %75) |
|
| w3-sepya-max |
Bir öğeye sepya efekti ekler (sepya: %100) |
|
| w3-yer paylaşımı |
Bir bindirme efekti oluşturur |
|
| Sınıf |
tanımlar |
|
| w3-kırmızı |
Arka plan rengi kırmızı |
|
| w3-pembe |
Arka plan rengi pembe |
|
| w3-mor |
Arka plan rengi mor |
|
| w3-derin-mor |
Arka plan rengi koyu mor |
|
| w3-indigo |
Arka plan rengi çivit |
|
| w3-mavi |
Arka plan rengi mavi |
|
| w3-açık mavi |
Arka plan rengi açık mavi |
|
| w3-camgöbeği |
Arka plan rengi camgöbeği |
|
| w3-su |
Arka plan rengi su |
|
| w3-mavi |
Arka plan rengi turkuaz |
|
| w3-yeşil |
Arka plan rengi yeşil |
|
| w3-açık yeşil |
Arka plan rengi açık yeşil |
|
| w3-kireç |
Arka plan rengi kireç |
|
| w3-kum |
Arka plan rengi kum |
|
| w3-haki |
Arka plan rengi haki |
|
| w3-sarı |
Arka plan rengi sarı |
|
| w3-amber |
Arka plan rengi kehribar |
|
| w3-turuncu |
Arka plan rengi turuncu |
|
| w3-derin-turuncu |
Arka plan rengi koyu turuncu |
|
| w3-mavi-gri |
Arka plan rengi mavi gri |
|
| w3-kahverengi |
Arka plan rengi kahverengi |
|
| w3-açık gri |
Arka plan rengi açık gri |
|
| w3-gri |
Arka plan rengi gri |
|
| w3-koyu-gri |
Arka plan rengi koyu gri |
|
| w3-siyah |
Arka plan rengi siyah |
|
| w3-soluk-kırmızı |
Arka plan rengi soluk kırmızı |
|
| w3-soluk-sarı |
Arka plan rengi soluk sarı |
|
| w3-soluk-yeşil |
Arka plan rengi soluk yeşil |
|
| w3-soluk-mavi |
Arka plan rengi soluk mavi |
|
| w3-şeffaf |
Şeffaf arka plan rengi |
|
Hover Renk Sınıfları
Yukarıdaki renkler, vurgulu sınıflar olarak da kullanılabilir:
| Sınıf |
tanımlar |
|
| w3-hover-beyaz |
vurgulu renk beyaz |
|
| w3-hover-siyah |
vurgulu renk siyah |
|
| w3-hover-kırmızı |
vurgulu renk kırmızı |
|
| w3-hover-mavi |
vurgulu renk mavi |
|
| w3-hover-yeşil |
vurgulu renk yeşil |
|
| w3-hover-aqua |
vurgulu renk su |
|
| w3-vurgulu-turuncu |
Vurgulu renk turuncu |
|
| w3-hover-gri |
vurgulu renk gri |
|
| w3-hover-soluk-yeşil |
Hover rengi soluk yeşil |
|
| Sınıf |
tanımlar |
|
| w3-metin-kırmızı |
Metin rengi kırmızı |
|
| w3-metin-yeşil |
Metin rengi yeşil |
|
| w3-metin-mavi |
Metin rengi mavi |
|
| w3-metin-sarı |
Metin rengi sarı |
|
| w3-metin-açık-gri |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
