Membuat Efek Sticky Note Dalam 5 Langkah Mudah Dengan CSS3 dan HTML5

Di dalam tutorial ini, kamu akan mempelajari bagaimana mengubah sebuah HTML list ke dalam sebuah dinding "sticky notes" yang tampak dan berkerja seperti di bawah ini:

Efek ini dibangun secara bertahap dan berkerja pada browser Webkit terbaru (Safari, Chrome), Firefox, dan Opera. Browser lainnya hanya mendapatkan persegi kuning.

Langkah 1: HTML dan Persegi Dasar

Mari mulai dengan versi paling sederhana yang berkerja sepanjang semua browser. Karena kita menggunakan HTML5 untuk efek, dasar HTML sticky notes kita adalah daftar tanpa urutan dengan sebuah tautan berisi semua elemen lainnya di dalam tiap item pada daftar:

<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>
  […]
</ul>

Perhatikan bahwa tiap catatan dikelilingi oleh sebuah tautan yang selalu merupakan elemen bagus untuk digunakan karena itu secara otomatis berarti bahwa catatan kita menjadi dapat diakses keyboard. Jika kita menggunakan item daftar untuk efek kita perlu mengatur sebuah properti tabindex untuk mendapatkan akses yang sama.

CSS untuk mengubah ini menjadi persegi kuning cukup sederhana:

*{
  margin:0;
  padding:0;
}
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
  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;
}

Kita mereset hal-hal yang normalnya diberikan browser seperti margin dan padding dan list style untuk menghilangkan bullet pada list.

Kita kemudian memberikan UL element beberapa padding dan mengatur properti overflow untuk disembunyikan - ini memastikan bahwa ketika kita melayangkan item daftar nantinya mereka dikandung di dalam daftar dan elemen berikut di dalam dokumen secara otomatis membersihkan itu.

Kita memberikan style sebagai persegi kuning dan melayangkan semua item daftar ke kiri. Hasil adalah sebuah rangkaian kotak kuning untuk daftar kita:

Ini berkerja untuk setiap browser di luar sana - termasuk IE6. Ini juga dimana kita mengakhiri dukungan browser ini karena kita tidak seharusnya menampilkan efek visual yang didukung teknologi modern ke yang telah tertinggal.

Langkah 2: Drop Shadow dan Font Scribbly

Sekarang waktunya untuk menambahkan drop shadow ke catatan untuk membuat mereka menonjol dan untuk menggunakan font scribbly tulisan tangan sebagai font catatan. Untuk ini kita menggunakan Google Fonts API dan font yang disediakan untuk kita, bernama "Reenie Beanie". Cara termudah untuk menggunakan API ini adalah memainkannya dengan Google font previewer:

Menggunakan ini, kita mendapatkan sebuah baris HTML sederhana untuk mencantumkan font baru ini ke dalam halaman. Ini didukung oleh semua browser modern.

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

Kita kemudian mengatur beberapa padding ke heading di dalam sticky notes, dan mengatur font paragraph ke font baru yang kita cantumkan. Perhatikan bahwa Reenie Beanie perlu tampak besar agar 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%;
}

Untuk memberikan bayangan pada sticky note untuk membuatnya menonjol dari halaman, kita perlu menerapkan sebuah box-shadow. Untuk ini, kita harus menambahkan sebuah baris untuk tiap browser yang berbeda yg ingin kita dukung untuk style tautan:

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

Sintaks untungnya sama untuk masing-masing: offset, spread dan colour - dalam hal ini sebuah abu-abu gelap dengan opacity 70%. Bersama dengan font baru sticky notes kita sekarang tampak seperti ini:

Langkah 3: Memiringkan Catatan

Perhatian: baik memiringkan dan melakukan zoom yang akan kita tambahkan di tahap selanjutnya telah dijelaskan di waktu lalu, di dalam artikel ini oleh Zurb, namun kekurangan dukungan untuk browser lainnya, dimana mereka tidak muncul pada waktu penulisan. Jadi terima kasih yang besar bagi mereka untuk mempublikasikan trik ini.

Untuk memiringkan sebuah elemen kamu gunakan properti CSS3 transform:rotate, sekali lagi tambahkan prefix untuk tiap browser:

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

Ini memiringkan semua tautan sebanyak enam derajat ke kiri. Sekarang untuk membuat sticky notes tampak miring secara acak, kita dapat menggunakan properti CSS3 nth-child:

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

Ini memiringkan setiap tautan empat derajat ke kanan, dan offset sedikit sebesar lima pixel dari atas. Setiap tautan ketiga dimiringkan sebanyak tiga derajat ke kiri dan mendorong ke atas lima pixel. Dan setiap tautan kelima diputar lima derajat ke kanan dan offset sepuluh pixel dari bawah. Setelah dipertimbangkan semuanya ini memberikan kesan sticky notes yang acak:

Langkah 4: Melakukan Zoom Sticky Notes Pada Hover dan Fokus

Untuk membuat sebuah sticky note menonjol kita menggunakan drop shadow yang lebih besar dan transformasi scale CSS3. Sekali lagi, kita perlu menentukan ini untuk tiap 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;
}

Kita juga menambahkan z-index yang lebih besar untuk memastikan bahwa sticky note yang diperbesar menutupi yang lainnya. Saat kita menerapkan ini pada hover dan fokus, itu berarti bahwa menggerakkan mouse di atasnya atau melakukan tab pada tautan sekarang membuatnya menonjol:

Langkah 5: Menambahkan Transisi Halus dan Warna

Langkah terakhir adalah membuat perubahan dari memiringkan ke zoom halus dan menarik daripada tiba-tiba. Untuk ini kita menggunakan CSS3 transition module dalam penerapan vendor browser yang berbeda:

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

Di dalam esensi ini mengatakan: jika sesuatu berubah pada element ini, jangan hanya memindahkan ke definisi lainnya namun lakukan itu secara bertahap selama seperempat detik. Sebagai ekstra lainnya, mari tambahkan beberapa warna ke dalam campuran dengan membuat setiap sticky note kedua hijau dan setiap ketiga biru muda:

ul li:nth-child(even) a{
  -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;
}

Untuk melihat perbedaan pada tahap terakhir, kamu perlu mencoba demo terakhir di dalam browser.

Rangkuman dan Download

Itulah dia - sticky note yang beranimasi lembut dan miring tanpa menggunakan gambar atau JavaScript - didukung oleh Firefox, Opera, Safari dan Chrome dan jatuh kembali ke kotak kuning di dalam browser tua. Dengan penggunaan yang cerdik dari selector nth-child dan transformasi dan transisi CSS, kita menghemat beberapa scripting. Lebih jauh lagi, Web Font API dari Google membuatnya mudah untuk menggunakan custom font. Menggunakan hover dan fokus untuk efek juga berarti bahwa pengguna keyboard dapat mengamati hasilnya juga.

Download contoh sticky note sebagai sebuah zip.

Tentang Author

Christian Heilmann adalah seorang Developer Evangelist internasional yang berkerja untuk Yahoo Developer Network kota indah London, Inggris. Dia telah menulis dua buku: "Beginning JavaScript with DOM Scripting and AJAX", and "Web Development Solutions."