tutorial pengembangan web terbaru
 

W3.CSS contoh

×

Header


W3.CSS Kontainer

kontainer dasar
Wadah dengan warna
Header wadah
kontainer footer
Artikel wadah dan bagian
catatan kontainer
panel wadah
kutipan wadah
Wadah dengan <div> elemen
Wadah dengan elemen semantik
kontainer Padding
Wadah dengan header dan paragraf
kontainer sectioning
Menyembunyikan / kontainer menutup
Tampilkan / wadah terbuka

contoh menjelaskan


W3.CSS Borders

Borders
menampilkan catatan
menampilkan panel
menampilkan kutipan
Menampilkan perbatasan hoverable
Menampilkan kode HTML
Menampilkan kode CSS
Menampilkan kode JavaScript

contoh menjelaskan


W3.CSS Utilities / Pembantu

Padding di semua sisi
Padding horisontal
Padding vertikal
Margin utilitas
utilitas ukuran
pembulatan utilitas
lingkaran utilitas
utilitas pusat
mengambang utilitas
Tampilkan / sembunyikan utilitas

contoh menjelaskan


Tombol W3.CSS

Tombol dasar
warna tombol
warna Hover
bentuk tombol
ukuran tombol
batas tombol
Tombol dengan efek teks
Tombol dengan efek bayangan
Tombol dengan efek teks yang ramping dan lebar
Tombol-lebar penuh
tombol dinonaktifkan
kelompok tombol
Tombol dengan efek riak
Mengambang tombol (melingkar)
Tombol mengambang besar

contoh menjelaskan


Kartu W3.CSS

kartu dasar
kartu berwarna
kartu foto
konten kartu
kartu Hoverable
Kartu Avatar dengan tombol
Kartu avatar dengan tombol full-width

contoh menjelaskan


W3.CSS Alerts

alert dasar
alert closable
alert bulat
kartu peringatan

contoh menjelaskan


Tabel W3.CSS

tabel dasar
Berbatasan meja (pemisah horisontal)
tabel bergaris
Berbatasan meja bergaris
Perbatasan di sekitar meja
Membalik garis-garis
Meja dengan judul berwarna
warna meja
Hoverable meja (warna abu-abu)
Spesifik warna meja hoverable
kartu meja
meja responsif
meja kecil
Meja kecil
meja besar
tabel XLarge
tabel XXLarge
tabel XXXLarge
tabel jumbo

contoh menjelaskan


Daftar W3.CSS

daftar dasar
daftar berbatasan
Header Daftar
kartu daftar
daftar berpusat
daftar berwarna
Item daftar berwarna
Daftar Hoverable (warna abu-abu)
Spesifik warna daftar hoverable
daftar closable
daftar empuk
daftar Avatar
daftar kecil
daftar kecil
daftar besar
daftar XLarge
daftar XXLarge
daftar XXXLarge
daftar jumbo

contoh menjelaskan


Gambar W3.CSS

gambar bulat
gambar dilingkari
image berbatasan
image Hoverable
kartu gambar
gambar teks
Album Foto

contoh menjelaskan


W3.CSS Input

label atas
label bawah
kartu masukan
label hijau
Memvalidasi input label
label berwarna
input berbatasan
bulat perbatasan
masukan borderless
input berwarna
input Hoverable
input animasi
centang
tombol radio
Pilih menu
Pilih menu berbatasan
Elemen form di grid tiga kolom
Tata letak dua kolom dengan label

contoh menjelaskan


W3.CSS Lencana

lencana
Tags
Daftar dengan lencana
tags besar
lencana besar
Menampilkan huruf sebagai tag

contoh menjelaskan


W3.CSS Tanda

Tag sebagai tanda
Tags berturut-turut
Tanda-tanda jalan
tanda-tanda besar
Tanda-tanda besar 2
Tanda-tanda bulat besar
Menampilkan bendera

contoh menjelaskan


W3.CSS Responsif

The w3-setengah kelas
Kelas w3-ketiga
Kelas w3-twothird
Kelas w3-kuartal
Kelas w3-threequarter
Baris bersarang (w3-setengah dalam w3-setengah)
Kolom menggunakan w3-sisa
Kolom menggunakan persen
Kelas w3-konten
Perbedaan antara w3-baris dan w3-baris-bantalan

contoh menjelaskan


W3.CSS Animate

Top animasi
bawah animasi
animasi kiri
animasi yang tepat
memudar animasi
Memudar animasi tak terbatas
animasi zoom
animasi berputar
fade semua

contoh menjelaskan


