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

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