Blogger, CSS, Tutorial, WordPress

Cara Membuat Background Color Selebar Tulisan dengan CSS

Adalah ketika perlu menyorot satu baris teks untuk membuatnya lebih menonjol, saya menemukan kode sederhana dengan CSS tentang bagaimana cara membuat background color selebar teks dalam satu baris. Ini lebih merupakan masalah selera daripada sebuah keharusan, karena orang bisa cukup mengatur warna latar belakang dengan lebar yang sama dari wadah teksnya.

Selera desain adalah salah satu pembeda yang paling terlihat pada blog, meskipun tanpa konten berkualitas temtu tidak akan banyak membantu pemilik blog untuk menarik pengunjung. Namun, jika biayanya tidak mahal, biasanya selalu baik untuk melakukan perbaikan terus-menerus pada desain blog, betapapun kecilnya.

Biaya yang tidak boleh dikeluarkan pemilik blog terkait dengan desain blog adalah jika itu akan mengorbankan kecepatan loading halaman secara agak signifikan. Kecepatan adalah salah satu faktor penting yang harus selalu diingat setiap kali memiliki godaan untuk membuat perubahan pada pengaturan blog saat ini.

CSS Bagaimana Cara Membuat Background Color Selebar Tulisan

Cara paling sederhana untuk menyorot frasa kalimat memakai CSS adalah hanya dengan menggunakan kode background-color seperti,

CSS:
.hightlight{background-color:#555;color:#fff;padding:5px}

HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>

Bagaimana Cara Membuat Background Color

Tapi, seperti terlihat di atas, warna latar mengisi lebar seluruh baris.

Ada beberapa cara ketika menggunakan CSS untuk mengatur warna latar belakang menjadi lebar teks yang sama, bukan seluruh panjang baris. Yang paling sederhana adalah menggunakan <span> alih-alih <div> seperti,

CSS:
.hightlight{background-color:#777;color:#fff;padding:5px}

HTML:
<span class="highlight">Bagaimana Cara Membuat Background Color</span>

Bagaimana Cara Membuat Background Color

Pilihan lain adalah memakai, display: table;

CSS:
h1{display:table;background-color:#999;color:#fff;padding:10px;font-size:1em}

HTML:
<h1>Bagaimana Cara Membuat Background Color</h1>

Bagaimana Cara Membuat Background Color


Pilihan berikutnya adalah menggunakan display: inline-flex;

CSS:
.hightlight{display:inline-flex;background-color:#222;color:#fff;padding:7px;font-size:1.2em}

HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>

Bagaimana Cara Membuat Background Color



Ada beberapa cara lain untuk mengatur background color untuk membuatnya selebar teks, namun sebagian besar bisa dikatakan agak kurang praktis. Namun, silahkan melihatnya sendiri di sini.


Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Mei 20, 2020.