Forum | tutorial pengembangan web terbaru
 

CSS contoh


CSS Syntax

Unsur pemilih
Id selector
Kelas pemilih (untuk semua elemen)
Kelas pemilih (hanya <p> elemen)
pengelompokan selektor

Sintaks CSS menjelaskan


Backgrounds CSS

Mengatur warna latar belakang halaman
Mengatur warna latar belakang dari elemen yang berbeda
Mengatur foto sebagai latar belakang halaman
Bagaimana untuk mengulang gambar latar belakang hanya secara horizontal
Bagaimana posisi gambar latar belakang
Sebuah gambar latar belakang tetap (gambar ini tidak akan gulir dengan sisa halaman)
Semua properti background dalam satu deklarasi
Background canggih misalnya

Latar belakang properti menjelaskan


CSS Borders

Mengatur lebar dari empat perbatasan
Mengatur lebar dari perbatasan atas
Mengatur lebar dari batas bawah
Mengatur lebar dari perbatasan kiri
Mengatur lebar dari batas kanan
Mengatur gaya dari empat perbatasan
Mengatur gaya perbatasan atas
Mengatur gaya perbatasan bawah
Mengatur gaya perbatasan kiri
Mengatur gaya perbatasan yang tepat
Mengatur warna dari empat perbatasan
Mengatur warna perbatasan atas
Mengatur warna dari batas bawah
Mengatur warna dari perbatasan kiri
Mengatur warna dari batas kanan
Semua properti perbatasan dalam satu deklarasi
Mengatur perbatasan yang berbeda di setiap sisi
Semua properti perbatasan atas dalam satu deklarasi
Semua properti perbatasan bawah dalam satu deklarasi
Semua properti perbatasan kiri dalam satu deklarasi
Semua properti perbatasan yang tepat dalam satu deklarasi

Sifat perbatasan menjelaskan


Margin CSS

Tentukan margin yang berbeda untuk masing-masing sisi elemen
Biarkan margin kiri diwariskan dari elemen induk
Properti Margin singkatan
Mengatur margin auto ke pusat elemen dalam wadah

Sifat Margin menjelaskan


CSS Padding

Mengatur padding kiri elemen
Mengatur padding kanan elemen
Mengatur padding atas sebuah elemen
Mengatur padding bawah elemen
Semua padding dalam satu deklarasi

Padding menjelaskan


CSS Text

Mengatur warna teks unsur yang berbeda
Sejajarkan teks
Hapus garis bawah link
Menghias teks
Mengontrol huruf dalam teks
teks indent
Tentukan ruang antara karakter
Tentukan ruang antara baris
Mengatur arah teks dari suatu unsur
Meningkatkan ruang putih di antara kata-kata
Menonaktifkan membungkus teks dalam sebuah elemen
Alignment vertikal gambar di dalam teks

Sifat teks menjelaskan


CSS Font

Mengatur font teks
Mengatur ukuran font
Mengatur ukuran font di px
Mengatur ukuran font di em
Mengatur ukuran font dalam persen dan em
Mengatur gaya font
Mengatur varian font
Mengatur keberanian font
Semua properti font dalam satu deklarasi

Properti font menjelaskan


CSS Links

Tambahkan warna yang berbeda untuk mengunjungi / link yang belum dikunjungi
Penggunaan text-decoration pada link
Menentukan warna latar belakang untuk link
Tambahkan gaya lain untuk hyperlink
Lanjutan - Buat kotak Link
Lanjutan - Buat kotak tautan dengan perbatasan

Link sifat menjelaskan


Daftar CSS

Semua berbeda penanda daftar item dalam daftar
Mengatur foto sebagai daftar-item penanda
Posisi daftar-item penanda
Semua sifat daftar dalam satu deklarasi
Daftar gaya dengan warna
-Lebar penuh berbatasan daftar

Sifat Daftar menjelaskan


Tabel CSS

Tentukan batas hitam untuk meja, elemen th, dan td
Penggunaan border-collapse
Perbatasan tunggal di sekitar meja
Tentukan lebar dan tinggi tabel
Mengatur alignment horizontal konten (text-align)
Mengatur alignment vertikal konten (vertical-align)
Tentukan padding untuk th dan td elemen
pembagi horisontal
tabel Hoverable
tabel bergaris
Tentukan warna perbatasan tabel
Mengatur posisi judul tabel
Tabel responsif
Membuat tabel mewah

Properti tabel menjelaskan


CSS Box Model

Tentukan elemen dengan lebar total 250px

Model kotak menjelaskan


CSS Outline

Menggambar garis di sekitar elemen (outline)
Mengatur gaya garis
Mengatur warna garis
Mengatur lebar garis

Sifat garis menjelaskan


CSS Dimensi

