Sticky Note with CSS Only

Penasaran dan pengen tau bagaimana cara menyisipkan sticky note cantik seperti gambar di atas pada blog kamu ? Ikuti langkah - langkah sederhana berikut ini.

Sebenarnya stiky note cantik diatas hanya menggunakan css semata. Tidak kurang dan tidak lebih. Untuk lebih jelasnya fahami code cssnya di bawah ini.

@import url(http://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);
.ribbon {
    display:block;
    width:200px;
    margin:30px auto 0 auto;
    padding:15px 20px;
    position: relative;
    font-family: 'Mountains of Christmas', cursive;
    font-size:32px;
    text-align:center;

    -moz-box-shadow:    6px 6px 25px 0px #000;
   -webkit-box-shadow: 6px 6px 25px 0px #000;
   box-shadow:         6px 6px 25px 0px #000;

    background: rgb(246,230,180);
  background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(234,183,121,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(234,183,121,1)));
  background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: -o-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: -ms-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(234,183,121,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eab779',GradientType=0 );
}

.ribbon:after {
    content: " ";
    display:block;
    position: absolute;
    width: 240px;
    bottom:-20px;
    left:0px;
    height:30px;

    background: linear-gradient(-45deg, transparent 75%, #EAB779 75%) 0 50%,
                linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%;


    background: -moz-linear-gradient(135deg, transparent 75%, #EAB779 75%) 0 50%,
                -moz-linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%;


    background: -webkit-linear-gradient(135deg, transparent 75%, #EAB779 75%) 0 50%,
                -webkit-linear-gradient( 45deg, transparent 75%, #EAB779 75%) 0 50%

    ;


    background-repeat: repeat-x;
    background-size:10px 12px, 10px 12px;
}

.ribbon:before{
    content: " ";
    display:block;
    position: absolute;
    width: 240px;
    top:-20px;
    left:0px;
    height:30px;



    background: linear-gradient(135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%;


    background: -moz-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                -moz-linear-gradient( -45deg, transparent 75%, #f6e6b4 75%) 0 50%;


    background: -webkit-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%,
                -webkit-linear-gradient( -45deg, transparent 75%, #f6e6b4 75%) 0 50%;


    background-repeat: repeat-x;
    background-size:10px 12px, 10px 12px;}

Kamu dapat mengedit sesuka hatimu css tersebut untuk mempercantik blog kamu. Dan langkah yang terakhir yakni menambahkan widget pada blog kamu. Berikut code HTMLnya.

<div class="ribbon">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Untuk kata - kata pada sticky note terserah kamu.
Selamat Mencoba.