"Stitched" Box Shadow

Bagaimana membuat sebuah box berisikan teks atau yang biasa disebut text box???

Tertarik membuatnya dengan CSS dan berkreasi dengan warna maupun tampilannya???

Coba lihat demo dibawah ini :

1. Login ke blogger.

2. Pilih Template - Edit HTML.

3. Centang Expand Template Widget.

4. Letakkan kode berikut diatas </style> :

.stitched {
   padding: 20px;
   margin: 10px;
   background: #FE80DF;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
} 

5. Simpan Template.

Selesai???

Belum sob, untuk menampilkan box nya sendiri mulailah pada elemen dimana box ini ingin diletakkan, misalnya di sebuah halaman posting dengan menggunakan kode HTML :

     <div class="stitched">

        ISI TEXT ANDA DISINI

    </div>

Bagaimana, mudah bukan???

Untuk berkreasi dengan warna maka bisa lihat kode-kode nya disini.

Terima kasih, semoga bermanfaat...

Referensi : CSS Tricks