;
Home CSS Overflow Programming CSS

CSS OVERFLOW | Belajar CSS Dasar

Tutorial CSS OVERFLOW


buayaberdiri.blogspot.com - CSS OVERFLOW adalah kode css yang digunakan untuk membuat element yang dapat menyesuaikan dengan konten,ketika konten itu melebihi panjang atau lebar elemen tersebut maka akan muncul tampilan scroll.
Baca Juga Artikel : Cara Menambah Jumlah Sheet di Excel atau Libre Office Spreedsheet


Konten ini bisa seperti tulisan,gambar dan video.Ketika konten yang melebihi elemen tidak diberi sintaks overflow biasanya konten tersebut akan memotong element yang sudah kita buat.ini adalah contoh ketika elemen tidak diberi sintaks overflow ketika konten melebihi elemen :

Baca juga artikel tentang : Cara mengatur lebar elemen tag div/margin/span/button dengan CSS
Contoh elemen class tanpa menggunakan overflow




 Baca juga artikel tentang : Garis lengkung pada sisi dengan border-radius CSS

Pada gambar diatas terlihat sekali ketika konten melebihi elemen class yang sudah kita buat tanpa menggunakan sintaks overflow.


ini contoh sintaksnya :


<!DOCTYPE html>
<html>
 <head>
  <title>https://buayaberdiri.blogspot.com/</title>
  <style>
   .a1{
    border:5px outset red;
    padding:5px;
    width:300px;
    height:50px;
   }

  </style>
 </head>
 <body>
  <div class="a1">
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
  </div>
 </body>
</html>




Baca juga artikel tentang : Tutorial CSS Link - Memperindah tampilan link html dengan css



Untuk sintaks overflow pada CSS,overflow memiliki beberapa value yang wajib kamu ketahui dan memiliki fungsi masing-masing pada value tersebut.Berikut ini adalah macam-macam value dari sintaks overflows CSS 

  1. Visible 
  2. Hidden
  3. Scroll
  4. Auto


Overflow Visible CSS


Untuk penulisan sintaks overflow seperti ini :

overflow:visible;



** Ini adalah contoh value visible:

contoh sintaks CSS | overflow :visble;


Ini contoh sintaksnya :


<!DOCTYPE html>
<html>
 <head>
  <title>https://buayaberdiri.blogspot.com/</title>
  <style>
   .a1{
    border:5px outset red;
    padding:5px;
    width:300px;
    height:50px;
    overflow: visible;
    background-color: yellow;
   }

   </style>
 </head>
 <body>
  <div class="a1">
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
  </div>
 </body>
</html>


Baca juga artikel tentang : Tutorial CSS - Belajar Padding-top,padding-right,padding-bottom,padding-left pada CSS
** Ini adalah contoh value hidden:

overflow:hidden;
Ini adalah contoh gambarnya :

contoh sintaks CSS | overflow :hidden;
Ini adalah contoh kodingnya :


<!DOCTYPE html>
<html>
 <head>
  <title>https://buayaberdiri.blogspot.com/</title>
  <style>
   .a1{
    border:5px outset red;
    padding:5px;
    width:300px;
    height:50px;
    overflow: hidden;
    background-color: yellow;
   }

   </style>
 </head>
 <body>
  <div class="a1">
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
  </div>
 </body>
</html>
Baca juga artikel tentang : Tutorial CSS Margin - mengatur margin dengan CSS
** Ini adalah contoh value scroll:

overflow:scroll;
Ini adalah contoh gambarnya :

contoh sintaks CSS | overflow :scroll;



Berikut ini adalah contoh overflow scroll pada CSS:



<!DOCTYPE html>
<html>
 <head>
  <title>https://buayaberdiri.blogspot.com/</title>
  <style>
   .a1{
    border:5px outset red;
    padding:5px;
    width:300px;
    height:50px;
    overflow: scroll;
    background-color: yellow;
   }

   </style>
 </head>
 <body>
  <div class="a1">
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
  </div>
 </body>
</html>

Baca juga artikel tentang : Sintaks CSS Background property : background-image,background-repeat,background-color


** Ini adalah contoh value auto:

overflow:auto;


 Ini adalah contoh gambarnya :


contoh sintaks CSS | overflow :auto;

Ini adalah contoh kodingnya :
<!DOCTYPE html>
<html>
 <head>
  <title>https://buayaberdiri.blogspot.com/</title>
  <style>
   .a1{
    border:5px outset red;
    padding:5px;
    width:300px;
    height:50px;
    overflow: auto;
    background-color: yellow;
   }

   </style>
 </head>
 <body>
  <div class="a1">
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
   https://buayaberdiri.blogspot.com/</br>https://buayaberdiri.blogspot.com/</br>
  </div>
 </body>
</html>


Baca Juga Artikel : Cara Disable Start Up Service di Windows


Sampai disini dulu yakk :)

 Gbu :)


List of Article Posts https://buayaberdiri.blogspot.com

    Jamal Tuesday, July 17, 2018 Tags: CSS Overflow, Programming CSS