Hai semuanya, hari ini saya akan membahas tentang CSS DISPLAY, CSS MAX-WIDTH, dan CSS Position. Penasaran nih ? Langsung aja kita ke materi pertama.
Materi 1
CSS DISPLAY
Properti display adalah properti yang paling penting dalam mengkontrol tampilan pada css.
Properti display menentukan bagaimana suatu elemen akan ditampilkan.
Setiap elemen dalam HTML memiliki default settings untuk properti display, yang biasanya adalah inline atau block.
Nah untuk properti block dalam display
Elemen yang mempunyai display settings block akan selalu mulai dari baris baru per elemen dan mengambil lebar maksimal ke kanan maupun kiri. Anggapannya width nya selalu 100%.
Berikut contoh-contoh elemen yang mempunyai default display : block.
1. <div>
2. <h1> - <h6>
3. <p>
4. <form>
5. <header>
6. <footer>
7. <section>
Berbeda dengan properti inline dalam display
Elemen yang memiliki nilai default inline untuk properti display nya tidak mulai dari baris pertama dan elemen tersebut akan hanya mengambil lebar yang secukupnya.
Berikut contoh-contoh elemen yang mempunyai nilai default display : inline.
1. <span>
2. <a>
3. <img>
Berikut contoh nya :
Nah selain 2 itu juga masi ada display : none.
Parameter none dalam properti display berfungsi untuk menyembunyikan suatu elemen tanpa menghapusnya, biasa digunakan dengan coding Javascript.
Berikut contoh untuk display : none.
Nah yang kita display : none kan itu akan hilang dan tidak mengambil tempat. Berbeda dengan properti visibility : hidden. Pada umumnya sama namun yang membedakan adalah jika menggunakan visibility : hidden, elemen tersebut masi akan mengambil tempat yang seharusnya.
Berikut contoh nya :
Jadi kira - kira seperti itu...
Yuk lanjut ke materi selanjutnya
Materi ke 2
CSS MAX-WIDTH
Seperti yang sudah saya jelaskan di atas bahwa sebuah elemen yang memiliki parameter block di properti display nya akan mengambil width maksimum satu page yaitu width : 100%. Dengan mengatur width sebuah elemen akan mencegah isi dalam elemen tersebut keluar dari kontainer yang ada. Namun biasanya browser akan menambahkan scroll bar dalam page jika jendela tampilan terlalu kecil. Dengan menggunakan properti max-width akan mengimprove pengendalian browser untuk jendela tampilan yang kecil.
Berikut ada contoh coding yang bisa di ikuti :
Tips : untuk melihat perbedaan coba perkecil jendela tampilan anda.
Materi ke 3
CSS Position
Properti position dalam css berfungsi untuk menetapkan tipe-tipe penempatan sebuah elemen. Ada 4 macam parameter yang dapat digunakan, yaitu :
1. Static
2. Relative
3. Fixed
4. Absolute
Position static
Elemen yang menggunakan position static tidak terpengaruh oleh properti atas kanan kiri ataupun bawah. Penempatana dilakukan sesuai dengan alur dari halaman tersebut.
Berikut contoh nya :
Position relative
Sebuah elemen yang menggunakan parameter relative dalam properti position ditempatkan relatif dengan posisi normal. Dengan mengatur sisi atas, kanan, bawah, atau kiri akan mengubah penempatan elemen tersebut namun akan tetap relatif dengan posisi normal.
Berikut contoh codingnya :
Position fixed
Elemen yang menggunakan parameter fixed dalam properti position nya akan berada di tempat yang sama walaupun halaman web di scroll ke bawah ke atas. Posisi tidak akan berubah.
Berikut contoh codingnya :
Position absolute
Elemen yang menggunakan parameter absolute dalam properti position nya memiliki penempatan terdekat dengan induknya (seperti parent dari sebuah elemen tersebut).
Berikut contoh simple nya :
Selain dari ke empat contoh diatas juga ada yang namanya overlapping elements. Dengan overlapping elements memungkinkan untuk menempatkan elemen di belakang elemen lain (bertimpa). Syntax yang digunakan adalah z-index.
Berikut contoh codingnya :
NB: jika value dari z-
index anda ganti menjadi “1” maka gambar tersebut akan ditempatkan di depan tulisan tersebut.
No comments:
Post a Comment