Contoh CSS
Sintaks CSS
Selector element
Selector id
Class Selector (untuk semua elemen)
Class Selector (hanya untuk elemen <p>)
Pengelompokan pemilih
Background CSS
Mengatur warna background website
Atur warna background dari berbagai elemen
Tetapkan gambar sebagai background halaman
Cara mengulang gambar background hanya secara horisontal
Bagaimana memposisikan gambar background
Gambar background tetap (gambar ini tidak akan bergulir dengan sisa halaman)
Semua properti background dalam satu deklarasi
Contoh background yang lebih tinggi
Penjelasan Background Properties »
Borders CSS
Menetapkan lebar border dari empat sisi teks (Border Text)
Atur lebar border atas teks
Atur lebar border bawah
Atur lebar border kiri
Tetapkan lebar border kanan
Atur Style Sisi Border
Atur Style border atas
Atur Style border bawah
Atur Style border kiri
Atur Style border kanan
Atur warna dari empat sisi border
Atur warna border atas
Atur warna border bawah
Atur warna border kiri
Atur warna border kanan
Semua properti border dalam satu deklarasi
Tambahkan border bulat ke elemen
Tetapkan border yang berbeda di setiap sisi
Semua properti border atas dalam satu deklarasi
Semua properti border bawah dalam satu deklarasi
Semua properti border kiri dalam satu deklarasi
Semua properti border yang tepat dalam satu deklarasi
Penjelasan Border Properties »
Margin CSS
Tentukan margin yang berbeda untuk setiap sisi elemen
Biarkan margin kiri diwarisi dari elemen induk
Properti shorthand margin
Tetapkan margin ke auto untuk memusatkan elemen ke dalam wadahnya
Penjelasan Margin Properties »
Padding CSS
Setel padding kiri dari sebuah elemen
Atur padding elemen yang benar
Setel padding atas elemen
Setel padding bagian bawah sebuah elemen
Semua properti padding dalam satu deklarasi
Penjelasan Padding Properties »
Height/Width CSS
Tetapkan tinggi dan lebar elemen
Tetapkan lebar maksimal elemen
Tetapkan tinggi dan lebar elemen yang berbeda
Tetapkan tinggi dan lebar gambar menggunakan persen
Tetapkan lebar minimum dan lebar maksimal elemen
Tetapkan min-height dan max-height dari sebuah elemen
Penjelasan Height/Width Properties »
Box Model CSS
Mendemonstrasikan model kotak
Tentukan elemen dengan lebar total 250px
Penjelasan Box Model Properties »
Outline CSS
Buat garis di sekitar elemen (garis besar)
Atur gaya garis besar
Atur warna garis besar
Tetapkan lebar garis besar
Penjelasan Outline Properties »
Text CSS
Mengatur warna teks dari berbagai elemen
Sejajarkan teks
Hapus garis di bawah link
Hiasi teksnya
Kontrol huruf dalam teks
Teks indent
Tentukan spasi antar karakter
Tentukan ruang antar baris
Tetapkan arah teks dari sebuah elemen
Tingkatkan ruang putih di antara kata-kata
Tentukan bayangan teks untuk sebuah elemen
Nonaktifkan pembungkus teks di dalam elemen
Penyelarasan vertikal gambar di dalam teks
Penjelasan Text Properties »
CSS Fonts
Tetapkan font teks
Tetapkan ukuran font
Tetapkan ukuran font di px
Tetapkan ukuran font di em
Tetapkan ukuran font dalam persen dan em
Atur gaya font
Tetapkan varian font
Tetapkan keberanian font
Semua properti font dalam satu deklarasi
Penjelasan Font Properties »
CSS Icons
Font Awesome icon
Bootstrap icon
Google icon
Penjelasan Icon Properties »
Link CSS
Tambahkan berbagai warna ke link yang dikunjungi / yang belum dikunjungi
Penggunaan hiasan teks pada link
Tentukan warna latar belakang untuk link
Tambahkan gaya lainnya ke hyperlink
Berbagai jenis kursor
Advanced – Membuat kotak link
Advanced – Buat kotak link dengan border
Penjelasan Link Properties »
Daftar CSS
Semua daftar item yang berbeda dalam daftar daftar
Tetapkan gambar sebagai penanda item daftar
Posisikan penanda item daftar
Hapus pengaturan daftar default
Semua daftar properti dalam satu deklarasi
Daftar gaya dengan warna
Daftar berbaris lebar penuh
Penjelasan Daftar Properties »
Tabel CSS
Tentukan batas hitam untuk elemen tabel, th, dan td
Penggunaan border-collapse
Perbatasan tunggal di sekeliling meja
Tentukan lebar dan tinggi meja
Tetapkan penyejajaran horizontal konten (text-align)
Tetapkan penyejajaran vertikal konten (vertikal-align)
Tentukan padding untuk elemen th dan td
Pemisah horisontal
Meja yang melayang
Meja bergaris
Tentukan warna batas tabel
Tetapkan posisi judul tabel
Tabel Responsif
Buat meja mewah
Penjelasan Label Properties »
Tampilan CSS
Cara menyembunyikan elemen (visibilitas: tersembunyi)
Bagaimana cara tidak menampilkan elemen (display: none)
Cara menampilkan elemen tingkat blok sebagai elemen sebaris
Cara menampilkan elemen inline sebagai elemen tingkat blok
Cara menggunakan CSS bersama dengan JavaScript untuk menampilkan konten tersembunyi
Penjelasan Tampilan Properties »
Posisi CSS
Posisikan elemen relatif ke jendela browser
Posisikan elemen relatif terhadap posisi normalnya
Posisikan elemen dengan nilai absolut
Sticky positioning
Elemen yang tumpang tindih
Tetapkan bentuk elemen
Atur tepi atas gambar menggunakan nilai piksel
Atur tepi bawah gambar menggunakan nilai piksel
Atur tepi kiri gambar menggunakan nilai piksel
Atur tepi kanan gambar menggunakan nilai piksel
Posisikan teks gambar (pojok kiri atas)
Posisikan teks gambar (pojok kanan atas)
Posisikan teks gambar (pojok kiri bawah)
Posisikan teks gambar (pojok kanan bawah)
Teks gambar posisi (terpusat)
Penjelasan Posisi Properties »
Overflow CSS
Menggunakan overflow: visible – Overflow tidak terpotong. Ini merender di luar kotak elemen.
Menggunakan overflow: hidden – Overflow terpotong, dan sisa konten tersembunyi.
Menggunakan overflow: scroll – Overflow terpotong, tapi scrollbar ditambahkan untuk melihat konten lainnya.
Menggunakan overflow: auto – Jika overflow terpotong, scrollbar harus ditambahkan untuk melihat konten lainnya.
Menggunakan overflow-x dan overflow-y.
Penjelasan Overflow Properties »
Floating CSS
A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Create an image gallery with the float property
Turning off float (using the clear property)
Creating a horizontal menu
Creating a homepage without tables
Penjelasan Floating Properties »
CSS Aligning Elements
Pusat selaras dengan margin
Pusat menyelaraskan teks
Pusatkan gambar
Kiri / Kanan sejajar dengan posisi
Penyesuaian kiri / kanan dengan posisi – Solusi crossbrowser
Kiri / Kanan sejajar dengan float
Penyesuaian Kiri / Kanan dengan float – Crossbrowser solution Center secara vertikal dengan padding
Pusat vertikal dan horizontal
Pusat vertikal dengan garis-tinggi
Pusat vertikal dan horizontal dengan posisi
Penjelasan Floating Properties »
CSS Combinators
Descendant selector
Child selector
Adjacent Sibling selector
General Sibling selector
Penjelasan Combinators Properties »
Generated Content CSS
Masukkan URL dalam tanda kurung setelah setiap link dengan konten properti
Bagian penomoran dan sub-bagian dengan “Bagian 1”, “1.1”, “1.2”, dll.
Tentukan tanda kutip dengan properti tanda petik
Penjelasan Generated Content Properties »
Pseudo-classes CSS
Tambahkan warna yang berbeda ke hyperlink
Tambahkan gaya lainnya ke hyperlink
Use of :focus
:first-child – match the first p element
:first-child – match the first i element in all p elements
:first-child – Match all i elements in all first child p elements
Penggunaan: lang
Penjelasan Pseudo-classes Properties »
CSS Pseudo-elements
Buat huruf pertama khusus dalam teks
Buat baris pertama khusus dalam teks
Buat huruf pertama dan baris pertama spesial
Gunakan: sebelum memasukkan beberapa konten sebelum elemen
Gunakan: setelah memasukkan beberapa konten setelah elemen
Penjelasan Pseudo-elements Properties »
Opacity CSS
Membuat gambar transparan
Membuat gambar transparan – efek mouseover
Efek penggerak digerakkan terbalik untuk gambar transparan
Kotak transparan / div
Kotak transparan / div dengan nilai RGBA
Membuat kotak transparan dengan teks pada gambar latar belakang
Penjelasan Opacity Properties »
Bar Navigasi CSS
Bar navigasi vertikal bergaya penuh
Sepenuhnya bergaya navigasi horizontal bar
Penjelasan Bar Navigasi Properties »
Dropdown CSS
Teks dropdown
Menu drop down
Menu dropdown kanan-sejajar
Gambar dropdown
Panel navigasi Dropdown
Penjelasan Dropdown Properties »
Tooltips CSS
Tooltip kanan
Tooltip kiri
Tooltip teratas
Tooltip bawah
Keterangan alat dengan panah
Tooltip animasi
Penjelasan Tooltips Properties »
Galeri Gambar CSS
Galeri foto
Galeri foto responsif
Penjelasan Gallery Properties »
CSS Image Sprites
An image sprite
An image sprite – a navigation list
An image sprite with hover effect
Penjelasan Image Sprites Properties »
Atribute Selector CSS
Memilih semua elemen dengan atribut target
Memilih semua elemen dengan atribut target = “_ blank”
Memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan oleh spasi, yang salah satunya adalah “bunga”
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top” (harus seluruh kata)
Memilih semua elemen dengan nilai atribut kelas yang dimulai dengan “top” (tidak boleh keseluruhan kata)
Memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan “test”
Memilih semua elemen dengan nilai atribut kelas yang berisi “te”
Penjelasan Selector Properties »
Formulir CSS
Bidang input lebar penuh
Bidang input empuk
Bidang masukan yang dibatasi
Bidang masukan berbatas bawah
Bidang masukan berwarna
Bidang masukan fokus
Bidang masukan fokus 2
Masukan dengan ikon / gambar
Masukan pencarian animasi
Styling textareas
Styling pilih menu
Tombol input styling
Formulir dijelaskan
Buat counter
Penghitung bersarang 1
Penghitung bersarang 2
Penjelasan Counters Properties »
Rounded Corners CSS3
Tambahkan sudut membulat ke elemen
Putarkan setiap sudut secara terpisah
Buat sudut elips
Penjelasan Rounded Corners Properties »
Gambar Perbatasan CSS3
Buat bingkai gambar di sekitar elemen, gunakan kata kunci bulat
Buat bingkai gambar di sekitar elemen, gunakan kata kunci peregangan
Batas gambar – Nilai irisan yang berbeda-beda
Penjelasan Border Images Properties »
Backgrounds CSS3
Tambahkan beberapa gambar latar belakang untuk elemen
Tentukan ukuran gambar latar belakang
Skala gambar latar belakang menggunakan “contains” dan “cover”
Tentukan ukuran beberapa gambar latar belakang
Gambar latar belakang ukuran penuh (lengkap isi area konten)
Gunakan latar belakang-asal untuk menentukan di mana gambar latar belakang diposisikan
Gunakan background-clip untuk menentukan area melukis latar belakang
Penjelasan Background Properties »
Gradien CSS3
Gradien Linear – bagian atas ke bawah
Linear Gradient – kiri ke kanan
Linear Gradient – diagonal
Linear Gradient – dengan sudut yang ditentukan
Linear Gradient – dengan beberapa warna berhenti
Linear Gradient – warna pelangi + teks
Linear Gradient – dengan transparansi
Gradien linier – gradien linier berulang
Radial Gradient – berhenti warna yang merata
Radial Gradient – berhenti warna yang berbeda
Radial Gradient – bentuknya
Radial Gradient – kata kunci ukuran berbeda
Radial Gradient – gradien radial berulang
Penjelasan Gradient Properties »
Efek bayangan CSS3
Efek bayangan sederhana
Tambahkan warna bayangan
Tambahkan efek blur ke bayangan
Teks putih dengan bayangan hitam
Cahaya lampu neon merah menyala
Cahaya cahaya neon merah dan biru
Teks putih dengan bayangan hitam, biru, dan gelap
Tambahkan kotak-bayangan sederhana ke sebuah elemen
Tambahkan warna ke kotak-bayangan
Tambahkan efek warna dan kabur ke kotak-bayangan
Buat kartu seperti kertas (teks)
Buat kartu seperti kertas (gambar polaroid)
Penjelasan Shadow Effect Properties »
Teks CSS3
Tentukan bagaimana konten yang disembunyikan dan meluap harus diisyaratkan kepada pengguna
Cara menampilkan konten yang meluap saat mengarahkan kursor ke elemen
Biarkan kata-kata panjang bisa dipatahkan dan bungkus ke baris berikutnya
Tentukan aturan melanggar baris
Penjelasan Text CSS3 Properties »
Font CSS3
Gunakan font “Anda sendiri” di @ font-face rule
Gunakan font “own” Anda di @ font-face rule (bold)
Penjelasan Font CSS3 Properties »
Transformasi 2D CSS3
translate () – memindahkan elemen dari posisi saat ini
Putar () – memutar elemen searah jarum jam
Putar () – putar elemen berlawanan arah jarum jam
skala () – meningkatkan elemen
skala () – mengurangi elemen
skewX () – mengaitkan elemen sepanjang sumbu X
skewY () – mengaitkan elemen sepanjang sumbu Y
condong () – menjepit elemen sepanjang sumbu X dan Y
matriks () – putar, skala, pindahkan, dan miringkan sebuah elemen
Penjelasan Transfrom 2D Properties »
Transformasi 3D CSS3
rotateX () – memutar elemen di sekitar sumbu X-nya pada derajat tertentu
rotateY () – memutar elemen di sekitar sumbu Y pada tingkat tertentu
rotateZ () – memutar elemen di sekitar sumbu Z pada tingkat tertentu
Penjelasan Transform 3D Properties »
Transisi CSS3
Transisi – mengubah lebar elemen
Transisi – mengubah lebar dan tinggi elemen
Tentukan kurva kecepatan yang berbeda untuk transisi
Tentukan penundaan untuk efek transisi
Tambahkan transformasi ke efek transisi
Tentukan semua properti transisi dalam satu properti singkat
Penjelasan Transisi CSS3 Properties »
Animasi CSS3
Bind animasi ke elemen
Animasi – ubah warna latar belakang elemen
Animasi – ubah warna background dan posisi elemen
Tunda sebuah animasi
Jalankan animasi 3 kali sebelum berhenti
Jalankan animasi untuk selama-lamanya
Jalankan animasi dalam arah sebaliknya
Jalankan animasi dalam siklus alternatif
Kurva kecepatan untuk animasi
Properti steno animasi
Penjelasan Animasi Properties »
Gambar CSS3
Gambar bulat
Gambar yang dilingkari
Gambar kecil
Gambar kecil sebagai link
Gambar responsif
Teks gambar (pojok kiri atas)
Teks gambar (pojok kanan atas)
Teks gambar (pojok kiri bawah)
Teks gambar (pojok kanan bawah)
Teks gambar (terpusat)
Gambar polaroid
Filter gambar abu-abu
Advanced – Image Modal dengan CSS & JavaScript
Penjelasan Gambar CSS3 Properties »
Tombol CSS3
Tombol CSS dasar
Tombol warna
Ukuran tombol
Tombol bulat
Batas tombol berwarna
Tombol hoverable
Tombol bayangan
Tombol tidak aktif
Lebar tombol
Kelompok tombol
Kelompok tombol Bordered
Tombol Animasi (Efek Hover)
Tombol animasi (Ripple Effect)
Tombol Animasi (Efek Ditekan)
Penjelasan Tombol CSS3 Properties »
Pagination CSS3
Pagination sederhana
Pagination aktif dan hoverable
Bulat pagination yang aktif dan lebat
Efek transisi yang melayang
Pagination bordered
Berformat berbaris bulat
Paginasi dengan ruang antar link
Ukuran Pagination
Paginasi dengan ruang antar link
Paginasi terpusat
Remah roti
Penjelasan Pagination CSS3 Properties »
Beberapa Kolom CSS3
Buat beberapa kolom
Tentukan jarak antar kolom
Tentukan gaya aturan antar kolom
Tentukan lebar aturan antar kolom
Tentukan warna aturan antar kolom
Tentukan lebar, gaya dan warna aturan antar kolom
Tentukan berapa banyak kolom yang harus dilalui elemen
Tentukan lebar optimal yang disarankan untuk kolom
Penjelasan Kolom CSS3 Properties »
Antarmuka Pengguna CSS3
Biarkan pengguna mengubah ukuran lebar elemen
Biarkan pengguna mengubah ukuran tinggi elemen
Biarkan pengguna mengubah ukuran lebar dan tinggi elemen
Tambahkan spasi antara garis besar dan batas elemen
Penjelasan User Interface Properties »
Ukuran Kotak CSS3
Lebar elemen tanpa ukuran kotak
Lebar elemen dengan ukuran kotak
Form elements + box-sizing
Penjelasan Box Sizing Properties »
Flexbox CSS3
Flexbox dengan tiga item flex
Flexbox dengan tiga item flex – arah rtl
flex-direction – row-reverse
flex-direction – column
flex-direction – column-reverse
justify-content – flex-end
justify-content – center
Membenarkan-konten – ruang-antara
justify-content – space-around
align-item – stretch
align-item – flex-start
align-items – flex-end
align-item – center
align-item – baseline
flex-wrap – nowrap
flex-wrap – wrap
flex-wrap – wrap-reverse
align-content – center
Pesan item flex
Margin-kanan: auto;
Margin: auto; = terpusat sempurna
align-self pada item flex
Tentukan panjang item flex, relatif terhadap sisa item flex
Buat situs web responsif dengan flexbox
Penjelasan Flexbox Properties »
Media Queries CSS3
Ubah background-color menjadi lightgreen jika viewportnya lebar 480px atau lebih lebar
Tampilkan menu yang akan melayang di sebelah kiri halaman jika viewport berukuran 480px lebar atau lebih lebar
Penjelasan Media Query Properties »
Media Queries CSS3 – Contoh Lebih Banyak
Halaman HTML
Lebar dari 520 sampai 699px – Terapkan ikon email ke setiap tautan
Lebar dari 700 sampai 1000px – Kata pengantar link dengan teks
Lebar di atas 1001px – Terapkan alamat email ke link
Lebar di atas 1151px – Tambahkan ikon seperti yang kita gunakan sebelumnya
Gunakan daftar link email pada sidebar di halaman web
Penjelasan Media Queries CSS3 Properties »
1 Response
[…] Pergi ke Contoh CSS! […]