DHTML CSS Positioning (CSS-P)
- Halaman Sebelumnya Pengantar DHTML
- Halaman Berikutnya DHTML DOM
CSS digunakan untuk menambahkan gaya ke elemen HTML.
Contoh
catatan:Sebagian besar contoh DHTML memerlukan IE 4.0+, Netscape 7+, atau Opera 7+!
- position:relative
- Bagaimana cara menempatkan elemen ini relatif terhadap posisi normalnya.
- position:relative
- Bagaimana cara menempatkan semua judul relatif terhadap posisi normalnya.
- position:absolute
- Bagaimana cara menggunakan nilai absolut untuk menentukan posisi elemen.
Anda dapat menemukan lebih banyak contoh di bawah halaman.
Berapa properti yang dapat digunakan bersamaan dengan CSS-P?
Pertama, elemen ini harus menentukan atribut position (relative atau absolute).
Lalu, saya dapat menetapkan berbagai properti CSS-P berikut:
- left - Lokasi kiri elemen
- top - Lokasi puncak elemen
- visibility - Tentukan apakah elemen harus terlihat atau tersembunyi
- z-index - Urutan penyangga elemen
- clip - Potong elemen
- overflow - Bagaimana menangani konten yang melampaui
Position
Atribut position dalam CSS memungkinkan Anda mengendalikan lokasi elemen dalam dokumen.
position:relative
Atribut position:relative dapat menempatkan elemen berdasarkan posisi saat ini elemen itu sendiri.
Contoh di bawah ini menempatkan elemen div ini di posisi 10 pixel kanan dari posisi normalnya:
div { position:relative; left:10; }
position:absolute
Atribut position:absolute menempatkan elemen berdasarkan margin jarak ke jendela.
Contoh di bawah ini menempatkan elemen div ini di posisi 10 pixel kanan dari margin kiri blok yang menampungnya:
div { position:absolute; left:10; }
Visibility
Atribut visibility menentukan apakah elemen dapat terlihat atau tak.
visibility:visible
Atribut visibility:visible membuat elemen terlihat.
h1 { visibility:visible; }
visibility:hidden
Atribut visibility:hidden membuat elemen tak terlihat.
h1 { visibility:hidden; }
Z-index
Atribut z-index digunakan untuk menempatkan elemen satu setelah elemen lain. Nilai default z-index adalah 0. Nilai yang lebih tinggi artinya prioritas yang lebih tinggi. z-index: -1 adalah prioritas yang lebih rendah.
h1 { z-index:1; } h2 { z-index:2; }
Dalam contoh di atas, jika h1 dan h2 bertumpuk, elemen h2 akan berada di atas h1.
Filter
Atribut filter memungkinkan Anda menambah efek gaya tambahan kepada teks dan gambar.
h1 { lebar:100%; filter:glow; }
catatan:Untuk menggunakan properti filter, selalu tentukan lebar elemen.
contoh di atas akan menghasilkan output di bawah ini:
Header
berbagai filter
catatan:kecuali properti background-color diatur menjadi transparent, beberapa properti Filter akan gagal berfungsi!
properti | parameter | deskripsi | contoh |
---|---|---|---|
alpha |
|
memungkinkan Anda mengatur kecerahan elemen | filter:alpha( kecerahan=20, finishopacity=100, gaya=1, startx=0, starty=0, finishx=140, finishy=270) |
blur |
|
akan membuat elemen menjadi blur | filter:blur( add=true, arah=90, kekuatan=6); |
chroma | warna | akan membuat warna yang ditentukan jadi transparan | filter:chroma( warna=#ff0000) |
fliph | none | membalikkan elemen secara horizontal | filter:fliph; |
flipv | none | membalikkan elemen secara vertikal | filter:flipv; |
glow |
|
akan membuat elemen bercahaya | filter:glow( warna=#ff0000, kekuatan=5); |
gray | none | tampilkan elemen dengan hitam dan putih | filter:gray; |
invert | none | tampilkan elemen dengan warna dan kecerahan yang diubah balik | filter:invert; |
mask | warna | tampilkan elemen dengan latar belakang warna yang ditentukan dan latar depan yang transparan | filter:mask( warna=#ff0000); |
bayangan |
|
tampilkan elemen dengan bayangan | filter:shadow (warna=#ff0000, arah=90); |
dropshadow |
|
tampilkan elemen dengan bayangan | filter:dropshadow (warna=#ff0000, offx=5, offy=5, positif=true); |
gelombang |
|
tampilkan elemen dalam bentuk gelombang | filter:wave( add=true, freq=1, lightstrength=3, phase=0, strength=5) |
xray | none | Tampilkan elemen dengan warna dan nilai kecerahan yang dipecahkan dengan warna hitam dan putih. | filter:xray; |
Latar Belakang
Properti background memungkinkan Anda memilih latar belakang pribadi.
background-attachment:scroll
Latar belakang akan menggulir saat halaman menggulir.
background-attachment:fixed
Latar belakang tidak akan menggulir saat halaman menggulir.
Beberapa Contoh Lain
- Visibility
- Bagaimana menjadikan elemen tak terlihat. Apa Anda ingin elemen ini ditampilkan atau tidak?
- Z-index
- Z-index dapat digunakan untuk menempatkan elemen di belakang elemen lain, melalui urutan Z-index.
- Z-index
- Lihat, urutan Z-index elemen sudah berubah.
- Kursor
- Ganti gaya penanda mouse dengan CSS.
- Filter
- Gunakan properti filter untuk mengubah gaya judul.
- Filter pada Gambar
- Properti filter juga dapat diterapkan pada gambar, di sini ada beberapa contoh gambar yang sudah diterapkan properti filter.
- Watermark
- Gambar latar belakang yang tidak bergerak saat halaman menggulir.
- Halaman Sebelumnya Pengantar DHTML
- Halaman Berikutnya DHTML DOM