Selasa, 27 Desember 2022

CSS Variabel

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>  
    /*---- Variable ----*/
    :root{
      --red: red;
      --biru-muda: white;
      --jeruk: orange;
      --gelap: darkgreen;
      --abu: grey;
      --font-s: normal bold 14px Arial;
      --font-m: normal 400 16px Verdana;
      --font-l: italic 400 18px Tahoma;
      --font-xl: oblique 20px monospace;
      --font-xxl: normal bolder 22px 'Helvetica', sans-serif;
    }
    
  /*---- Style CSS ----*/
    .satu{
    color: var(--red);
    border: 1px solid var(--red);
    background:var(--abu);
    font: var(--font-s)
    }
    .dua{
    color: var(--biru-muda);
    border: 1px solid var(--biru-muda);
    background:var(--gelap);
    font: var(--font-m)
    }
    .tiga{
    color: var(--jeruk);
    border: 1px solid var(--jeruk);
    background:var(--red);
    font: var(--font-l)
    }
    .empat{
    color: var(--gelap);
    border: 1px solid var(--gelap);
    background:var(--biru-muda);
    font: var(--font-xl)
    }
    .lima{
    color: var(--abu);
    border: 1px solid var(--abu);
    background:var(--jeruk);
    font: var(--font-xxl)
    }
  </style>
</head>
<body>
  <h2 align="center">Fungsi var() - DEMO</h2>
<p class='satu'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='dua'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='tiga'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='empat'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='lima'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p></body>
</html>

Coding Blogger Fungsi var() pada CSS variabel

Demo script add/remove class

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" rel="stylesheet"/>
  <title>Demo HTML</title>
  <style>
    body { text-align: center;}
    .elmn1,.elmn2{
      padding: 10px;
      margin:10px auto;
      text-align:left;
      background: white;
      border-radius: 5px;
      position:relative;
      transition: linear 0.4s
    }
    .elmn1{ border: 1px solid green; color: green;padding-bottom:35px}
    .elmn2{ border: 1px solid blue; color: blue;}
    div[class*='elmn'] .fa-lightbulb{ 
      color: white;
      font-size: 30px; margin: 0 20px;
    }
    [align='right'],[onclick*='remove'],.class1 [onclick*='add']{visibility: hidden}
    .class1{ background: lightgreen;}
    .class2{ background: lightblue;}
    div[class*='class']{ box-shadow: 1px 3px 4px #555;}
    div[class*='class'] .fa-lightbulb{ text-shadow:  1px 1px 2px white, 0 0 25px yellow, 0 0 5px red;}
    div[class*='class'] [onclick*='remove']{visibility: visible!important}
    [onclick*='add']{float:left}
    [onclick*='remove']{float:right}
  </style>
</head>
<body>
  <h2 align="center">Add / remove <code>class</code> - DEMO</h2>
  <div class='elmn1'>
    <p>Elemen 1 <i class="fas fa-lightbulb"></i></p>
    <div class='elmn2'>
      <p>Elemen 2 <i class="fas fa-lightbulb"></i></p>
    </div>
   <p><button onclick='addClass()'><i class="fas fa-toggle-on"></i> On</button>
     <button onclick='removeClass()'><i class="fas fa-power-off"></i>  Off</button></p>
  </div>
    <label>*Tekan tombol yang tersedia untuk melihat efeknya.</label>
  <script>//<![CDATA[
    var a = document.querySelector(".elmn1");
    var b = document.querySelector(".elmn2");

function addClass() {
      a.classList.add("class1");
      b.classList.add("class2");
  }
    var a = document.querySelector(".elmn1");
    var b = document.querySelector(".elmn2");

function removeClass() {
      a.classList.remove("class1");
      b.classList.remove("class2");
  }
  //]]></script>
</body>
</html>

Coding Blogger Koleksi Script - (add/remove class)

Demo script - Copy to Clipboard

HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    .flexer{
      display:flex; 
      gap:5px;
      justify-content: start;
    }
    @media screen and (max-width: 900px){
      ul {flex-wrap:wrap;} 
      li, li.flexer *{width:99%;}
    }
    ul{
      width:99%; 
      padding:5px; 
      margin: 5px auto; 
      background:rgb(0 0 0 / 7%)
    }
    ul li .content{display:none}
    li {
      width: 340px; 
      margin: 10px; 
      padding: 10px; 
      border: 1px solid #ddd;
    }
    textarea[rows='4'],li textarea{
      font:normal 400 14px monospace;
      border: 1px solid #ddd; 
      border-radius: 5px
    }
    li .btn-demo{width: 104px;order:2}
    li textarea{width: 200px;order:1}
    .btn-demo{
      display:block; 
      margin:10px auto;
      padding: 6px 12px; 
      background: orangered; 
      color: white; 
      text-align: center; 
      width: fit-content; 
      border: 1px solid rgb(0 0 0 / 30%); 
      border-radius: 10px; 
      box-shadow: 1px 2px 3px #000; 
      transition: linear 0.4s;
      cursor: pointer
    }
    .btn-demo:hover{
      background: red; 
      color: yellow; 
      box-shadow: none;
    }
    .xyz{
      display: block;
      padding: 10px;
      margin: 10px auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2 align="center">Copy to Clipboard - DEMO</h2>
<ul class='flexer' style='list-style: none'>
  <li class='flexer'>
    <div class='btn-demo' onclick="handyCopier('copy-1')">Copy kode</div>
    <div class="content" id="copy-1"><i class='las la-question-circle'></i></div>
    <textarea><i class='las la-question-circle'></i></textarea>
  </li>
  <li class='flexer'>
    <div class='btn-demo' onclick="handyCopier('copy-2')">Copy kode</div>
    <div class="content" id="copy-2"><i class='las la-info-circle'></i></div>
    <textarea><i class='las la-info-circle'></i></textarea>
  </li>
</ul>
<div class='xyz'>
  <div><label>Pastekan kode disini :</label></div>
  <textarea rows='4' cols='40'></textarea>
</div>
  <script>//<![CDATA[
  function handyCopier(elementId) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);

alert("Berhasil disalin :" + aux.value);
        document.body.removeChild(aux);
  }
//]]></script>
</body>
</html>

Coding Blogger Koleksi Script Fungsional

Senin, 26 Desember 2022

Remix icon

HTML Editor:

Hasil :

Coding Blogger Koleksi Ikon Web Font

Selasa, 20 Desember 2022

Script copy

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}
  </style>
    </head>
<body>
<h2 align="center">Clipboard Copy - JavaScript</h2>
  <p>Script Copy untuk multi elemen.</p>
        <div align="center">
        <input type="text" value="abcde" id="pilih" />
        <button type="button" onclick="copy_text('pilih')">Copy</button>
        <p></p>
        <input type="text" value="fghij" id="pilih1" />
        <button type="button" onclick="copy_text('pilih1')">Copy</button>
        <p></p>
        <input type="text" value="klmnop" id="pilih2" />
        <button type="button" onclick="copy_text('pilih2')">Copy</button>
        </div>
    </body>
    <script type="text/javascript">
    function copy_text(elementId) {
        document.getElementById(elementId).select();
        document.execCommand("copy");
        alert("Teks Berhasil DIsalin.");
    }
</script>
</html>

Coding Blogger Nomor otomatis di HTML

HTML Demo

CSS Variabel

Demo script add/remove class

Demo script - Copy to Clipboard

Remix icon

Script copy