Mengatur tinggi dan lebar elemen
Set max-lebar elemen
Mengatur tinggi dan lebar elemen yang berbeda
Mengatur tinggi dan lebar gambar menggunakan persen
Set min-width dan max-lebar elemen
Set min-height dan max-height dari unsur

Sifat dimensi menjelaskan


CSS Tampilan

Cara menyembunyikan elemen (visibility:hidden)
Bagaimana tidak menampilkan elemen (display:none)
Bagaimana menampilkan elemen blok-tingkat sebagai unsur inline
Bagaimana menampilkan elemen inline sebagai elemen blok-tingkat
Cara menggunakan CSS bersama-sama dengan JavaScript untuk menampilkan konten yang tersembunyi

Sifat tampilan menjelaskan


CSS Positioning

Posisi elemen relatif terhadap jendela browser
Posisi elemen relatif terhadap posisi normal
Posisi elemen dengan nilai absolut
unsur tumpang tindih
Mengatur bentuk elemen
Cara membuat scroll bar bila konten elemen ini terlalu besar untuk muat
Cara mengatur browser untuk secara otomatis menangani luapan
Mengatur tepi atas dari suatu gambar dengan menggunakan nilai pixel
Mengatur tepi bawah gambar menggunakan nilai pixel
Mengatur tepi kiri gambar menggunakan nilai pixel
Mengatur tepi kanan gambar menggunakan nilai pixel
Mengubah kursor teks gambar Posisi (pojok kiri atas)
Posisi gambar teks (pojok kanan atas)
Posisi gambar teks (bawah pojok kiri)
Posisi gambar teks (pojok kanan bawah)
Teks posisi gambar (berpusat)

Sifat Positioning menjelaskan


CSS Mengambang

Sebuah penggunaan sederhana dari properti mengambang
Gambar dengan perbatasan dan margin yang mengapung ke kanan di paragraf
Sebuah gambar dengan keterangan yang mengapung ke kanan
Biarkan huruf pertama dari float ayat ke kiri
Buat sebuah galeri gambar dengan properti mengambang
Mematikan mengambang (menggunakan properti yang jelas)
Membuat menu horizontal
Membuat homepage tanpa tabel

Sifat mengambang menjelaskan


CSS Menyelaraskan Elemen

Pusat menyelaraskan dengan marjin
Kiri / kanan menyelaraskan dengan posisi
Kiri / kanan menyelaraskan dengan posisi - solusi Crossbrowser
Kiri / kanan menyelaraskan dengan pelampung
Kiri / kanan menyelaraskan dengan pelampung - solusi Crossbrowser

Menyelaraskan sifat menjelaskan


CSS combinators

pemilih keturunan
pemilih anak
Berdekatan pemilih Sibling
Pemilih umum Sibling

Penyeleksi Combinator menjelaskan


CSS Generated Content

Masukkan URL dalam kurung setelah setiap link dengan properti konten
Penomoran bagian dan sub-bagian dengan "Section 1", "1.1", "1.2" , dll
Tentukan tanda kutip dengan properti kutipan


CSS Pseudo-kelas

Tambahkan warna yang berbeda untuk hyperlink
Tambahkan gaya lain untuk hyperlink
Penggunaan: Fokus
:first-child - cocok dengan p elemen pertama
:first-child - cocok elemen i pertama di semua elemen p
:first-child - Sama semua i elemen dalam semua elemen p anak pertama
Penggunaan :lang

Pseudo-kelas menjelaskan


CSS Pseudo-elemen

Membuat huruf pertama khusus dalam teks
Membuat baris pertama khusus dalam teks
Membuat huruf pertama dan jalur khusus pertama
Gunakan: sebelum memasukkan beberapa konten sebelum elemen
Gunakan: setelah memasukkan beberapa konten setelah elemen

Pseudo-elemen menjelaskan


Bar CSS Navigasi

Sepenuhnya bergaya bar navigasi vertikal
Sepenuhnya bergaya bar navigasi horisontal

Bar navigasi menjelaskan


CSS dropdown

teks dropdown
Menu drop down
Menu dropdown benar-blok
image dropdown
Bar navigasi dropdown

dropdown menjelaskan


CSS Tooltips

tooltip tepat
tooltip meninggalkan
Top tooltip
bawah tooltip
Tooltip dengan panah
animasi tooltip

tooltips menjelaskan


CSS Galeri

Galeri Foto
Responsif Galeri gambar

Galeri gambar menjelaskan


CSS Gambar Opacity

Membuat gambar transparan - efek mouseover
Membuat kotak transparan dengan teks pada gambar latar belakang

Gambar opacity menjelaskan


Sprite CSS Gambar

Sebuah sprite image
Gambar sprite - daftar menu
Sebuah sprite gambar dengan efek hover

Sprite gambar menjelaskan


CSS Atribut Selectors

