. Berkreasi Dengan Efek Bayangan Pada Border | Catatan Si Virgo Girl

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Tuesday, November 22, 2011

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^^...
   

8 comments:

mantap sob,..

mau blog anda jadi mesin pengumpul uang..? kunjungi blog ku. tips blog anda jadi mesin pengumpul uang secara gratis

blogwalking....

Visit back + komennya ya :)

Selalu berkunjung sobat :)
Main k blog Ane ya gan

Klik 4information y gan :)

Komentar di tunggu sobat
Jangan lupa follow jga :) ( follow back )

Salam blogger

kunjungan malam... artikel yang sangat bermanfaat.. oia maap sob , saya suka sekali dengan cara efect bayangan ini namun saya kurang paham untuk cara penerapan script di edit htmlnya posts, sidebar ataupun footernya , sudah saya cari googling cari info penerapan namun alhasil nihil.., sudah coba script dari berbagai sumber dengan utak atik di edit html beberapa kali namun gagal terus , maklum saya masih newbie di dunia blogger , jika seandainya bisa tolong buatkan artikel cara penerapan di edit htmlnya dong sob.. terimakasih

@Softwere : cara penerapannya mudah kok, u tinggal masukin aja kode sesuai dengan bayangan yang u inginkan setelah kode .post {, .sidebar {, mapun footer { . silahkan baca lagi keterangan di atas, jika kamu belum paham juga silahkan tanya lagi.. moga aja saya bisa bantu :)

thaks banget tutornya, udah berhasil

May 28, 2012 at 9:17 PM
Anonymous said...

Ane coba dlu sob, moga brhsil kunjung balik + follow ea

 

My Followers

Page Like

Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |