css3 Sticky Note

CSS "Cascading Style Sheets" adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML dan merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Yang mana pada postingan kali ini
Nice post ☆ akan memberi satu trik css yang mana sebelumnya sudah memposting Animasi Loading Page Dengan jQuery dan sekaranglah saatnya saya akan memberi satu trik css yaitu css3 Sticky Note.

Perhatikan Kode bawah ini :

Kode CSS : Kode Css sangatlah simple untuk di pelajari dan di kembangkan,seperti yang ada di bawah ini.

body { background:url(http://subtlepatterns.com/patterns/little_pluses.png) #cacaca; margin:30px; }

textarea  { 
 display: block;
 padding:25px 25px 40px;
 margin:0 auto 20px auto;
 width:250px;
 height:250px;   
 font:20px 'Gloria Hallelujah', cursive; 
 line-height:1.5;
 border:0;
 border-radius:3px;
 background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
 background: -moz-linear-gradient(#F9EFAF, #F7E98D);
 background: -o-linear-gradient(#F9EFAF, #F7E98D);
 background: -ms-linear-gradient(#F9EFAF, #F7E98D);
 background: linear-gradient(#F9EFAF, #F7E98D);
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
 overflow:hidden;
 transition:box-shadow 0.5s ease;
 font-smoothing:subpixel-antialiased;
 max-width:520px;
 max-height:250px;
}

textarea:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); }
textarea:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; }

Untuk Melihat klik Demo : 

  Css Demo 

Untuk mengaktifkan kode css di atas kita memerlukan sebuah pemanggil yaitu  HTML :

Seperti yg di bawah ini.[credit=cssdeck.com]

<textarea>Ketikan Teks di sini.</textarea>