Cara Penggunaan CSS Overflow

Cara Penggunaan CSS Overflow - Pembahasan saya kali ini adalah tentang properti Overflow yang terdapat pada CSS dan tentu bagaimana Cara Penggunaan CSS Overflow itu sendiri. CSS Overflow sendiri adalah properti yang dapat kita gunakan untuk menentukan suatu konten apakah nantinya konten akan ditambahkan scrollbar ketika konten yang terdapat pada elemen tidak cukup muat. Terdapat 4 nilai dari properti overflow yaitu : visible, hidden, scrool dan auto. Berikut akan saya uraikan CSS Overflow.

1. visible

Properti overflow dengan nilai visible menampilkan semua isi konten atau tidak terpotong walaupun elemen yang membungkus konten didalamnya tidak cukup muat. Berikut adalah contoh properti overflow:visible.

<body>
    <style>
        div {
          background-color: salmon;
          width: 150px;
          height: 60px;
          border: 1px solid black;
          overflow: visible;
        }
    </style>
</head>
<body>
    <div>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis.</div>
</body>

2. hidden

Jika pada overflow:visible konten akan ditampilkan semua lain halnya jika overflow:hidden yang akan menyembunyikan konten seolah - olah konten seperti terpotong. Berikut adalah contoh properti overflow:hidden.

<body>
    <style>
        div {
          background-color: salmon;
          width: 150px;
          height: 60px;
          border: 1px solid black;
          overflow: hidden;
        }
    </style>
</head>
<body>
    <div>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis.</div>
</body>

3. scrool

Ada cara lain untuk kita bisa menampilkan semua dan menyembunyikan sebagian konten dari suatu elemen yaitu dengan overflow:scroll, dengan begitu kita bisa melihat konten yang tersembunyi dengan cara di scrool. Berikut adalah contoh properti overflow:scroll.

<body>
    <style>
        div {
          background-color: salmon;
          width: 150px;
          height: 60px;
          border: 1px solid black;
          overflow: scroll;
        }
    </style>
</head>
<body>
    <div>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis.</div>
</body>

4. auto

properti overflow dengan nilai auto akan menambahkan scrollbar pada bagian tertentu jika hanya nilanya auto maka akan menmabahkan scrollbar secar vertikal. Berikut adalah contoh properti overflow:auto.

<body>
    <style>
        div {
          background-color: salmon;
          width: 150px;
          height: 60px;
          border: 1px solid black;
          overflow: auto;
        }
    </style>
</head>
<body>
    <div>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis.</div>
</body>

Baiklah, saya cukupkan pembahasan tentang CSS Overflow dan Cara Penggunaan CSS Overflow, semoga bermanfaat dan sampai jumpa :) 

13 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat