Senin, 21 April 2014

Membuat & Memasang Border Pada Teks & Gambar

Membuat & Memasang Border Pada Teks & Gambar - Pada beberapa artikel sebelumnya saya telah membahas tentang border yang biasa digunakan disetiap objek tertentu, dan pada artikel ini saya akan menjelaskan tentang cara membuat border khusus yang bisa digunakan pada teks atau gambar, atau istilah lain dari border ini adalah memberikan efek bingkai pada teks atau gambar atau efek stroke

Untuk berbagai macam bentuk border silahkan baca juga di Macam-macam garis border atau Cara membuat border melengkung

Membuat & Memasang Border Pada Teks & Gambar

Dengan memberikan efek stroke atau memasang border pada teks atau gambar akan membuat tampilan teks atau gambar tersebut akan terlihat lebih bagus, apalagi jika dikombinasikan dengan efek-efek lainnya seperti efek tiga dimensi yang telah saya berikan juga di blog ini atau memberikan efek shadow atau bayangan yang juga telah saya sediakan di blog ini

Membuat efek border pada teks atau gambar tidak lah terlalu sulit, sama seperti memberikan efek-efek yang lain pada teks atau gambar, penggunaan kode css juga tidak terlalu banyak sehingga tidak akan mempengaruhi loading blog. Untuk demonya silahkan lihat tampilan teks berikut ini

Border Teks Hitam
Border Teks Merah
Border Teks Abu-abu

Cara Membuat & Memasang Border Pada Teks & Gambar
Salin kode css berikut ini kedalam template blog
.hitamputih {
font-family: Arial;
font-size:3em;
color:#000000;
text-align:center;
-webkit-text-fill-color:#ffffff;
-webkit-text-stroke:2px #000000;
}

Keterangan:
.hitamputih : tag class kode
color : merupakan warna teks
-webkit-text-fill-color : sebagai pengganti warna dasar teks
-webkit-text-stroke : sebagai warna border teks atau stroke

Perubahan warna border
Untuk mengganti warna border buatlah kode baru dengan tag class
atau id yang berbeda
Misalnya:
Warna border merah, maka kodenya adalah
.merah {
font-family: Arial;
font-size:3em;
color:#cb3737;
text-align:center;
-webkit-text-fill-color:#ffffff;
-webkit-text-stroke:2px #cb3737;
}

Selanjutnya salin kode html berikut ini kedalam teks artikel blog
<div class="hitamputih">Ganti Teks Disini</div>
Bagaimana mudah bukan untuk membuat border pada teks ini? Jika berminat untuk memasang dan membuat border ini, silahkan diterapkan kedalam blog Anda. Oh iya, untuk border pada gambar bisa dilakukan seperti biasanya yaitu menggunakan kode border yang terpasang template blog :) Terimakasih, semoga bermanfaat

Membuat & Memasang Border Pada Teks & Gambar Rating: 4.5 Diposkan Oleh: ana sriwahyuni

5 komentar:

  1. Cara sangat gampang ternyata...

    BalasHapus
    Balasan
    1. sangat mudah dan kodenya juga sedikit mas Zaini, terimakasih ya :)

      Hapus
  2. Udah dicoba mbak, jika dibuka pake crome bisa tp klo pake firefox kog gak bisa ya..

    BalasHapus
  3. Boleh di coba nih tutorial, makasih infonya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia