Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Friday, March 9, 2018

Tutorial Membuat Navbar Responsive

      Comment  

Hai semuanya...

Pada artikel kali ini kita akan belajar membuat navbar responsive dengan HTML dan CSS, penasaran bagaimana cara membuatnya, yuk kita langsung mulai belajar membuatnya.

Langkah pertama, kita akan menggunakan library icon yaitu Font Awesome untuk digunakan pada navbar, silahkan copy dan paste code berikut dibawah tag <head>.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Langkah kedua, tulis syntax HTML seperti dibawah ini. 
  <nav class="navbar" id="nav">
  <a href="#" class="active"><span class="fa fa-code"></span> Kode Kuliahan</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="bars" onclick="toggleItem()">
    <span class="fa fa-bars"></span></a>
</nav>
Langkah ketiga, tambahkan syntax CSS seperti berikut. 
  .navbar{overflow: hidden;background-color: #1d1d1d;}
  .navbar a{
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 25px 20px;
  }
  .navbar a:hover{background-color: #0058ee;}
  .active{background-color: #0058ee;}
  .navbar .bars{display: none;}

  @media screen and (max-width:600px){
    .navbar a:not(:first-child){display: none;}
    .navbar a.bars{
      display: block;
      float: right;
    }
  }
  @media screen and (max-width:600px){
    .navbar.item{position: relative;}
    .navbar.item .bars{
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.item a{
      float: none;
      display: block;
      text-align: left;
      
    }
  }
Langkah keempat, tambahkan syntax Java Script seperti berikut. 
  function toggleItem(){
    let n = document.getElementById('nav');
      if(n.className === 'navbar'){
        n.className += ' item';
      }else{
        n.className = 'navbar';
      }
    }
Hasilnya dapat dilihat pada gambar dibawah ini.


Ketika browsernya diresize menjadi 600px, maka tombol bars akan mucul, seperti gambar berikut ini.


Sehingga kita dapat mengklik tombol barsnya dan akan memunculkan itemnya, dapat dilihat seperti gambar dibawah ini.


Sekian dulu tutorial membuat navbar responsive, semoga bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Membuat Fullscreen Modal Search Form

      Comment  

Hai semuanya,  pada tulisan kali ini kita akan belajar membuat fullscreen modal search dengan HTML dan CSS, langsung kita mulai belajar membuatnya.
Langkah Pertama, kita akan menggunakan library icon yaitu Font Awesome, copy dan paste kode dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Langkah Kedua, silahkan tulis syntax HTML seperti dibawah ini. 
<!-- modal -->
<div class="modal" id="search-modal">
<!-- trigger untuk menutup modal -->
  <span class="btn-close" onclick="closeModal()" title="Close">
    <i class="fa fa-close"></i></span>
    <!-- isi modal -->
  <div class="modal-content">
    <p>Pencarian</p>
    <form action="#">
      <input type="text" placeholder="Cari">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div> <!-- end modal -->
<!-- trigger untuk menampilkan modal -->
<button class="trigger" onclick="openSearch()">
  <i class="fa fa-search"></i> Klik Search</button>
Hasilnya awalnya dapat dilihat pada gambar dibawah ini.
Langkah ketiga, silahkan tulis syntax CSS seperti dibawah ini. 
.trigger{
      background-color: #007afa;
      border: none;
      padding: 15px;
      cursor: pointer;
      color:#fff;
      border-radius: 7px;
    }
    .modal{
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content{
      position: relative;
      top: 35%;
      width: 80%;
      text-align: center;
      margin: 30px auto 0;
    }
    .modal-content p{
      font-size: 40px;
      color: #fff;
    }
    .modal .btn-close{
      position: absolute;
      top: 20px;
      right: 45px;
      cursor: pointer;
      color: #fff;
    }
    .modal input[type=text]{
      width: 80%;
      float: left;
      border: none;
      padding: 15px;
      box-sizing: border-box;
    }
    .modal button{
      width: 20%;
      float: left;
      border: none;
      padding: 15px;
      cursor: pointer;
      background-color: #007afa;
      color: #fff;
    }
Langkah keempat, silahkan tulis syntax Java Script seperti dibawah ini. 
// fungsi untuk membuka modal search
  function openSearch(){
    document.getElementById('search-modal').style.display = "block";
  }
  // fungsi untuk menutup modal search
  function closeModal(){
    document.getElementById('search-modal').style.display = "none";
  }
Jadi, ketika kita mengklik tombol "Klik Search", maka modalnya akan tampil, contohnya dapat dilihat pada demo berikut.

See the Pen Fullscreen Modal Search by Karis Maulana (@karismaulana) on CodePen.

Demikian cara membuat fullscreen modal search form dengan HTML, CSS, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tulis komentar anda dibawah.

Terima kasih telah berkunjung.

Monday, February 19, 2018

Cara Membuat Form Newsletter Dengan HTML Dan CSS

      Comment  

Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form newsletter dengan HTML dan CSS, langsung kita mulai belajar cara membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Pertama, kita membutuhkan library Font Awesome untuk menggunakan sebuah icon, untuk menggunakan library Font Awesome, silahkan copy dan paste tag link ini dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Kedua, tulis syntax HTML seperti dibawah ini. 
<form action="#" method="get">
  <div class="icon">
    <span class="fa fa-envelope"></span>
  </div>
  <p><strong>Newsletter</strong></p>
  <p>Dapatkan artikel terbaru dari kami, langsung via email anda.</p>
  <label><span class="fa fa-user"></span> Nama Lengkap
    <input type="text" placeholder="Masukkan nama lengkap anda">
  </label>
  <label><span class="fa fa-envelope-o"></span> Email
    <input type="email" placeholder="Masukkan email yang valid">
  </label>
  <button type="submit"><span class="fa fa-send"></span> Kirim</button>
</div>
Selanjutnya, jika anda telah menulis syntax HTML diatas, tulis syntax CSS seperti dibawah ini. 
form{
      width: 100%;
      max-width: 300px;
      padding: 15px;
      text-align: center;
      background-color: #199e46;
      color: #fff;
    }

    label,input{
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
    }

    input{
      width: 100%;
      padding: 10px 14px;
      border-radius: 20px;
      border: none;
      margin-top: 7px;
      box-sizing: border-box;
      color: #199e46;
    }

    button{
      padding: 10px;
      width: 100%;
      border: none;
      border-radius: 20px;
      background-color: #199e46;
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      transition: .3s;
    }
    button:hover{
      background-color: #fff;
      color: #199e46;
    }
    .icon{
      width: 150px;
      height: 150px;
      margin: auto;
      border-radius: 50%;
      background-color: #fff;
      color: #199e46;
      line-height: 150px;
      text-align: center;
      font-size: 100px;
    }
Untuk hasilnya, anda dapat melihat hasilnya pada gambar dibawah ini.


Bagaimana menurut anda, design form newsletternya udah bagus atau belum nih ?

Demikian, cara membuat design form newsletter dengan HTML dan CSS, semoga anda tertarik belajar membuatnya. Jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih

Semoga Bermanfaat.

Membuat Animasi Gambar Bergetar Dengan HTML Dan CSS

      3 comments  

Hai semuanya,  pada tutorial kali ini kita akan belajar mengenai cara membuat animasi gambar bergetar dengan HTML dan CSS, langsung kita mulai belajar membuatnya.

Pertama, tulis syntax html seperti dibawah ini. 
<h1>Animasi Gambar Bergetar</h1>
<p>Hover gambar dibawah ini.</p>
<img src="gambar.jpg" alt="Gambar Bergetar">
Kedua, setelah menulis syntax HTML diatas, tambahkan syntax CSS seperti dibawah ini. 
img:hover{
    animation: bergetar 0.4s;
    animation-iteration-count: infinite;
  }
  @keyframes bergetar {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
Untuk melihat hasilnya, anda dapat melihanya pada demo animasi gambar bergetar dibawah ini.

Animasi Gambar Bergetar

Hover gambar dibawah ini.
Gambar Bergetar

Demikian, cara membuat animasi gambar bergetar dengan HTML dan CSS, semoga anda tertarik membuat animasi tersebut. Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.

Sunday, February 18, 2018

Membuat Animasi Loading Dengan HTML Dan CSS

      1 comment  

Hai semuanya, pada tutorial kali ini, kita akan belajar membuat animasi loading dengan HTML dan CSS, baiklah, kita langsung saja belajar cara membuatnya.

Pertama, tulis syntax HTML seperti dibawah ini. 
<div class="container">
  <h1>Animasi Loading</h1>
  <div class="loader"></div>
</div>
Kedua, tambahkan syntax CSS, seperti dibawah ini. 
.container{
    width: 500px;
    margin: auto;
  }
  .loader{
    border: 30px solid #000;
    border-top: 30px solid #e92a2a;
    border-bottom: 30px solid #dbdf28;
    border-right: 30px solid #27c761;
    border-left: 30px solid #2082d2;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }
Untuk melihat hasilnya, anda dapat melihatnya pada demo animasi loading dibawah ini.

See the Pen QZbdKJ by Karis Maulana (@karismaulana) on CodePen.

Demikian, cara membuat animasi loading dengan HTML dan CSS, menurut kalian, animasi loading sudah bagus atau tidak, kasih tau kami ya. Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat

Membuat Tombol Share Social Media Dengan HTML Dan CSS

      1 comment  

Hai semuanya, pada tutorial kali ini kita akan belajar mengenai cara membuat design tombol share social media menggunakan HTML dan CSS.

Pertama, untuk mendapatkan icon Facebook, Twitter dan Google Plus, kita akan menggunakan sebuah library icon yaitu Font Awesome, untuk menggunakannya tambahkan link dibawah ini dibawah tag <title>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Kedua, tulis syntax HTML seperti dibawah ini. 
<div class="container">
  <h1>Bagikan artikel ini ke </h1>
    <div class="facebook">
      <span class="fa fa-facebook"></span>
    </div>
    <div class="twitter">
      <span class="fa fa-twitter"></span>
    </div>
    <div class="google-plus">
      <span class="fa fa-google-plus"></span>
    </div>
</div>
Selanjutnya, tulis syntax CSS seperti dibawah ini. 
.container{
    width: 500px;
    margin: auto;
  }
  .facebook,.twitter,.google-plus{
    display: inline-block;
    margin-right: 5px;
  }
  .facebook{
    width: 40px;
    height: 40px;
    background-color: #2a4299;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
  .twitter{
    width: 40px;
    height: 40px;
    background-color: #3899fe;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
  .google-plus{
    width: 40px;
    height: 40px;
    background-color: #fb2929;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }
Untuk hasilnya dapat dilihat pada gambar dibawah ini.


Demikian, cara membuat tombol share dengan HTML dan CSS, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat

Membuat Form Login Sederhana Dengan HTML Dan CSS

      Comment  

Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form login yang sangat sederhana dengan HTML dan CSS, baiklah, kita langsung saja belajar membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Langkah pertama, buatlah sebuah folder bernama formlogin, kemudian didalam folder formlogin, buatlah sebuah folder bernama img, kemudian tambahkan sebuah gambar kedalam folder img, setelah itu buatlah file bernama index.html pada folder formlogin, contohnya dapat dilihat pada gambar dibawah ini.

Langkah kedua, bukalah file index.html, kemudian tulis syntax  HTML, seperti dibawah ini.
<div class="form-container">
  <form action="" method="post">
  <div class="img-container">
   <img src="avatar.png" alt="" class="avatar">
   <h1>Silahkan Login</h1>
  </div>
  <div class="container">
   <label for="">Nama Pengguna</label>
    <input type="text" placeholder="Masukkan Nama Pengguna" required autocomplete="off" autofocus>
   <label for="">Kata Sandi</label>
    <input type="password" placeholder="Masukkan Kata Sandi" required autocomplete="off">
   <label for=""><input type="checkbox"> Ingat Saya</label>
    <button type="submit">Sign In</button>
   <span class="pws">Lupa <a href="#">Kata Sandi ?</a></span>
  </div>
 </form>
 </div>
Setelah itu, tambahkan syntax CSS, seperti dibawah ini. 
.form-container{
  width: 100%;
  max-width: 400px;
  margin: auto;
}
form{
      box-shadow: 0px 5px 25px -5px #999;
}
input[type=text], input[type=password]{
  width: 100%;
  margin: 10px 0;
  padding: 12px 20px;
  box-sizing: border-box;
}
button{
  background: #2374fc;
  color: #fff;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  width: 100%;
  cursor: pointer;
}
.btn-cancle{
  width: auto;
  padding: 10px 18px;
  background-color: #f93333;
}
.img-container{
  text-align: center;
  margin: 24px 0 12px 0;
  padding: 15px 0;
}
img.avatar{
  width: 40%;
  border-radius: 50%;
}
.container{
  padding: 16px;
}
Untuk melihat hasilnya, anda dapat lihat pada gambar dibawah ini.


Begitulah teman teman, cara membuat design form login dengan HTML dan CSS, menurut kalian bagaimana design form loginnya, kalau menurut saya sudah cukup sederhana.

Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.

Membuat Skill Progress Dengan HTML Dan CSS

      Comment  

Hai semuanya, pada tutorial kali ini, kita akan belajar membuat design skill progress bar dengan HTML dan CSS, langsung kita mulai belajar membuatnya.

Jika anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Langkah pertama, buatlah sebuah folder skillprogress, didalam folder skillprogress buatlah sebuah folder bernama img kemudian tambahkan photo anda didalam folder img, kemudian buatlah sebuah file bernama index.html pada folder skillprogress, contoh herarkinya, dapat anda lihat pada gambar dibawah ini.

Langkah kedua, buka file index.html, tulis syntax HTML seperti dibawah ini.
<div class="card">
  <div class="bio">
   <img src="img/avatar.jpg" alt="">
   <p><strong>Karis Maulana</strong><br> @maulana</p>
  </div>
  <div class="skill-bar">
   <h2>Skill yang dimiliki</h2>
   <label>HTML</label>
   <div class="container">
    <div class="skill html">80%</div>
   </div>
   <label>CSS</label>
   <div class="container">
    <div class="skill css">70%</div>
   </div>
   <label>Java Script</label>
   <div class="container">
    <div class="skill js">50%</div>
   </div>
   <label>PHP</label>
   <div class="container">
    <div class="skill php">40%</div>
   </div>
   <label>MySQL</label>
   <div class="container">
    <div class="skill mysql">20%</div>
   </div>
  </div>
 </div>
Setelah itu, tulis syntax CSS seperti dibawah ini. 
.container{
   width: 100%;
   background-color: #f2f2f2;
   margin-bottom: 10px;
   border-radius: 10px;
  } 
  .card{
   width: 100%;
   max-width: 400px;
   border-radius: 5px;
   border: 2px solid #ddd;
  }
  .bio{
   padding: 10px;
   text-align: center;
  }
  .bio img{
   object-fit: cover;
   width: 180px;
   height: 180px;
   border-radius: 50%;
  }
  .skill-bar{
   text-align: left;
   padding: 10px;
   font-size: 12px;
  }
  .skill{
   color: #fff;
   font-size: 12px;
   text-align: center;
   border-radius: 10px;
  }
  .html{width: 80%;background-color: #22eb72}
  .css{width: 70%;background-color: #1E80FA}
  .js{width: 50%;background-color: #DBE223}
  .php{width: 40%;background-color: #E93232}
  .mysql{width: 20%;background-color: #E93232}
Untuk hasilnya, dapat dilihat pada gambar dibawah ini.


Bagaimana, menurut anda, ini sudah cukup bagus atau belum ?

Begitulah cara membuat skill progress dengan HTML dan CSS, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.