CSS Overflow adalah sebuah properti di CSS yang digunakan untuk Konten Clip atau untuk memberikan Scrollbar jika Content dalam suatu Element lebih besar atau telah melebihi ukuran yang telah ditentukan.
Contohnya :
Contoh content
ini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentini content ini content ini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentini content ini content ini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentCSS Overflow memiliki 4 value yaitu :
- Visible (Default) Bagian yang melebihi element tidak di klip. Di biarkan di bagian luar kotak Element.
- Hidden Bagian yang melebihi element akan di klip, dan content akan di hilangkan.
- Scroll Bagian yang melebihi element akan di klip, dan ada penambahan Scrollbar untuk melihat sisa Content.
- Auto Jika Content melebihi element maka konten akan di klip dan di beri scrollbar untuk melihat sisa Content.
Contoh Penggunaannya :
Visible
Contoh CSS :
div {
overflow: visible;
max-height: 150px;
width: 90%;
}
overflow: visible;
max-height: 150px;
width: 90%;
}
Hasilnya :
Contoh content
ini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentini content ini content ini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentHidden
Contoh CSS :
div {
overflow: hidden;
max-height: 150px;
width: 90%;
}
overflow: hidden;
max-height: 150px;
width: 90%;
}
Hasilnya :
Scroll
Contoh CSS :
div {
overflow: scroll;
max-height: 150px;
width: 90%;
}
overflow: scroll;
max-height: 150px;
width: 90%;
}
Hasilnya :
Contoh content
ini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentini content ini content ini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentAuto
Contoh CSS :
div {
overflow: auto;
max-height: 150px;
height: 80px;
width: 90%;
resize: vertical;
}
overflow: auto;
max-height: 150px;
height: 80px;
width: 90%;
resize: vertical;
}
Hasilnya :
Ini Content
ini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini contentini content ini content ini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini contentini content ini content ini content ini content ini content ini contentini contentini content ini content ini contentini contentini contentini contentini content
Overflow-x dan Overflow-y
Overflow-x dan Overflow-y adalah property yang digunakan untuk mengubah oveflow dari suatu content hanya dibagian horizontal ataupun dibagian vertikal.
- Overflow-x Bagian kiri/kanan dari Content.
- Overflow-y Bagian atas/bawah dari Content.
Contoh CSS :
div {
overflow-y: auto;
overflow-x: hidden;
height: 80px;
width: 90%;
}
overflow-y: auto;
overflow-x: hidden;
height: 80px;
width: 90%;
}
Hasilnya :
Sekian Dari saya Semoga Bermanfaat :)
-Andi William-
No comments:
Post a Comment