Intro W3.CSS (Wastafel Dapur)
Warna W3.CSS
Kelas warna w3 terinspirasi oleh warna modern yang digunakan dalam pemasaran, rambu jalan, dan catatan tempel:
Wadah W3.CSS
Kelas w3-container adalah yang paling penting dari kelas W3.CSS. Ini memberikan kesetaraan seperti:
- Margin umum
- bantalan umum
- Penjajaran vertikal umum
- Penjajaran horizontal umum
- Font umum
- Warna umum
Kelas w3-container biasanya digunakan dengan elemen container HTML, seperti:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, dan banyak lagi.
Ini adalah Header
Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat.
Ini adalah catatan kaki.
Panel, Catatan, dan Kutipan W3.CSS
Kelas panel w3 dapat menampilkan semua jenis catatan dan kutipan:
London adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
London adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
Peringatan W3.CSS
Kelas panel w3 juga dapat digunakan untuk semua jenis peringatan:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Peringatan!
Kuning sering menunjukkan peringatan yang mungkin perlu diperhatikan.
Kesuksesan!
Hijau sering menunjukkan sesuatu yang sukses atau positif.
Informasi!
Biru sering menunjukkan perubahan atau tindakan informatif yang netral.
Contoh
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Kartu W3.CSS
Kelas kartu w3 cocok untuk gambar dan catatan:
Mobil
Mobil adalah kendaraan bermotor beroda, bertenaga sendiri yang digunakan untuk transportasi. Sebagian besar definisi istilah menentukan bahwa mobil dirancang untuk berjalan terutama di jalan raya, memiliki tempat duduk untuk satu hingga delapan orang, dan biasanya memiliki empat roda.
(Wikipedia)
Luar biasa
Alpen Prancis
Contoh
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
Tabel W3.CSS
Kelas w3-table dapat menangani semua jenis tabel:
| Nama depan | Nama keluarga | Poin |
|---|---|---|
| Jill | Smith | 50 |
| malam | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Membosankan | 100 |
Contoh
<table class="w3-table w3-striped w3-border">
Daftar W3.CSS
Kelas w3-ul dapat menangani semua jenis daftar:
-
Desainer Web Mike
-
Dukungan Jill
-
Jane
Akuntan -
Jack
Penasihat
Contoh
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tombol W3.CSS
Kelas w3-button dan w3-btn menyediakan tombol dari semua ukuran dan jenis.
Tombol lebar:
Tombol melingkar atau persegi:
Tag, Label, Lencana, dan Tanda W3.CSS
Kelas w3-tag dan w3-badge mampu menampilkan semua jenis tag, label, lencana, dan tanda:
2 8 SEBUAH B
Baru Peringatan Bahaya info
BERNAPAS
DI BAWAH AIR
W3.CSS Responsif
Kelas Responsive Grid memberikan responsivitas untuk semua jenis perangkat: PC, laptop, tablet, dan seluler.
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
istirahat
1/4
istirahat
100px
45px
istirahat
W3.CSS juga mendukung jaringan fluida mobile-first 12 kolom dengan kelas kecil, sedang, dan besar.
Tampilan W3.CSS
Kelas w3-display memungkinkan Anda untuk menampilkan elemen HTML di posisi tertentu:
Modal W3.CSS
Kelas w3-modal menyediakan dialog modal dalam HTML murni:
Gambar Modal:
Bilah Kemajuan W3.CSS
Baca lebih lanjut di Bilah Kemajuan W3.CSS
Dropdown W3.CSS
Kelas w3-dropdown menyediakan dropdown:
Akordeon W3.CSS
Baca lebih lanjut di Akordeon W3.CSS
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
Tab W3.CSS
Tab sempurna untuk aplikasi web satu halaman, atau untuk halaman web yang mampu menampilkan subjek yang berbeda.
London
London adalah ibu kota Inggris.
Ini adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
Galeri Gambar Tab (Klik salah satu gambar):
Navigasi W3.CSS
Kelas w3-bar dapat digunakan untuk membuat bilah navigasi:
Bilah navigasi dengan masukan:>
Bilah navigasi dengan dropdown:
Kelas w3-sidebar membuat navigasi samping:
Paginasi W3.CSS
W3.CSS menyediakan cara sederhana untuk pagination halaman .
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.