Referensi W3.CSS
Kelas W3.CSS
| Kelas |
Mendefinisikan |
|
| w3-wadah |
Wadah HTML dengan padding kiri dan kanan 16px |
|
| |
Digunakan sebagai tajuk |
|
| |
Digunakan sebagai catatan kaki |
|
| w3-panel |
Wadah HTML dengan padding kiri dan kanan 16px dan margin atas dan bawah 16px |
|
| |
Digunakan untuk menampilkan catatan |
|
| |
Digunakan untuk menampilkan kutipan |
|
| lencana w3 |
Lencana melingkar |
|
| w3 hari |
Label persegi panjang |
|
| w3-ul |
Daftar tidak berurutan |
|
| w3-display-container |
Wadah untuk kelas tampilan-w3 (memungkinkan pemosisian elemen di dalam wadah) |
|
| w3-blok |
Kelas yang dapat digunakan untuk menentukan lebar penuh untuk elemen apa pun |
|
| kode-w3 |
Wadah kode |
|
| w3-codespan |
Wadah kode sebaris (untuk cuplikan kode) |
|
| w3-konten |
Wadah untuk konten terpusat ukuran tetap |
|
| mobil w3 |
Wadah untuk konten terpusat ukuran responsif |
|
| w3-peregangan |
Kelas yang menghilangkan margin kanan dan kiri (terutama berguna untuk meregangkan baris yang diisi (w3-row-padding)) |
|
| Kelas |
Mendefinisikan |
|
| w3-tabel |
Wadah untuk tabel HTML |
|
| bergaris w3 |
meja bergaris |
|
| w3-perbatasan |
Meja berbatas |
|
| berbatasan w3 |
Garis berbatas |
|
| berpusat pada w3 |
Meja tengah |
|
| w3-hoverable |
Meja melayang |
|
| w3-tabel-semua |
Semua properti ditetapkan |
|
| |
Dengan garis-w3, batas-w3, dan batas-w3 |
|
| |
Dengan kepala berwarna |
|
| |
Dengan w3-responsif |
|
| |
Dengan w3-tiny |
|
| |
Dengan w3-kecil |
|
| |
Dengan w3-besar |
|
| |
Dengan w3-xlarge |
|
| |
Dengan w3-xxlarge |
|
| |
Dengan w3-xxxlarge |
|
| |
Dengan warna |
|
| |
Dengan w3-jumbo |
|
| w3-responsif |
Membuat tabel responsif |
|
| Kelas |
Mendefinisikan |
|
| w3-kartu |
Sama seperti w3-card-2 |
|
| w3-kartu-2 |
Wadah untuk konten HTML apa pun (bayangan berbatas 2px) |
|
| w3-kartu-4 |
Wadah untuk konten HTML apa pun (bayangan berbatas 4px) |
|
| Kelas |
Mendefinisikan |
|
| w3-baris |
Wadah untuk satu baris konten responsif cair |
|
| w3-baris-padding |
Baris di mana semua kolom memiliki padding default |
|
| mobil w3 |
Wadah untuk konten terpusat ukuran responsif |
|
| w3-peregangan |
Kelas yang menghilangkan margin kanan dan kiri |
|
| w3-setengah |
Setengah (1/2) wadah kolom layar |
|
| w3-ketiga |
Wadah kolom layar ketiga (1/3) |
|
| w3-dua pertiga |
Dua pertiga (2/3) wadah kolom layar |
|
| w3-kuartal |
Seperempat (1/4) wadah kolom layar |
|
| w3-tiga perempat |
Tiga perempat (3/4) wadah kolom layar |
|
| w3-kol |
Penampung kolom untuk konten HTML apa pun |
|
| w3-istirahat |
Menempati sisa lebar kolom |
|
| |
|
|
| l1 - l12 |
Ukuran responsif untuk layar besar |
|
| m1 - m12 |
Ukuran responsif untuk layar sedang |
|
| s1 - s12 |
Ukuran responsif untuk layar kecil |
|
| |
|
|
| w3-sembunyikan-kecil |
Sembunyikan konten di layar kecil (kurang dari 601 piksel) |
|
| w3-sembunyikan-sedang |
Sembunyikan konten di layar sedang |
|
| w3-sembunyikan-besar |
Sembunyikan konten di layar besar (lebih besar dari 992px) |
|
| |
|
|
| w3-gambar |
Gambar responsif |
|
| |
|
|
| w3-seluler |
Menambahkan respons yang mengutamakan seluler ke elemen apa pun.
Menampilkan elemen sebagai elemen blok pada perangkat seluler. |
|
| Kelas |
Mendefinisikan |
|
| w3-sel-baris |
Wadah untuk kolom tata letak (sel). |
|
| w3-sel |
Kolom tata letak (sel). |
|
| w3-sel-atas |
Meratakan konten di bagian atas kolom (sel). |
|
| w3-sel-tengah |
Meratakan konten di tengah vertikal kolom (sel). |
|
| w3-sel-bawah |
Meratakan konten di bagian bawah kolom (sel). |
|
| Kelas |
Mendefinisikan |
|
| w3-bar |
Batang horizontal |
|
| w3-bar-blok |
Batang vertikal |
|
| w3-bar-item |
Menyediakan gaya umum untuk item bar |
|
| bilah sisi w3 |
Bilah samping |
|
| |
Bilah samping dapat berisi semua jenis konten |
|
| |
Bilah samping melapisi konten utama |
|
| |
Bilah samping melapisi semua konten utama |
|
| |
Bilah samping menggeser konten utama ke kanan |
|
| |
Bilah samping dengan latar belakang hamparan |
|
| |
Bilah samping di sisi kanan |
|
| w3-runtuh |
Digunakan bersama dengan w3-sidebar untuk membuat navigasi samping yang sepenuhnya otomatis dan responsif. Agar kelas ini berfungsi, konten halaman harus berada dalam kelas "w3-main" |
|
| w3-utama |
Wadah untuk konten halaman saat menggunakan kelas w3-collapse untuk navigasi samping yang responsif |
|
| |
Navigasi sisi kanan yang sepenuhnya otomatis dan responsif |
|
| w3-tarik-turun-klik |
Elemen tarik-turun yang dapat diklik |
|
| w3-dropdown-arahkan |
Elemen tarik-turun yang dapat dilayangkan |
|
| |
Elemen dropdown melayang (digunakan di w3-bar) |
|
| |
Elemen dropdown melayang (digunakan di w3-bar-block) |
|
| |
Elemen dropdown melayang (digunakan di w3-sidebar) |
|
| Kelas |
Mendefinisikan |
|
| tombol w3 |
Tombol persegi panjang dengan warna latar abu-abu saat dilayangkan |
|
| w3-btn |
Tombol persegi panjang dengan bayangan di hover |
|
| w3-lingkaran |
Dapat digunakan untuk membuat tombol melingkar |
|
| w3-riak |
Tombol persegi panjang dengan efek riak |
|
| |
Tombol mengambang melingkar dengan efek riak |
|
| w3-bar |
Dapat digunakan untuk mengelompokkan elemen (seperti tombol) di bilah horizontal |
|
| w3-blok |
Kelas yang dapat digunakan untuk mendefinisikan tombol w3 lebar penuh |
|
| |
Lebar penuh w3-btn |
|
| |
Tombol melingkar lebar penuh |
|
| Kelas |
Mendefinisikan |
|
| masukan w3 |
Elemen masukan |
|
| |
Masukkan formulir sebagai kartu |
|
| |
Elemen masukan (label atas) |
|
| |
Elemen input (label bawah) |
|
| w3-cek |
Jenis masukan kotak centang |
|
| radio w3 |
Jenis masukan radio |
|
| w3-pilih |
Masukkan elemen pilih |
|
| w3-animate-input |
Menganimasikan lebar input hingga 100% |
|
| Kelas |
Mendefinisikan |
|
| w3-modal |
Wadah modal |
|
| w3-modal-konten |
Elemen pop-up modal |
|
| w3-tooltip |
elemen tooltip |
|
| w3-teks |
Teks keterangan alat |
|
| Kelas |
Mendefinisikan |
|
| w3-animasi-atas |
Menganimasikan elemen dari atas -300px hingga 0px |
|
| w3-animasi-kiri |
Menganimasikan elemen dari kiri -300px hingga 0px |
|
| w3-animate-bottom |
Menganimasikan elemen dari bawah -300px hingga 0px |
|
| w3-animasi-kanan |
Menganimasikan elemen dari kanan -300px hingga 0px |
|
| w3-animate-opacity |
Menganimasikan opacity elemen dari 0 hingga 1 |
|
| w3-animate-zoom |
Menganimasikan elemen dari ukuran 0 hingga 100% |
|
| w3-animate-memudar |
Menganimasikan opasitas elemen dari 0 hingga 1 dan 1 hingga 0 (memudar masuk DAN keluar) |
|
| w3-spin |
Putar ikon 360 derajat |
|
| |
Putar elemen apa pun 360 derajat |
|
| w3-animate-input |
Menganimasikan lebar bidang input hingga 100% |
|
| Kelas |
Mendefinisikan |
|
| w3-kecil |
Menentukan ukuran font 10 piksel |
|
| w3-kecil |
Menentukan ukuran font 12 piksel |
|
| w3-besar |
Menentukan ukuran font 18 piksel |
|
| w3-xlarge |
Menentukan ukuran font 24 piksel |
|
| w3-xxlarge |
Menentukan ukuran font 32 piksel |
|
| w3-xxxlarge |
Menentukan ukuran font 48 piksel |
|
| w3-jumbo |
Menentukan ukuran font 64 piksel |
|
| lebar w3 |
Menentukan teks yang lebih luas |
|
| w3-serif |
Mengubah font menjadi serif |
|
| w3-sans-serif |
Mengubah font menjadi sans-serif |
|
| w3-kursif |
Ubah font menjadi kursif |
|
| w3-monospace |
Mengubah font menjadi monospace |
|
| Kelas |
Mendefinisikan |
|
| w3-pusat |
Konten terpusat |
|
| w3-kiri |
Mengambang elemen ke kiri (mengambang: kiri) |
|
| w3-kanan |
Mengambang elemen ke kanan (mengambang: kanan) |
|
| w3-kiri-sejajar |
Teks rata kiri |
|
| w3-right-align |
Teks rata kanan |
|
| w3-membenarkan |
Teks rata kanan dan kiri |
|
| w3-blok |
Kelas yang dapat digunakan untuk menentukan lebar penuh untuk elemen apa pun |
|
| w3-lingkaran |
Konten yang dilingkari |
|
| w3-sembunyikan |
Konten tersembunyi (tampilan: tidak ada) |
|
| pertunjukan w3 |
Tampilkan konten (tampilan: blokir) |
|
| w3-show-block |
Alias dari w3-show (tampilan: blok) |
|
| w3-tampilkan-sebaris-blok |
Tampilkan konten sebagai inline-block (tampilan: inline-block) |
|
| w3-atas |
Memperbaiki konten di bagian atas halaman |
|
| w3-bawah |
Memperbaiki konten di bagian bawah halaman |
|
| w3-display-container |
Wadah untuk kelas tampilan-w3 (posisi: relatif) |
|
| w3-tampilan-kiri atas |
Menampilkan konten di sudut kiri atas w3-display-container |
|
| w3-display-topright |
Menampilkan konten di sudut kanan atas w3-display-container |
|
| w3-tampilan-kiri bawah |
Menampilkan konten di sudut kiri bawah w3-display-container |
|
| w3-tampilan-kanan bawah |
Menampilkan konten di sudut kanan bawah w3-display-container |
|
| w3-tampilan-kiri |
Menampilkan konten ke kiri (kiri tengah) dari w3-display-container |
|
| w3-tampilan-kanan |
Menampilkan konten di sebelah kanan (kanan tengah) dari w3-display-container |
|
| w3-tampilan-tengah |
Menampilkan konten di tengah (tengah) wadah-tampilan w3 |
|
| w3-tampilan-tengah atas |
Menampilkan konten di tengah atas w3-display-container |
|
| w3-display-bottommiddle |
Menampilkan konten di tengah bawah w3-display-container |
|
| w3-tampilan-posisi |
Menampilkan konten pada posisi tertentu di w3-display-container |
|
| w3-display-hover |
Menampilkan konten saat mengarahkan kursor ke dalam w3-display-container |
|
| Kelas |
Mendefinisikan |
|
| w3-opacity |
Menambahkan opacity/transparansi ke elemen (opacity: 0.6) |
|
| |
Tambahkan opacity/transparansi ke teks |
|
| w3-opacity-off |
Mematikan opacity/transparency (opacity: 1) |
|
| w3-opacity-min |
Menambahkan opacity/transparansi ke elemen (opacity: 0,75) |
|
| w3-opacity-max |
Menambahkan opacity/transparansi ke elemen (opacity: 0.25) |
|
| w3-skala abu-abu-min |
Menambahkan efek skala abu-abu ke elemen (skala abu-abu: 50%) |
|
| w3-skala abu-abu |
Menambahkan efek skala abu-abu ke elemen (skala abu-abu: 75%) |
|
| w3-skala abu-abu-max |
Menambahkan efek skala abu-abu ke elemen (skala abu-abu: 100%) |
|
| w3-sepia-min |
Menambahkan efek sepia ke elemen (sepia: 50%) |
|
| w3-sepia |
Menambahkan efek sepia ke elemen (sepia: 75%) |
|
| w3-sepia-max |
Menambahkan efek sepia ke elemen (sepia: 100%) |
|
| w3-overlay |
Menciptakan efek overlay |
|
| Kelas |
Mendefinisikan |
|
| w3-merah |
Warna latar belakang merah |
|
| w3-merah muda |
Warna latar belakang merah muda |
|
| w3-ungu |
Warna latar belakang ungu |
|
| w3-ungu-dalam |
Warna latar belakang ungu tua |
|
| w3-indigo |
Warna latar belakang nila |
|
| w3-biru |
Warna latar belakang biru |
|
| w3-biru muda |
Warna latar belakang biru muda |
|
| w3-cyan |
Warna latar cyan |
|
| w3-aqua |
Warna latar belakang aqua |
|
| w3-teal |
Warna latar belakang teal |
|
| w3-hijau |
Warna latar belakang hijau |
|
| w3-hijau muda |
Warna latar belakang hijau muda |
|
| w3-lime |
Warna latar belakang kapur |
|
| w3-pasir |
Pasir warna latar belakang |
|
| w3-khaki |
Warna latar belakang khaki |
|
| w3-kuning |
Warna latar belakang kuning |
|
| w3-kuning |
Warna latar belakang kuning |
|
| w3-oranye |
Warna latar belakang oranye |
|
| w3-oranye-dalam |
Warna latar belakang oranye tua |
|
| w3-biru-abu-abu |
Warna latar belakang abu-abu biru |
|
| w3-coklat |
Warna latar belakang coklat |
|
| w3-abu-abu muda |
Warna latar belakang abu-abu muda |
|
| w3-abu-abu |
Warna latar belakang abu-abu |
|
| w3-abu-abu tua |
Warna latar belakang abu-abu tua |
|
| w3-hitam |
Warna latar belakang hitam |
|
| w3-pucat-merah |
Warna latar belakang merah pucat |
|
| w3-kuning-pucat |
Warna latar belakang kuning pucat |
|
| w3-hijau-pucat |
Warna latar belakang hijau pucat |
|
| w3-biru-pucat |
Warna latar belakang biru pucat |
|
| w3-transparan |
Warna latar transparan |
|
Arahkan Kelas Warna
Warna-warna di atas juga dapat digunakan sebagai kelas hover:
| Kelas |
Mendefinisikan |
|
| w3-hover-putih |
Arahkan warna putih |
|
| w3-hover-hitam |
Arahkan warna hitam |
|
| w3-arahkan-merah |
Arahkan warna merah |
|
| w3-arahkan-biru |
Arahkan warna biru |
|
| w3-hover-hijau |
Arahkan warna hijau |
|
| w3-hover-aqua |
Arahkan warna aqua |
|
| w3-hover-oranye |
Arahkan warna oranye |
|
| w3-arahkan-abu-abu |
Arahkan warna abu-abu |
|
| w3-arahkan-hijau-pucat |
Arahkan warna hijau pucat |
|
| Kelas |
Mendefinisikan |
|
| w3-teks-merah |
Warna teks merah |
|
| w3-teks-hijau |
Warna teks hijau |
|
| w3-teks-biru |
Warna teks biru |
|
| w3-teks-kuning |
Warna teks kuning |
|
| w3-teks-abu-abu muda |
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 |
|
