Hallo teman-teman, berjumpa lagi dengan saya pada tutorial Dumet Schol. Di artikel kali ini saya akan memberikan tips tentang Cara Menggunakan Fungsi overflow-x pada css dimana pada fungsi ini kita bisa membuat scroll pada layout. Nah pada tips dan trik kali ini kita akan membuat sebuah layout dimana tampilan tersebut seperti kita membaca koran digital dengan menggunakan fungsi overflow-x, di bawah ini adalah contoh layout yang saya ambil dari http://epaper.kompas.com/kompas/
Bisa kalian lihat pada gambar di atas ini terdapat scroll untuk membaca berita, di latihan kali ini kita juga akan membuat mirip seperti gambar di atas. Biar tidak penasaran teman-teman bisa lihat gambar di bawah ini yang nanti kita akan buat
Hampir mirip layout punya kompas hanya content nya saja yang berbeda, oke langsung saja kita praktekkan Cara Menggunakan Fungsi overflow-x pada css. Seperti biasa teman-teman siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html> <html> <head> <title>Cara Menggunakan Fungsi overflow-x pada css</title> </head> <body> <div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </body> </html>
Kemudian save dengan nama index.html, lalu jalankan pada browser nya. Maka akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita tambahkan style css nya untuk menghasilkan layout yang kita akan buat, teman-teman copy script css nya di bawah ini
<style>
*{padding: 0; margin: 0}
body{
background: gray
}
div {
width: 500px;
height: 200px;
border: 5px dashed aqua;
margin: 100px auto 0;
padding: 5px;
background: white;
border-image: url(oke.png) 24 round;
}
</style>
Jika sudah save dan refresh pada browser nya, maka akan menghasilkan seperti gambar di bawah ini
Seperti yang teman-teman lihat pada gambar di atas ini, content keluar melebihi pembungkus nya. Saat nya kita gunakan overflow-x:hidden supaya content di hidden dan muncul scroll nya, teman-teman tambahkan pada css nya
Kemudian save dan refresh pada browser nya, maka layout yang kita buat sudah berhasil.
Untuk melihat demo nya klik disini
Baik, sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi overflow-x pada css, kita berjumpa lagi pada artikel yang akan datang. Semoga bermanfaat dan bisa menjadi refrensi untuk teman-teman seputar html dan css. Terima Kasih dan Sampai Jumpa.
Indah nya berbagi ilmu 🙂