Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba melanjutkan tutorial sebelumnya. Sekarang kita akan membahas tentang Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-3.

Sering kali kita ingin memberi efek-efek pada website kita agar terlihat lebih bagus. Seperti membuat note untuk kita sisipkan di website kita.

Nah, sekarang saya akan mencoba memberikan efek animasi menggunakan CSS3.

Sekarang saya akan memberikan trick Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-3. berikut langkah-langkahnya:

– Pertama teman-teman buka file index.html yang kemarin kita telah buat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sticky notes using CSS3 and Google Fonts (Step 1)</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link  href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <ul>
    <li>
      <a href="#">
        <h2>Title #1</h2>
        <p>Text Content #1</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </a>
    </li>
  </ul>
</div>
</body>
</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman buka file css yang telah kita buat kemarin.Lalu tambahkan kode CSS3 di bawah ini:

/*Tambahkan kode di bawah ini untuk membuat masin-masing note berubah posisinya*/

ul li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
}
ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

– Hasilnya akan menjadi seperti ini:

Bagaimana teman-teman mudahkan Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-3. Pada tutorial berikutnya kita akan mencoba menambahkan efek animasi supaya lebih bagus lagi pada note yang telah kita buat tadi.

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.