Published: 5/30/2018 05:17:00 AM
Seperti yang sudah dijanjikan pada artikel Cara Membuat Border di Blogger (bagian 5), maka di artikel ini kita akan belajar bersama memasukkan unsur Warna pada Border yang akan kita buat.
Ada Tiga bagian Border yang dapat kita ubah Warnanya, yaitu Warna Garis Border, Warna Latar Border dan Warna Teks di dalam Border.
Agar mempermudah mengubah Warna-warna bagian Border, maka sebaiknya kita tahu Kode HTML Warna, untuk itu kita bisa melihat kode-kode HTML Warna yang ada di artikel :
Berikut ini penjelasan bagaimana cara kita mengubah Warna pada Border. Sebagai awal kita kembali pada penulisan Kode HTML untuk Border yang sederhana, yaitu :
Hasilnya :
Sekarang kita ganti Warna latar Border dengan Kode Warna #0FF dan Warna Garis Border dengan Kode Warna #3C6. Contoh penulisan Kode HTML-nya :
Hasilnya :
Penulisan Kode HTML Border di atas adalah contoh yang menggunakan Kode Warna dengan 3 karakter (#0FF dan #3C6), kita bisa juga menuliskan Kode Warnanya dengan 6 karakter. Berikut contoh lainnya :
Hasilnya :
Selain dengan Kombinasi Huruf dan Angka, penulisan Kode Warna bisa juga dengan cara mengetik langsung nama Warna-nya, sebagai contoh :
Hasilnya :
Sekarang kita coba membuat Border dengan Warna Garis yang berbeda pada sisi-sisinya, contoh penulisan Kode HTML-nya :
Pada penulisan border-color: #FF0000 #0000FF, urutan Pertama (#FF0000) menunjukkan Garis Border sisi Atas dan Bawah, sedangkan urutan Kedua (#0000FF) menunjukkan Garis Border sisi Kiri dan Kanan.
Hasilnya :
Berikut ini contoh penulisan Kode HTML Border dengan kombinasi Tiga Warna yang berbeda pada tiap sisinya :
Pada penulisan border-color: #FF0000 #0000FF #008000 :
Kode Warna #FF0000 di Urutan Pertama menunjukkan Garis Border untuk Sisi Atas,
Kode Warna #0000FF di Urutan Kedua menunjukkan Garis Border untuk Sisi Kiri dan Kanan,
Kode Warna #008000 di Urutan Ketiga menunjukkan Garis Border untuk Sisi Bawah.
Hasilnya :
Berikutnya adalah penulisan Kode HTML Border dengan kombinasi Empat Warna sekaligus, yang berbeda di tiap sisi, contohnya :
Pada penulisan border-color: #FF0000 #0000FF #008000 #FFFF00:
Kode Warna #FF0000 di Urutan Pertama menunjukkan Garis Border untuk Sisi Atas,
Kode Warna #0000FF di Urutan Kedua menunjukkan Garis Border untuk Sisi Kanan,
Kode Warna #008000 di Urutan Ketiga menunjukkan Garis Border untuk Sisi Bawah,
Kode Warna #FFFF00 di Urutan Keempat menunjukkan Garis Border untuk Sisi Kiri,
Agar mempermudah mengubah Warna-warna bagian Border, maka sebaiknya kita tahu Kode HTML Warna, untuk itu kita bisa melihat kode-kode HTML Warna yang ada di artikel :
Berikut ini penjelasan bagaimana cara kita mengubah Warna pada Border. Sebagai awal kita kembali pada penulisan Kode HTML untuk Border yang sederhana, yaitu :
<div style="border-width: 10px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Sekarang kita ganti Warna latar Border dengan Kode Warna #0FF dan Warna Garis Border dengan Kode Warna #3C6. Contoh penulisan Kode HTML-nya :
<div style="border-width: 10px; border-style: solid; border-color: #3C6; background-color: #0FF; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Penulisan Kode HTML Border di atas adalah contoh yang menggunakan Kode Warna dengan 3 karakter (#0FF dan #3C6), kita bisa juga menuliskan Kode Warnanya dengan 6 karakter. Berikut contoh lainnya :
<div style="border-width: 10px; border-style: double; border-color: #CC3333; background-color: #CC66FF; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Selain dengan Kombinasi Huruf dan Angka, penulisan Kode Warna bisa juga dengan cara mengetik langsung nama Warna-nya, sebagai contoh :
<div style="border-width: 10px; border-style: outset; border-color: YellowGreen; background-color: PaleGreen; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Sekarang kita coba membuat Border dengan Warna Garis yang berbeda pada sisi-sisinya, contoh penulisan Kode HTML-nya :
<div style="border-width: 10px; border-style: dashed; border-color: #FF0000 #0000FF; background-color: #FFDEAD; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Pada penulisan border-color: #FF0000 #0000FF, urutan Pertama (#FF0000) menunjukkan Garis Border sisi Atas dan Bawah, sedangkan urutan Kedua (#0000FF) menunjukkan Garis Border sisi Kiri dan Kanan.
Hasilnya :
Teks yang ingin ditampilkan
Berikut ini contoh penulisan Kode HTML Border dengan kombinasi Tiga Warna yang berbeda pada tiap sisinya :
<div style="border-width: 10px; border-style: dotted; border-color: #FF0000 #0000FF #008000; background-color: #F0FFF0; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Pada penulisan border-color: #FF0000 #0000FF #008000 :
Kode Warna #FF0000 di Urutan Pertama menunjukkan Garis Border untuk Sisi Atas,
Kode Warna #0000FF di Urutan Kedua menunjukkan Garis Border untuk Sisi Kiri dan Kanan,
Kode Warna #008000 di Urutan Ketiga menunjukkan Garis Border untuk Sisi Bawah.
Hasilnya :
Teks yang ingin ditampilkan
Berikutnya adalah penulisan Kode HTML Border dengan kombinasi Empat Warna sekaligus, yang berbeda di tiap sisi, contohnya :
<div style="border-width: 10px; border-style: ridge; border-color: #FF0000 #0000FF #008000 #FFFF00; background-color: #F0FFF0; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Pada penulisan border-color: #FF0000 #0000FF #008000 #FFFF00:
Kode Warna #FF0000 di Urutan Pertama menunjukkan Garis Border untuk Sisi Atas,
Kode Warna #0000FF di Urutan Kedua menunjukkan Garis Border untuk Sisi Kanan,
Kode Warna #008000 di Urutan Ketiga menunjukkan Garis Border untuk Sisi Bawah,
Kode Warna #FFFF00 di Urutan Keempat menunjukkan Garis Border untuk Sisi Kiri,
Hasilnya :
Teks yang ingin ditampilkan
Penulisan Kode HTML untuk Warna Garis juga dapat kita lakukan hanya pada satu sisi saja, mengikuti type Border, berikut ini contoh-contohnya :
Penulisan Kode HTML untuk Type Border dan Warna di sisi Kiri saja :
<div style="background-color: #DB7093; border-left: 15px groove #C71585; padding: 10px; text-align: left;">Garis Border hanya ada di sisi Kiri</div>
Hasilnya :
Garis Border hanya ada di sisi Kiri
Penulisan Kode HTML untuk Type Border dan Warna di sisi Atas saja :
<div style="background-color: #6495ED; border-top: 6px dashed #0000CD; padding: 10px; text-align: center;">Garis Border hanya ada di sisi Atas</div>
Hasilnya :
Garis Border hanya ada di sisi Atas
Penulisan Kode HTML untuk Type Border dan Warna di sisi Kanan saja :
<div style="background-color: #ADFF2F; border-right: 15px ridge #00FF00; padding: 10px; text-align: right;">Garis Border hanya ada di sisi Kanan</div>
Hasilnya :
Garis Border hanya ada di sisi Kanan
Penulisan Kode HTML untuk Type Border dan Warna di sisi Bawah saja :
<div style="background-color: #00FFFF; border-bottom: 8px double #4169E1; padding: 10px; text-align: center;">Garis Border hanya ada di sisi Bawah</div>
Hasilnya :
Garis Border hanya ada di sisi Bawah
Kita juga bisa memanipulasi tampilan Border dengan menyamakan Warna Latar dengan Warna Garis Border, contohnya berikut ini :
<div style="border-width: 10px; border-style: groove; border-color: #FF8C00; background-color: #FF8C00; padding: 10px; text-align: center;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Demikianlah pembahasan tentang bagaimana cara mengubah Warna Latar dan Warna Garis Border, masih terkait dengan Warna, pada artikel berikutnya : Cara Membuat Border di Bloger (bagian 7), kita akan coba membuat Warna Latar Border dengan efek Gradasi.
Semoga artikel ini bisa memberikan manfaat.
Semoga artikel ini bisa memberikan manfaat.
0 Comments