Kamis, 19 Januari 2023

Hide Fixed Header on scroll

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    body {
      text-align: center;
      font-family: 'Tahoma',sans-serif
    }
    .post-section #fixed-header{
      background-color:#333;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      display:block;
      transition:top .3s
    }
    .post-section #fixed-header a{
      float:left;
      display:block;
      color:#f2f2f2;
      text-align:center;
      padding:15px;
      text-decoration:none;
      font-size:17px
    }
    .post-section #fixed-header a:hover{
      background-color:#ddd;
      color:#000
    }
  </style>
</head>
<body>
  <div class='post-section'>
  <div id="fixed-header">
    <a href="#home">Fixed Header *</a>
  </div>
  <div style="padding:15px 15px 2500px;margin-top:30px;">
    <p style='color:red'>Fixed header {height:51px}</p>
    <div style="font-size:30px;">
    <p><b>Ini adalah contoh yang menunjukkan <b>hide</b> <b class='code'>fixed header</b> on scroll.</b></p>
    <p>Gulir kebawah halaman ini untuk menyembunyikan header!</p>
    <p>Gulir keatas halaman ini untuk memunculkan header!</p>
    <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>
</div>
  <script>
    var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("fixed-header").style.top = "0";
  } else {
    document.getElementById("fixed-header").style.top = "-52px";
  }
  prevScrollpos = currentScrollPos;
}
  </script>
</body>
</html>

Coding Blogger Hide fixed header on scroll

Fixed Header

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    body {
      text-align: center;
      font-family: 'Tahoma',sans-serif
    }
    .post-section #fixed-header{
      background-color:#333;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      display:block;
      transition:top .3s
    }
    .post-section #fixed-header a{
      float:left;
      display:block;
      color:#f2f2f2;
      text-align:center;
      padding:15px;
      text-decoration:none;
      font-size:17px
    }
    .post-section #fixed-header a:hover{
      background-color:#ddd;
      color:#000
    }
  </style>
</head>
<body>
  <div class='post-section'>
  <div id="fixed-header">
    <a href="#home">Fixed Header</a>
  </div>
  <div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
    <p><b>Ini adalah contoh yang menunjukkan <b class='code'>fixed header</b>.</b></p>
    <p>Gulir halaman ini untuk melihat efeknya!</p>

<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
</body>
</html>

Coding Blogger Hide fixed header on scroll

Sabtu, 07 Januari 2023

Flex - Justify-content

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo elemen HTML - flex</title>
  <style>
    body {text-align: center;font-family: 'Tahoma',sans-serif}
    .separator{
      display: block; 
      padding:4px; 
      margin: 0 auto
    }
    ul {
      margin: 10px auto;
      background:#f1f1f1;
      list-style: none; 
      padding-inline-start:0;
      display:flex;
      flex-wrap:wrap;
      gap: 5px;
    }
    ul li {
      padding:4px 12px; 
      border: 1px solid mediumblue;
      text-align: center;
      color: mediumblue; 
    }
    .caption{
      text-align: left;
      font-weight: bold; 
      font-size: 14px
    }
    .start{
      justify-content:start
    }
    .center{
      justify-content:center
    }
    .end{
      justify-content:end
    }
    .flex-end{
      justify-content:end
    }
    .between{
      justify-content:space-between
    }
    .around{
      justify-content:space-around
    }
    .evenly{
      justify-content:space-evenly
    }
  </style>
</head>
<body>
  <h2 align="center">justify-content - DEMO</h2>
  <p>Perataan pada elemen flex</p>
  <div class='container'>
    <p class='caption'>1. justify-content: start / normal / left / flex-start</p>
    <div class='separator'>
      <ul class='start'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>2. justify-content: center</p>
    <div class='separator'>
      <ul class='center'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>3. justify-content: end / right / flex-end</p>
    <div class='separator'>
      <ul class='end'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>4. justify-content: space-between</p>
    <div class='separator'>
      <ul class='between'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>5. justify-content: space-around</p>
    <div class='separator'>
      <ul class='around'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>6. justify-content: space-evenly</p>
    <div class='separator'>
      <ul class='evenly'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
  </div>
</body>
</html>

Coding Blogger CSS elemen flex

Kamis, 29 Desember 2022

Demo kustom scrollbar

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
body {
    text-align: center;
    font-family: 'Tahoma',sans-serif
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow: auto;
}
::-webkit-scrollbar {
    width: 12px;
}
 ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
    p {text-align: justify;}
  </style>
</head>
<body>
  <h2 align="center">kustomisasi scrollbar  - DEMO</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</body>
</html>

Coding Blogger Mengatur tampilan scrollbar

Demo elemen fixed

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    body {text-align: center;font-family: 'Tahoma',sans-serif}
    *{box-sizing: border-box}
.demo-kontainer {
    position: relative;
    width: 100%;
    padding: 20px;
    margin: 10px auto;
    border: 2px solid #ddd;
    border-bottom-width: 4px;
    border-bottom-color: blue;
    background: lightblue;
}
.demo-kontainer > .demo-konten{
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px 2px;
    padding: 5px;
}.demo-konten div {
    border: 2px solid #ccc;
    color: #fff;
    padding: 5px;
    width: 100px;
    height: 100px;
}
.fixed {
    position: fixed;
    background: yellow;
    color: #333!important;
    top: 50%;
    left: 0;
}
  </style>
</head>
<body>
  <h2 align="center">Elemen fixed - DEMO</h2>
  <p></p>
  <div class="demo-kontainer">
  <div class="demo-konten">
    <div class="fixed"><b><a href="#fixed">elemen fixed</a></b>
  </div>
</div>
  <p class="blue">Posisi <b>fixed</b> : tata letak posisi ini berdasarkan lebar layar perangkat. Sehingga tata letaknya akan keluar dari bingkai asal (elemen induk) nya apabila lebarnya lebih kecil dari lebar layar perangkat atau viewport</p>
</div>
</body>
</html>

Coding Blogger Posisi dalam CSS - CSS position

HTML Demo

Hide Fixed Header on scroll

Fixed Header

Flex - Justify-content

Demo kustom scrollbar

Demo elemen fixed