Pages

Sabtu, 02 Juni 2012

css box shadow

Mari belajarlagi,kali ini kita akan membahas tentang CSS BOX SHADOW .Box shadow ini dapat agan pergunakan untuk mempercantik postingan sobat atau untuk memberikan gaya bayangan di sidebar blog agan,oke gan mari kita coba saja css seperti dibawah ini

joringta

Nah untuk kode css seperti diatas itu adalah seperti ini
#joringta { -moz-box-shadow: 10px 10px 5px #222; -webkit-box-shadow: 10px 10px 5px #222; box-shadow: 10px 10px 5px #222; }

Adapun perintahyang terdapat di dalam CSS BOX SHADOWnya adalah sebagai berikut uraiannya,dan anda dapat memodif lagi agar lebih indah..

  • Horizontal Offset=Jika nilainya positif maka bayangan akan beradadi sebelah kanan kotak,nah sebaliknya jika nilainya negatif maka bayngan tentu berada di sebelah kiri kotak

  • Verical ofset=Jika nilainya positif maka bayangannya akan berada di sebelah bawah kotak,dan sebaliknya jika nilainya negatif maka bayangannya berada di sebelah bawah

  • Blur radius=Jika nilainya nol maka bayangannya seperti biasa,dan jika nilainya ada maka bayangannya akan semakin blur

  • Warna bayangan=#222 ( #222) bolehagan ganti dengan warna yang lain menurut kebutuhan agan
  • Oke bro dibawah ini ada beberapa contoh menurut beyangan dari berbagai sudut untuk agan kembangkan lagi

    joringta1

    untuk kode css diatas adalah
    #joringta1{ -moz-box-shadow: -5px -5px #666; -webkit-box-shadow: -5px -5px #666; box-shadow: -5px -5px #666; }

    joringta2

    untuk kode css diatas adalah
    #Contoh_B { -moz-box-shadow: -5px -5px 5px #222; -webkit-box-shadow: -5px -5px 5px #222; box-shadow: -5px -5px 5px #222; }

    joringta3

    untuk kode css diatas adalah
    #joringta3 { -moz-box-shadow: -5px -5px 0 5px #222; -webkit-box-shadow: -5px -5px 0 5px #222; box-shadow: -5px -5px 0 5px #222; }

    joringta4

    untuk kode css diatas adalah
    #joringta4{ -moz-box-shadow: -5px -5px 5px 5px #222; -webkit-box-shadow: -5px -5px 5px 5px #222; box-shadow: -5px -5px 5px 5px #222; }

    joringta5

    untuk kode css diatas adalah
    #joringta5{ -moz-box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; box-shadow: 0 0 5px #222; }

    joringta6

    untuk kode css diatas adalah
    #joringta6{ -moz-box-shadow: 0 0 5px 5px #000099; -webkit-box-shadow: 0 0 5px 5px #000099; box-shadow: 0 0 5px 5px #000099; }
    dan sengaja saya ganti warna biru agar lebih paham..

    Oke gan demikianlah sedikit kreasiuntuk css shadow dan agan boleh lebih mengkreasikannya lagi,umpamanya jadikan dia di kotak komentar admin agar berbeda dari yang lain atau di halaman postinganmu,caranya gimana gan,caranya kita bahas dipostingan berikutnya..!!!


    0 komentar:

    Posting Komentar

     
    Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews