Sabtu, 27 November 2010

Membuat Gambar Bershadow Dengan CSS3

Tutorial Blogger kali ini saya akan memberikan Cara Membuat Gambar Bershadow Dengan CSS3,banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.
Gambar tersebut nantinya akan terlihat seperti gambar di atas. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah in:1. Login di Blogger.com / draft.blogger.com
2. Silahkan Masuk di Rancangan / Tata Letak lalu lanjutkan ke Tab Edit HTML
3. Cari kode seperti ini
.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

4. Kalau sudah ketemu gantilah kode yang merah tadi,Sehingga kode yang merah tadi menjadi seperti ini
.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

5. Dan yang terakhir silahkan disimpan/di SAVE
Semoga Tutorial Blogger Cara Membuat Gambar Bershadow Dengan CSS3 kali ini bisa bermanfaat bagi kita semua.[Kang Tiar]

21 komentar:

  1. nice post......
    salam knl sobat.....
    jika berkenan silahkan mampir balik....

    BalasHapus
  2. cuma bisa bilang, "artikel yang bagus".
    maaf kalo komen saya tidak bermutu. hehe

    BalasHapus
  3. salam sahabat
    ouw mudah juga yach membuat gambar bershadow dengan css3,malah saya belum banyak penerapannya di css3 ini kang,makasih yach

    BalasHapus
  4. Siiipp Kang...

    Di Coba Ntr...

    SiLahkan Mampir klo Lgi lewat...

    heheheeeeeeeeeeeee

    BalasHapus
  5. mantab infonya kang,,,dcoba dulu deh.
    wah blog ku bakal tambah keren lg donk, he.he....!!

    BalasHapus
  6. hmmm.. mantap nih.. ada bayangannya.. coba ah...

    BalasHapus
  7. @foto toples dewi persik
    Tentu saja nggax gan!!! kan hanya mengubah CSSnya,..

    BalasHapus
  8. Wah keren ni Kang, Ane memang belum Faham tentang gambar Bershadow ini Dan cara bikinya....eh Ternyata ada di tempat temen sendiri ##

    BalasHapus
  9. mozilla belum mendukung css3 animation kang TT..TT
    cuma bisa di google chrome..

    BalasHapus
  10. ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

    BalasHapus
  11. KANGTIAR PASSWORD BLOGMU AKAN SAYA GANT TRUS SAYA HAPuS BLOGMU, TUNGGU SAJA!

    BalasHapus
  12. Oops! Message could not be posted. Your IP address have posted messages on multiple shoutboxes.

    Repeated posting attempt may cause your website address to be flagged as spam and banned from the system.

    Please wait a moment before trying again.

    BalasHapus
  13. Keliatannya mudah ya kang. Ok ku cob kang
    makasih infonya

    BalasHapus
  14. Nice post kangtiar, thanks artikelnya.

    BalasHapus
  15. Terimakasih Bos, Indahnya berbagi ilmu yang membuat semakin bertambah ilmu

    BalasHapus
  16. mantabbb keren Kang, terimakasih artikel yang bermanfaat, salam sukses selalu untuk anda

    BalasHapus