CSS : Display, Max-Width, Position, Float, Opacity

assalamualaikum wr. wb.
Kali ini postingan saya tentang tampilan, dimana ada properti max-width, position, float.

-Latar Belakang
Dalam pembuatan program aplikasi atau sebagainya, tampilan yang disajikan sangatlah penting. Apakah program tersebut menarik dilihat atau tidak. Karena kebanyakan orang awam melihat suatu program dari tampilan luarnya dulu.

-Tujuan
Agar lebih mengetahui cara untuk membuat sebuah tampilan dari program atau suatu aplikasi yang akan dibuat.

-Pembahasan

Display
Properti display adalah properti CSS yang penting untuk mengatur tata letak sebuah halaman web yang sedang dibuat.
Prperti display menentukan bagaimana sebuah elemen ditentukan. Value default dari properti display sebagian besar adalah block atau inline.

Block Elemen
Setiap elemen block dimulai dari sat baris baru dan mengambil lebar penuh yang tersedia (membentang dari kiri ke kanan).
Contoh elemen block :
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Element
Elemen inline tidak dimulai dari satu baris baru, melainkan berada di satu baris, dan hanya memerlukan lebar secukup yang diperlukan.
Contoh elemen inline :
<span>
<a>
<img>

Jadi perbedaan elemen block dan inline dapat dilihat dari gambar dibawah ini :

Max-Width
Digunakan untuk mengatur lebar maksimal dari sebuah elemen. Untuk mengatur max-width dapat diatur dalam px.
Saat kita menggunakan properti width dalam elemen block, ketika lebar elemen lebih besar dari jendela browser, ukuran elemen tidak mengecil, melainkan browser akan membuat scroll horizontal ke halaman.
Berbeda dengan max-width, saat jendela browser dikecilkan, maka elemen pun akan ikut mengecil sesuai ukuran web browser.


Position
Properti position menentukan posisi suatu elemen. Ada 4 value posisi, yaitu :
1. static
2. relative
3. fixed
4. absolute

Position Static
Posisi suatu elemen akan diatur secara default, tidak ada aturan khusus.

Position Relative
Posisi elemen diatur relatif terhadap posisi normal sesuai aturan dalam style. Jadi untuk posisi relative kita tetap memasukan aturan untuk posisi elemen dari top, right, left dan bottom.

Position Fixed
Posisi suatu elemen akan tetap/fix atau tidak berubah. Berarti elemen tersebut akan selalu berada di tempat ketika scroll digeser. Untuk posisi fixed, kita juga tetap mengatur posisi top, right, left dan bottom.

Position Absolute
Biasanya elemen yang memiliki posisi absolute berada di dalam elemen yang memiliki posisi lain. Posisi absolute relatif terhadap posisi yang diatasnya.


Float
Properti float digunakan untuk membuat elemen mengapung di halaman web browser sesuai aturan yang ditentukan dalam style CSS. Float biasanya diatur ke kanan atau ke kiri (right or left).


Align
- Align center untuk elemen
Untuk mengubah tata letak elemen menjadi ke pusat/tengah, kita dapat menggunakan properti margin: auto;

- Align center untuk teks
Jika kita ingin mengubah perataan teks, properti yang digunakan yaitu text-align. Untuk kanan, kiri, dan tengah (right, left, and center).

- Center image
Untuk membuat gambar menjadi rata tengah, kita juga dapat menggunakan margin auto di style css untuk gambarnya.


Opacity
Properti opacity akan membuat suatu elemen menjadi transparan.
Misal kita akan membuat suatu gambar menjadi transparan seperti gambar dibawah ini

tampilan di web browser

yang perlu kita atur adalah

img {
    opacity: 0.5;
}

membuat selector img, kemudian menambah properti opacity dengan valuenya 0,5.
Value untuk properti opacity adalah 0,0 - 1,0 lebih rendah nilainya maka gambar semakin transparan.

Sekian postingan saya kali ini, terimakasih semoga bermanfaat.
wassalamualaikum wr. wb.


Referensi:
- http://www.w3schools.com/css/css_display_visibility.asp
- http://www.w3schools.com/css/css_max-width.asp
- http://www.w3schools.com/css/css_positioning.asp
- http://www.w3schools.com/css/css_float.asp
- http://www.w3schools.com/css/css_align.asp
- http://www.w3schools.com/css/css_image_transparency.asp