Berkreasi Dengan Efek Bayangan Pada Border

Lagi2 masalah tutorial blog, sebenar’y saya bukan ahli’y tapi tetap aja sobat blogger nengajukan kembali sebuah pertanyaan, sebenarnya langsung dua pertanyaan sich.. tapi kali ini saya akan bahas satu pertanyaan dulu..

Setelah beberapa waktu yang lalu saya memposting berkreasi pada border blog dan tau2 ada yang bertanya gimana cara membuat efek bayangan’y pada border blog. Ok langsung saja saya bahas.

Sobat bisa langsung letakkan kode bayangan ini baik pada posts, sidebar ataupun footer. Berikut ini adalah kode CCS dasar untuk membuat effek bayangan pada border :

Bayangan outset

box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222; /* Untuk Firefox */
-webkit-box-shadow:10px 10px 7px #222; /* Untuk Safari */

Bayangan inset

box-shadow:inset 10px 10px 7px #222;
-moz-box-shadow:inset 10px 10px 7px #222; /* Untuk Firefox */
-webkit-box-shadow:inset 10px 10px 7px #222; /* Untuk Safari */

10px yang pertama adalah ukuran offset sumbu X, yang keddua adalah offset sumbu Y. 7px adalah tingkat blur. #222 adalah warna bayangan. Sobat juga bisa menulis nilai offset negative untuk membuat bayangan pada arah sebaliknya.

bawah ini adalah contoh-contoh penerapannya yang lebih detail.

    moz-box-shadow: 10px 5px 7px #222;
    -webkit-box-shadow: 10px 5px 7px #222;
    box-shadow: 10px 5px 7px #222;

   
   -moz-box-shadow: 0 10px 7px #222;
   -webkit-box-shadow: 0 10px 7px #222;
   box-shadow: 0 10px 7px #222;

   -moz-box-shadow: 10px 0 7px #222;
   -webkit-box-shadow: 10px 0 7px #222;
   box-shadow: 10px 0 7px #222;

   -moz-box-shadow: 0 0 7px #222;
   -webkit-box-shadow: 0 0 7px #222;
   box-shadow: 0 0 7px #222;

   -moz-box-shadow: 0 0 20px #222;
   -webkit-box-shadow: 0 0 20px #222;
   box-shadow: 0 0 20px #222;

   -moz-box-shadow: 0 0 20px #f10c0c;
   -webkit-box-shadow: 0 0 20px #f10c0c;
   box-shadow: 0 0 20px #f10c0c;

   -moz-box-shadow: 10px 5px 0 #222;
   -webkit-box-shadow: 10px 5px 0 #222;
   box-shadow: 10px 5px 0 #222;

   -moz-box-shadow: -10px -5px 0 #222;
   -webkit-box-shadow: -10px -5px 0 #222;
  box-shadow: -10px -5px 0 #222;

   -moz-box-shadow: inset 10px 5px 7px #222;
   -webkit-box-shadow: inset 10px 5px 7px #222;
   box-shadow: inset 10px 5px 7px #222;

   -moz-box-shadow: inset 0 10px 7px #222;
   -webkit-box-shadow: inset 0 10px 7px #222;
   box-shadow: inset 0 10px 7px #222;

   -moz-box-shadow: inset 10px 0 7px #222;
   -webkit-box-shadow: inset 10px 0 7px #222;
   box-shadow: inset 10px 0 7px #222;

   -moz-box-shadow: inset 0 0 7px #222;
   -webkit-box-shadow: inset 0 0 7px #222;
   box-shadow: inset 0 0 7px #222;

   -moz-box-shadow: inset 0 0 20px #222;
   -webkit-box-shadow: inset 0 0 20px #222;
   box-shadow: inset 0 0 20px #222;

   -moz-box-shadow: inset 0 0 20px #f10c0c;
   -webkit-box-shadow: inset 0 0 20px #f10c0c;
   box-shadow: inset 0 0 20px #f10c0c;

   -moz-box-shadow: inset 10px 5px 0 #222;
   -webkit-box-shadow: inset 10px 5px 0 #222;
   box-shadow: inset 10px 5px 0 #222;

   -moz-box-shadow: inset -10px -5px 0 #222;
   -webkit-box-shadow: inset -10px -5px 0 #222;
   box-shadow: inset -10px -5px 0 #222;

Ket :

·        Jika pada ingin meletakkan pada posting maka ganti kode setelah .post{border-bottom:1px solid #E9E8E8;margin-bottom:15px;padding:10px 0 0 0;}

·        Pada sidebar .sidebar{margin:0 0 10px 0;color:#757575;font-size:12px;}

·        Dan widget pada footer juga sama dengan yang di atas,

·        Setiap template mempunyai kode post dan sidebar yang berbeda-beda, yang sobat lakukan adalah hanya mengganti kode yang berwarna merah tersebut dengan salah satu kode bayangan di atas.

·        Ketika pencarian kode CCS sobat hanya perlu mencari kode .post ataupun .sidebar




Selamat mencoba sambil berkreasi^^...