Membuat Sticky Note Effect Dalam 5 Langkah

Langkah 1: HTML dan Dasar Squares

Mari kita mulai dengan versi yang paling sederhana yang bekerja di semua browser. Seperti kita menggunakan HTML5 untuk efek, HTML dasar Sticky Note saya adalah daftar unordered dengan link yang berisi semua elemen lain dalam setiap item list:

<ul>
     <li> <a href="#">
          <h2>Title #1</h2>
          <p>Text anda #1</p>
 </a>
     </li>
           <li> <a href="#">
                <h2>Title #2</h2>
                <p>Text anda #2</p>
          </a>
     </li>
</ul>

Kode CSS dibawah ini berfungsi untuk mengubah warna menjadi kotak kuning sederhana:

*{
  margin:0;
  padding:0;
}
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#c20000;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
}
ul li{
  margin:1em;
  float:left;
}

D E M O

Langkah 2: Drop Shadows dan Scribbly Font:

<link href="http://fonts.googleapis.com/css? family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">

Kita kemudian dapat mengatur beberapa padding untuk judul dalam Sticky Note, dan sertakan pengngatur font paragraf ke font baru . Perhatikan bahwa Reenie Beanie harus besar untuk dapat dibaca:

ul li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}

Dalam rangka memberikan Sticky Note bayangan untuk membuat mereka berdiri keluar dari halaman, kita perlu menerapkan kotak-bayangan. Untuk itu, kita harus tambahkan baris untuk masing-masing browser yang berbeda:

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  /* Firefox */
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  /* Opera */
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

D E M O

Langkah 3: Memiringkan Sticky Note

untuk memiringkan elemen Anda dapat menggunakan transform: memutar dengan CSS3, dan taambahkan lagi awalan untuk masing-masing browser:

ul li a{
  -webkit-transform:rotate(-6deg);
  -o-transform:rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

Sekarang untuk membuat Sticky Note tampaknya acak miring, kita dapat menggunakan properti nth-child CSS3:

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;
}

D E M O

Langkah 4: Zooming Sticky Notes pada Hover dan Fokus

Untuk membuat Sticky Notes menonjol kita menggunakan drop shadow yang lebih besar dan transformasi skala CSS3. Sekali lagi, kita perlu mendefinisikan ini untuk masing-masing browser:

ul li a:hover,ul li a:focus{
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  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;
}

D E M O

Langkah 5: Menambahkan Transisi Halus dan Warna

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);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;

menambahkan beberapa warna ke dalam campuran pada Sticky Notes  dengan warna hijau dan biru muda:

  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

F I N A L    D E M O