Memilih semua <a> elemen dengan atribut target
Memilih semua <a> elemen dengan target = "_ blank" atribut
Memilih semua elemen dengan atribut judul yang berisi daftar dipisahkan dengan spasi dari kata-kata, 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 harus seluruh kata)
Memilih semua elemen dengan nilai atribut kelas yang berakhir dengan "test"
Memilih semua elemen dengan nilai atribut kelas yang berisi "te"

Atribut penyeleksi menjelaskan


Bentuk CSS

Field input full-width
Field input empuk
Field input berbatasan
Bawah field input border
Field input berwarna
Field input terfokus
Difokuskan field input 2
Input dengan icon / gambar
Masukan pencarian animasi
dihapus saja styling
Styling pilih menu
Styling tombol masukan

bentuk menjelaskan


Penghitung CSS

Buat counter
Counter bersarang 1
Bersarang counter 2

counter menjelaskan


CSS3 Rounded Corners

Tambahkan sudut dibulatkan ke elemen
Putaran setiap sudut secara terpisah
Buat sudut elips

Sudut dibulatkan CSS3 menjelaskan


Gambar CSS3 Border

Buat gambar perbatasan sekitar elemen, menggunakan kata kunci putaran
Buat gambar perbatasan sekitar elemen, menggunakan kata kunci peregangan
Gambar perbatasan - nilai slice Berbeda

CSS3 gambar perbatasan menjelaskan


Backgrounds CSS3

Tambahkan beberapa gambar latar belakang untuk elemen
Tentukan ukuran gambar latar belakang
Skala gambar latar belakang menggunakan "berisi" dan "penutup"
Tentukan ukuran beberapa gambar latar belakang
Full-size background image (benar-benar mengisi area konten)
Gunakan background-asal untuk menentukan di mana gambar latar belakang adalah diposisikan
Gunakan background-clip untuk menentukan daerah lukisan latar belakang

Latar belakang CSS3 menjelaskan


CSS3 Gradien

Linear Gradient - atas ke bawah
Linear Gradient - kiri ke kanan
Linear Gradient - diagonal
Linear Gradient - dengan sudut tertentu
Linear Gradient - dengan beberapa berhenti warna
Linear Gradient - warna pelangi + teks
Linear Gradient - dengan transparansi
Linear Gradient - gradien linier berulang
Radial Gradient - merata spasi berhenti warna
Radial Gradient - berhenti warna berbeda spasi
Radial Gradient - set bentuk
Radial Gradient - kata kunci ukuran yang berbeda
Radial Gradient - gradien radial berulang

CSS3 gradien menjelaskan


CSS3 Efek Bayangan

Efek bayangan sederhana
Tambahkan warna untuk bayangan
Menambahkan efek blur untuk bayangan
Teks putih dengan bayangan hitam
Sebuah neon merah cahaya shadow
Sebuah neon merah dan biru cahaya bayangan
Teks putih dengan bayangan hitam, biru, dan darkblue
Tambahkan sederhana box-shadow untuk elemen
Tambahkan warna untuk kotak-shadow
Tambahkan warna dan efek blur untuk kotak-shadow
Membuat kartu seperti kertas (teks)
Membuat kartu seperti kertas (polaroid gambar)

Efek bayangan CSS3 menjelaskan


CSS3 Text

Tentukan bagaimana tersembunyi, konten meluap harus memberi isyarat kepada pengguna
Cara menampilkan konten meluap ketika hover atas elemen
Memungkinkan kata-kata panjang untuk bisa menjadi rusak dan membungkus ke baris berikutnya
Tentukan garis melanggar aturan

CSS3 teks menjelaskan


CSS3 Font

Gunakan Anda font "sendiri" di @font-face aturan
Gunakan Anda "sendiri" font di @font-face rule (bold)

Font CSS3 menjelaskan


CSS3 2D Mentransformasi

translate() - memindahkan elemen dari posisi saat ini
rotate() - memutar searah jarum jam elemen
rotate() - memutar elemen berlawanan arah jarum jam
scale() - meningkatkan unsur
scale() - menurunkan unsur
skewX() - skews elemen sepanjang sumbu X
skewY() - skews elemen di sepanjang sumbu Y
skew() - skews elemen sepanjang X dan Y-axis
matrix() - memutar, skala, bergerak, dan condong unsur

CSS3 2D sebagai transformator menjelaskan


CSS3 3D Mentransformasi

rotateX() - memutar elemen di sekitar X-sumbunya pada tingkat tertentu
rotateY() - memutar elemen sekitar nya Y-axis di gelar diberikan
rotateZ() - memutar elemen sekitar Z-sumbu pada derajat tertentu

CSS3 transformasi 3D menjelaskan


Transisi CSS3

