Membuat Teks Dalam Kotak Transparan Menggunakan CSS

teks dengan kotak transparan
teks dengan kotak transparan

Menampilkan kesan artistik dengan membuat teks di dalam kotak transparan.

Satu gambar bermakna sejuta kata“,  mungkin berlaku untuk lukisan atau karya seni lain, tetapi tidak berlaku di dunia desain web saat ini. Berbagai banner gambar yang kita lihat sehari-hari hampir tidak pernah lupa menyisipkan teks atau kata-kata. Contohnya seperti pada gambar di atas.

Misalnya anda memiliki gambar seperti di bawah ini:

contoh-gambar

Bagaimana cara menambahkan teks di dalam kotak transparan pada gambar tersebut? Mudah, terutama jika anda dapat menggunakan aplikasi pengolah gambar seperti Photoshop. Anda cukup menuliskan teks pada gambar dan memberi efek kotak transparan. Tetapi kalau di kemudian hari teks perlu diubah, maka anda harus mengedit gambar tersebut.

Terdapat cara lain yang lebih fleksibel jika teks berubah, yaitu dengan menggunakan HTML dan CSS (Cascading Style Sheets). Kita akan mulai dari cara yang paling sederhana, yaitu teks tanpa kotak transparan, lalu dimodifikasi dengan menambahkan kotak transparan.

Teks dengan background  gambar

CSS memungkinkan kita menggunakan gambar sebagai background pada teks yang kita tuliskan. Contoh kode HTML-nya seperti di bawah ini.

Perhatikan pada <div style=”background-image….. dan seterusnya. Atribut style digunakan untuk mengetikkan CSS secara inline. Cara yang sebenarnya lebih disarankan adalah menggunakan external style sheet yang artinya memisahkan CSS ke file dengan ekstensi .css. Inline style digunakan pada contoh ini demi kepraktisan. Kode di atas akan menghasilkan tampilan seperti di bawah ini.

teks dengan background gambar
teks dengan background gambar


Teks di dalam kotak transparan

Agar tampilan lebih menarik, kita akan menambahkan kotak transparan di dalam teks. Kita hanya perlu menambahkan sedikit pada kode HTML yang tadi, menjadi:

Penambahan ada di baris 3 dan 12. Yaitu menambahkan tag div di dalam blok teks. Tag div ini berfungsi memberikan kotak transparan dengan perintah background: rgba(0, 0, 0, 0.2). Parameter pertama sampai ketiga menunjukkan nilai RGB (Reed, Green, Blue) yang berkisar dari 0 – 255, sedangkan parameter keempat menunjukkan nilai transparansi yang berkisar dari 0 – 1. Hasil akhirnya adalah sebagai berikut.

contoh-gambar-3

(Visited 1,878 times, 7 visits today)

Leave a Reply