April 10, 2013

"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

4 comments

  1. Keren mis artikelnya, trimakasih banyak sudah berbagi

    ReplyDelete
  2. admin yang baik hati saya mau tanya, kalo mau buat kotak untuk title description di akhir bacaan seperti di blog saya gimana ya...tolong jawabannya soalnya masih baru terjun di blogger..baru beberapa jama yang lalu http://1nfobol4.blogspot.com

    ReplyDelete
    Replies
    1. =p* hmm saya bingung saat membuka link2 postingannya tidak ada isi dari postingan yang bersangkutan... jadi saya pun kurang mengerti kotak title description yg dimaksud seperti apa, namun mungkin postingan ini http://aiizahh.blogspot.com/2013/02/cara-membuat-kotak-peringatan-pada.html tinggal dimodifikasi saja kata-katanya, penempatannya pun akan ada di bagian bawah postingan...

      Delete