Lebar perubahan unsur - Transisi
Transisi - lebar perubahan dan tinggi dari suatu elemen
Tentukan kurva kecepatan yang berbeda untuk transisi
Tentukan penundaan untuk efek transisi
Menambahkan transformasi untuk efek transisi
Tentukan semua properti transisi dalam satu properti singkat

Transisi CSS3 menjelaskan


CSS3 Animasi

Mengikat sebuah animasi untuk elemen
Animasi - perubahan background-warna unsur
Animasi - perubahan background-warna dan posisi elemen
Menunda animasi
Jalankan animasi 3 kali sebelum berhenti
Jalankan animasi untuk selama-lamanya
Jalankan animasi arah sebaliknya
Jalankan animasi dalam siklus alternatif
Kurva kecepatan untuk animasi
Animasi properti singkat

CSS3 animasi menjelaskan


Gambar CSS3

gambar bulat
gambar dilingkari
gambar thumbnail
Gambar thumbnail sebagai link
image responsif
Gambar teks (pojok kiri atas)
Gambar teks (pojok kanan atas)
Gambar teks (bawah pojok kiri)
Gambar teks (pojok kanan bawah)
Gambar teks (berpusat)
gambar Polaroid
Grayscale filter gambar
Canggih - Gambar Modal dengan CSS dan JavaScript

CSS3 Images menjelaskan


Tombol CSS3

Tombol CSS dasar
warna tombol
ukuran tombol
tombol bulat
Berwarna tombol perbatasan
tombol Hoverable
tombol bayangan
tombol dinonaktifkan
lebar tombol
kelompok tombol
Kelompok tombol berbatasan
Animasi Button (Hover Effect)
Animasi Button (Ripple Effect)
Animasi Tombol (Bedak Effect)

Tombol CSS3 menjelaskan


CSS3 Pagination

pagination sederhana
Pagination aktif dan hoverable
Bulat pagination aktif dan hoverable
Efek transisi Hoverable
berbatasan pagination
Bulat pagination border
Pagination dengan ruang antara link
ukuran pagination
Pagination dengan ruang antara link
berpusat pagination
Remah roti

CSS3 Pagination menjelaskan


CSS3 Beberapa Kolom

Buat beberapa kolom
Tentukan kesenjangan antara kolom
Tentukan gaya aturan antara kolom
Tentukan lebar aturan antara kolom
Tentukan warna aturan antara kolom
Tentukan lebar, gaya dan warna aturan antara kolom
Tentukan berapa banyak kolom elemen harus mencakup seluruh
Tentukan disarankan, lebar optimal untuk kolom

CSS3 beberapa kolom menjelaskan


CSS3 User Interface

Biarkan pengguna mengubah ukuran lebar elemen
Biarkan pengguna mengubah ukuran ketinggian elemen
Biarkan pengguna mengubah ukuran baik lebar dan tinggi dari suatu elemen
Tambahkan ruang antara garis dan perbatasan elemen

Antarmuka pengguna CSS3 menjelaskan


CSS3 Box Ukuran

Lebar elemen tanpa box-sizing
Lebar elemen dengan kotak-sizing
Elemen form + box-sizing

Kotak CSS3 ukuran menjelaskan


CSS3 flexbox

Flexbox dengan tiga item fleksibel
Flexbox dengan tiga item fleksibel - arah rtl
flex-arah - baris-terbalik
flex-arah - kolom
flex-arah - kolom-terbalik
membenarkan-konten - flex-end
membenarkan-konten - pusat
membenarkan-konten - ruang-antara
membenarkan-konten - ruang-sekitar
menyelaraskan-item - stretch
menyelaraskan-item - flex-start
menyelaraskan-item - flex-end
menyelaraskan-item - pusat
menyelaraskan-item - dasar
flex-wrap - nowrap
flex-wrap - bungkus
flex-wrap - wrap-terbalik
menyelaraskan-konten - pusat
Memesan item fleksibel
Margin-right: auto;
Margin: auto; = Sempurna centering
menyelaraskan diri pada item fleksibel
Menentukan panjang item flex, relatif terhadap seluruh item fleksibel
Membuat website responsif dengan flexbox

CSS3 flexbox menjelaskan


CSS3 Media Query

Mengubah background-warna lightgreen jika viewport adalah 480px lebar atau luas
Tampilkan menu yang akan mengapung di sebelah kiri halaman jika viewport adalah 480px lebar atau luas

CSS3 pertanyaan media menjelaskan


CSS3 Media Query - Lebih Contoh

Halaman HTML
Lebar dari 520 ke 699px - Terapkan ikon email untuk setiap link
Lebar dari 700 ke 1000px - Kata Pengantar link dengan teks
Lebar di atas 1001px - Terapkan alamat email ke link
Lebar atas 1151px - Tambahkan ikon seperti yang kita gunakan sebelumnya
Gunakan daftar link email di sidebar di halaman web

Media CSS3 query contoh menjelaskan