W3.CSS dropdown

Menu dropdown Hoverable
dropdown Hoverable
Dropdown di navbar
Menu dropdown diklik
gambar dropdown
dropdown kartu
animasi dropdown

contoh menjelaskan


W3.CSS akordion

akordeon dasar
tombol Accordion
akordeon aktif
lebar Accordion
Link Accordion
Kartu Accordion dengan daftar
Accordion dan dropdown di sidenav
animasi accordion

contoh menjelaskan


W3.CSS Navigasi

Navigasi dasar (w3-navbar)
berwarna navbar
berbatasan navbar
Link aktif di navbar
Link navbar Hoverable
Link kanan-blok
Navbar font-size
navbar Padding
lebar navbar
ikon navbar
Navbar dengan dropdown
Navbar dengan dropdown aktif dan ikon
Navbar dengan dropdown diklik
Top navbar
bawah navbar
navbar dilipat
Topnav
Topnav dengan ikon

contoh menjelaskan


W3.CSS Sidenav

Dasar sidenav (selalu ditampilkan)
sidenav dilipat
Sidenav menyembunyikan bagian dari isi halaman
Sidenav menyembunyikan semua konten halaman
Sidenav bergeser konten ke kanan
warna Sidenav
berbatasan sidenav
Bawah sidenav border (pemisah)
kartu Sidenav
Sidenav link Hoverable (warna latar belakang)
Sidenav link Hoverable (warna teks)
ukuran Sidenav
Sidenav dengan ikon (icon bar)
Sidenav dengan dropdown
Sidenav dengan akordeon
sidenav animasi
Sidenav dengan efek overlay
Sidenav dengan konten

contoh menjelaskan


W3.CSS Tabs

tab dasar
Active / tab saat ini
tab vertikal
Konten tab animasi
Tab galeri gambar
Tab dalam kotak

contoh menjelaskan


W3.CSS Pagination

pagination dasar
panah pagination
Link pagination aktif
Warna pagination melayang
ukuran pagination
berbatasan pagination
Bulat pagination border
berpusat pagination
Berikutnya / panah pagination sebelumnya
menu pagination

contoh menjelaskan


Bar W3.CSS Kemajuan

Progress bar dasar
Ukuran bar kemajuan
Bar warna Kemajuan
Bulat bar kemajuan
Progress bar label
Dinamis progress bar
Dinamis progress bar dengan label berpusat
Dinamis progress bar dengan label kiri-blok
Dinamis progress bar dengan label ditempatkan di luar

contoh menjelaskan


W3.CSS Tipografi

pos
Kelas font-size
Standar w3.css utama

contoh menjelaskan


W3.CSS Font

Cara menggunakan kelas font yang
Cara menggunakan font eksternal
Eksternal Font google: lobster
efek Font
Efek Font 2
Mengubah font halaman

contoh menjelaskan


W3.CSS Ikon

Ikon Font mengagumkan
Ikon desain material Google
ikon bootstrap

contoh menjelaskan


W3.CSS slideshow

Pengguna slideshow dengan gambar
Slideshow otomatis dengan gambar
Slide HTML otomatis
keterangan slideshow
Indikator slideshow dengan angka dan prev tombol / berikutnya
Indikator slideshow dengan ikon dan peluru
Gambar sebagai indikator
slide animasi
Slideshow otomatis dengan memudar tak terbatas

contoh menjelaskan


Efek Teks W3.CSS

teks shadow
teks opacity

contoh menjelaskan


W3.CSS Modal

Dasar modal (kotak dialog / popup window)
Modal dengan wadah
kartu modal
animasi modal
Fade di modal
image modal
Galeri gambar Modal
Form login modal
tab modal
Bagaimana untuk menutup modal yang

contoh menjelaskan


W3.CSS Tooltips

Teks tooltip inline
Tag tooltip inline
Teks tooltip sebelum gambar hoverable
Teks tooltip setelah gambar hoverable
tooltip mutlak
berwarna tooltip
tooltip bulat
tooltip kecil
tooltip besar

contoh menjelaskan


W3.CSS Grid Responsif

Jaringan demonstrasi cairan
Dua kolom yang sama
Dua kolom yang tidak sama
Tiga kolom yang sama
Tiga kolom yang tidak sama
Enam kolom yang sama
Campuran: Mobile dan Laptop
Campuran: Mobile, Tablet dan Laptop
Perbedaan antara w3-baris dan w3-baris-bantalan
Kolom menggunakan w3-sisa
Kolom menggunakan persen

contoh menjelaskan