Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-4

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-4.

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-4. 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>

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

/* Tambahkan transisi pada selector a */ 
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;

  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);

/*transisi membuat animasi menjadi lebih lembut*/
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

– Hasilnya akan menjadi seperti ini:

Pada saat kita hover note-nya maka akan terjadi transisi dengan waktu per-sekian detik sehingga membuat animasi menjadi lebih menarik.

Bagaimana teman-teman mudahkan Cara Membuat Note Menggunakan HTML5 dan CSS3 Part-4. Jangan lupa ya untuk mencobanya langsung dan terus belajar tentang ilmu web design.

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