Warna merupakan utilitas utama didalam membuat sebuah desain web. Dengan menggunakan warna, web yang kita buat akan terlihat hidup dan akan tampil menarik dimata pengunjung.
Selain itu, dengan adanya tampilan warna didalam sebuah web, menjadikan web tersebut mempunyai ciri khas dan keunggulan tersendiri. Contohnya, Web yang sedang kalian kunjungi saat ini memiliki warna dasar biru. Warna biru ini diambil berdasarkan filosofi yang sesuai dengan karakter Penulis.. 😄.
. . .
Didalam Bootstrap sendiri, telah menyediakan berbagai macam warna. Warna-warna yang telah didefinisikan Bootstrap ini disebut sebagai warna emphasis atau sebagai warna yang diunggulkan.
Warna-warna emphasis yang telah didefinisikan Bootstrap meliputi:
- Primary
- Secondary
- Success
- Warning
- Danger
- Info
- Light
- Dark
Warna-warna diatas memiliki tampilan sebagai berikut.
Jika kita ingin membuat tampilan web dengan warna selain yang telah didefinisikan diatas, kita dapat meng-Customnya sendiri dengan properti CSS didalam attribut style.
Warna-warna diatas, dapat kita terapkan untuk tampilan teks, background halaman, button, header, navbar, link, dan masih banyak lagi penerapannya untuk komponen-komponen lainnya.
1. Text Color
Penerapan warna yang pertama yaitu untuk mendesain tampilan teks. Tujuan utama pemberian warna pada teks yaitu untuk memberikan identifikasi antara satu teks dengan teks yang lain.
Penulisan teks didalam sebuah artikel, tentunya memiliki maksud dan tujuannya sendiri-sendiri.
Misal, jika kita ingin menampilkan link dalam bentuk teks, maka kita harus memberikan warna khusus untuk membedakan antara teks link dengan teks biasa.
Atau jika kita ingin menambahkan catatan khusus bagi pembaca, maka catatan tersebut kita tampilkan dengan warna teks yang berbeda.
Hal ini bertujuan untuk menarik minat para pembaca, agar mau membaca apa yang sudah kita sampaikan dan juga dapat dengan mudah memahami isi konten tersebut.
Berikut perbedaan penulisan properti CSS dengan Bootstrap.
| Syntax CSS | Syntax Bootstrap |
|---|---|
color |
text- |
Berikut merupakan contoh penggunaannya didalam program.
< div class= "container">
< p class= "text-primary"> text-primary</ p>
< p class= "text-primary-emphasis"> text-primary-emphasis</ p>
< p class= "text-secondary"> text-secondary</ p>
< p class= "text-secondary-emphasis"> text-secondary-emphasis</ p>
< p class= "text-success"> text-success</ p>
< p class= "text-success-emphasis"> text-success-emphasis</ p>
< p class= "text-danger"> text-danger</ p>
< p class= "text-danger-emphasis"> text-danger-emphasis</ p>
< p class= "text-warning"> text-warning</ p>
< p class= "text-warning-emphasis"> text-warning-emphasis</ p>
< p class= "text-info"> text-info</ p>
< p class= "text-info-emphasis"> text-info-emphasis</ p>
< p class= "text-light"> text-light</ p>
< p class= "text-light-emphasis"> text-light-emphasis</ p>
< p class= "text-dark"> text-dark</ p>
< p class= "text-dark-emphasis"> text-dark-emphasis</ p>
</ div>
menghasilkan tampilan.
Pada Contoh diatas, teks dengan properti emphasis memiliki tampilan warna yang sedikit lebih pekat.
. . .
Opacity
Untuk membuat tampilan warna menjadi pudar, Bootstrap telah menyediakan properti sendiri yaitu Opacity.
Opacity text / tingkat kepudaran warna teks didalam Bootstrap, didefinisikan dalam 3 ukuran, yaitu: 75, 50, dan 25.
Semakin kecil ukurannya, maka semakin transparan / pudar pula warnanya.
| Syntax CSS | Syntax Bootstrap |
|---|---|
opacity: 50%; |
text-opacity-50 |
Berikut Penerapannya didalam program.
< div class= "container p-3 bg-dark">
< p class= "text-primary"> Normal Text.</ p>
< p class= "text-primary text-opacity-75"> Text primary with 75% opacity.</ p>
< p class= "text-primary text-opacity-50"> Text primary with 50% opacity.</ p>
< p class= "text-primary text-opacity-25"> Text primary with 25% opacity.</ p>
</ div>
Menghasilkan tampilan.
2. Background Color
Penerapan warna selanjutnya yaitu untuk membuat tampilan halaman atau background.
Pada umumnya, tampilan halaman pada suatu website sering menggunakan warna terang (light) atau warna gelap (dark). Hal ini dilakukan untuk menyesuaikan dari segi kenyamanan para pembaca.
| Syntax CSS | Syntax Bootstrap |
|---|---|
background-color |
bg- |
Berikut merupakan contoh penggunaannya didalam program.
< div class= "container">
< p class= "bg-primary p-3"> bg-primary</ p>
< p class= "bg-primary-subtle p-3 mb-2"> bg-primary-subtle</ p>
< p class= "bg-secondary p-3"> bg-secondary</ p>
< p class= "bg-secondary-subtle p-3 mb-2"> bg-secondary-subtle</ p>
< p class= "bg-success p-3 "> bg-success</ p>
< p class= "bg-success-subtle p-3 mb-2"> bg-success-subtle</ p>
< p class= "bg-danger p-3"> bg-danger</ p>
< p class= "bg-danger-subtle p-3 mb-2"> bg-danger-subtle</ p>
< p class= "bg-warning p-3"> bg-warning</ p>
< p class= "bg-warning-subtle p-3 mb-2"> bg-warning-subtle</ p>
< p class= "bg-info p-3 "> bg-info</ p>
< p class= "bg-info-subtle p-3 mb-2"> bg-info-subtle</ p>
< p class= "bg-light p-3 "> bg-light</ p>
< p class= "bg-light-subtle p-3 mb-2"> bg-light-subtle</ p>
< p class= "bg-dark p-3 "> bg-dark</ p>
< p class= "bg-dark-subtle p-3 mb-2"> bg-dark-subtle</ p>
< p class= "bg-transparent p-3"> bg-transparent</ p>
</ div>
menghasilkan tampilan.
Didalam Bootstrap, telah disediakan properti warna subtle.
Subtle merupakan warna dengan tampilan yang lebih terang dan tidak terlalu mencolok. Warna subtle ini, biasa digunakan sebagai latar belakang header, footer, atau button.
. . .
Kembali ke Tampilan Output diatas, terlihat bahwa background dengan latar gelap, teks yang berada didalamnya tidak dapat dibaca dengan jelas.
Solusinya, kita harus mengcustom sendiri warna teksnya seperti contoh dibawah ini.
< div class= "container">
< p class= "bg-dark text-light p-3 my-2"> Bootstrap Coloring</ p>
< p class= "bg-dark-subtle text-dark p-3 my-2"> Bootstrap Coloring</ p>
</ div>
Namun, ada cara lain agar warna teks tidak bertabrakan dengan warna background-nya. Yaitu dengan menggunakan metode Color contrast.
Perhatikan program berikut.
< div class= "container">
< p class= "text-bg-primary p-3"> Text Contrasing Color</ p>
< p class= "text-bg-secondary p-3"> Text Contrasing Color</ p>
< p class= "text-bg-success p-3 "> Text Contrasing Color</ p>
< p class= "text-bg-danger p-3"> Text Contrasing Color</ p>
< p class= "text-bg-warning p-3"> Text Contrasing Color</ p>
< p class= "text-bg-info p-3 "> Text Contrasing Color</ p>
< p class= "text-bg-light p-3 "> Text Contrasing Color</ p>
< p class= "text-bg-dark p-3 "> Text Contrasing Color</ p>
</ div>
Properti yang kita inputkan yaitu text-bg-[color].
Menghasilkan tampilan.
Secara otomatis warna teks akan berkontras dengan warna backgound-nya.
Gradient Color
Gradien warna adalah transisi halus dari suatu warna ke warna lain. Tampilan dari warna gradien ini seolah-olah memberikan gambaran ilusi atau suatu gerakan.
Didalam Bootstrap, gradien warna terbentuk secara vertikal atau warna tersebut mengalir dari atas kebawah.
Berikut merupakan contoh penggunaannya didalam program.
< div class= "container">
< p class= "bg-primary bg-gradient p-3"> bg primary gradient</ p>
< p class= "bg-secondary bg-gradient p-3"> bg secondary gradient</ p>
< p class= "bg-success bg-gradient p-3 "> bg success gradient</ p>
< p class= "bg-danger bg-gradient p-3"> bg danger gradient</ p>
< p class= "bg-warning bg-gradient p-3"> bg warning gradient</ p>
< p class= "bg-info bg-gradient p-3 "> bg info gradient</ p>
< p class= "bg-light bg-gradient p-3 "> bg light gradient</ p>
< p class= "bg-dark bg-gradient p-3 "> bg dark gradient</ p>
< p class= "bg-black text-light bg-gradient p-3 "> bg black gradient</ p>
</ div>
Menghasilkan tampilan.
Jika kita perhatikan dengan cermat, gradasi warna pada bagian atas terlihat lebih terang dari pada warna bagian bawah.
Atau.. jika ingin membuat tampilan background dengan desain yang yang lain, kita dapat menggunakan properti transparansi / opacity.
Didalam Bootstrap sendiri, opacity background didefinisikan dalam 5 ukuran, yaitu: default, 75, 50, 25, dan 10.
Berikut merupakan contoh penggunaannya didalam program.
< div class= "container">
< p class= "bg-primary p-3"> bg primary default.</ p>
< p class= "bg-primary bg-opacity-75 p-3"> bg primary with 75% opacity.</ p>
< p class= "bg-primary bg-opacity-50 p-3"> bg primary with 50% opacity.</ p>
< p class= "bg-primary bg-opacity-25 p-3"> bg primary with 25% opacity.</ p>
< p class= "bg-primary bg-opacity-10 p-3 text-dark"> bg primary with 10% opacity.</ p>
</ div>
Menghasilkan tampilan.
3. Link Color
Penerapan warna yang ketiga yaitu untuk mendesain tampilan link.
Ada berbagai macam wujud link yang sudah sering kita temui, mulai dari link dalam bentuk teks, button, maupun gambar.
Pada materi kali ini kita akan membahas tentang penerapan warna untuk mendesain link teks.
Pemberian warna pada link teks bertujuan untuk membedakan antara teks biasa dengan teks link, dan juga memberitahu bahwa teks link tersebut memuat suatu informasi yang ingin disampaikan kepada para pembaca.
Berikut Merupakan contoh penerapan Color link didalam Bootstrap.
< div class= "container">
< a href= "#" class= "link-primary"> Primary Link</ a>
< a href= "#" class= "link-secondary"> Secondary Link</ a>
< a href= "#" class= "link-success"> Success Link</ a>
< a href= "#" class= "link-danger"> Danger Link</ a>
< a href= "#" class= "link-warning text-decoration-none"> Warning Link</ a>
< a href= "#" class= "link-info text-decoration-none"> Info Link</ a>
< a href= "#" class= "link-light text-decoration-none bg-secondary"> Light Link</ a>
< a href= "#" class= "link-dark text-decoration-none"> Dark Link</ a>
</ div>
menghasilkan tampilan.
Itulah tadi Sedikit penjelasan mengenai macam-macam warna beserta penerapannya didalam Bootstrap. Untuk materi selanjutnya kalian akan mempelajari tentang Table. Jika masih bingung dan ada sesuatu yang ingin disampaikan, Tulis dikolom komentar.
Post a Comment
Post a Comment