Pasang Efek Pigura Dengan CSS

Kali ini aku akan membahas tentang cara membuat gambar yang terpasang di blog/web kita agar terlihat lebih menarik.
Misalnya, gambar yang terlihat biasa seperti ini :

maka dengan sedikit sentuhan CSS akan tampak seperti ini :






Terlihat lebih menarik bukan...?

Nah, untuk membuatnya sangat mudah.
Masukkan Script CSS berikut:

img {
    padding: 8px;
    background: #ffffff;
    border: 1px solid #cccccc;

    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Letakkan kode CSS tadi di atas tag </style>.

Akan tetapi bila kita memasang Script CSS tersebut begitu saja, maka semua gambar/image yang ada akan secara otomatis berubah sesuai dengan Script CSS yang kita masukkan tadi.

Maka untuk mengatasi hal tersebut kita hanya membutuhkan satu tanda yaitu tanda pagar '#' atau bisa juga tanda titik '.'

Maka Script CSS tersebut akan menjadi seperti berikut:

#img {
    padding: 8px;
    background: #ffffff;
    border: 1px solid #cccccc;

    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Setelah itu, untuk pemasangannya yang perlu diingat adalah:

• Apabila kita menggunakan tanda pagar '#' ( #img ) maka pemanggilannya/penulisannya sebagai berikut
  

  <img id="img" src="url_gambar.jpg">

  
  
• Apabila kita menggunakan tanda titik '.' ( .img ) maka pemanggilannya/penulisannya sebagai berikut
  

  <img class="img" src="url_gambar.jpg">

Maka dengan demikian gambar yang kita pasang dengan Script tersebut akan tampak memiliki frame/pigura seperti gambar diatas.

Kalian bisa mengubah ubah warna backgroundnya sesuai dengan selera.
Misal apabila ingin merubah background menjadi warna hijau maka tinggal dirubah

background: #ffffff;

menjadi

background: green;

maka akan menjadi seperti :




lalu kalau ingin merubah bayangannya tinggal edit RGB-nya aja. :D

Semoga bermanfaat

*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !