Trik Percantik Image Posting dg CSS3 Border Radius Property

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O


Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.



Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Kode CSS
.GRphotokuL,.GRphotokuR,.GRphotoku{
      padding:1%; /* code by: gubhugreyot */
      background:#eee;
      box-shadow:0 0 10px #555;
}
.GRphotokuL{
      float:left;
      margin:5px 15px 5px 0;
}
.GRphotokuR{
      float:right;
      margin:5px 0 5px 15px;
}
.GRphotoku{
      margin:15px auto;
      display:block;
      text-align:center;
}

Cara menggunakan:
  1. Simpan kode css di atas kode ]]></b:skin>
  2. Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.
  3. Untuk gambar di sebelah kiri (float:left;} gunakan class="GRphotokuL"
  4. Untuk gambar di sebelah kanan (float:right;} gunakan class="GRphotokuR"
  5. Untuk gambar di tengah gunakan class="GRphotoku"
  6. Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).
  7. Nilai persen (%) harus dengan kelipatan 10 karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).
  8. Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.
  9. Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (Special Tutorials).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis WAGE, February, 29, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment