Warna memang suatu hal yang wajib di sebuah website, tentunya bukan hanya website menurut saya, warna suatu hal yang wajib buat dimana, tentunya dengan warna object akan terlihat menarik dan bisa membuat sebagian orang jadi senang, disini ketika kita menggunakan warna di dalam website kita harus memasukan kodenya, seperti halnya judul artikel saya hari ini, yaitu dengan cara memasukan kode RGBA, oke apa itu RGBA dan bagaimana cara membuat RGBA Generator dengan VueJS, simak terus ya.
Selain menggunakan RGBA kita juga bisa menuliskan langsung warna dengan bahasa inggris di CSS nya, seperti “red”, “green”, “blue” misalnya, tentunya teman-teman tau ya cara menampilkannya dengan menggunakan background: “value_warna” or color: “value_warna” seperti itu, dan cara membuat RGBA Generator dengan VueJS, apakah teman-teman tau apa itu RGBA singkatan dari apa, ya betul R itu “red”, G itu “green” dan B itu “blue” seperti dan A itu adalah opacity dari warna tersebut. jadi kode dari red, green dan blue akan di gabungkan jadi membuat warna yang kaku dan berbeda. itu lah keuntungan ketika kita menggunakan warna RGBA.
caranya disini adalah:
- saya akan membuat sebuah templatenya di component,
- di sini saya membuat sebuah input type range dengan min-max 0-255 dengan v-model sesuai data yang kita setting nanntinya,
- dan disini saya membutuhkan computed untuk menampung hasil inputan dimana hasil itu akan kita masukan ke dalam sebuah background box yang sudah saya sediakan.
oke langsung saja silahkan teman-teman coba sendiri seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cara Membuat RGBA Generator dengan VueJS</title> <style type="text/css"> .box{width: 300px; height: 200px; border: 1px solid #666; float: left; margin-right : 20px;} .container{ width: 800px; margin:auto; margin-top: 20px } </style> </head> <body> <div id="app"> <colorgenerator></colorgenerator> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> Vue.component('colorgenerator',{ template: ` <div class="container"> <h1>Cara Membuat RGBA Generator dengan VueJS </h1> <div class="box" :style="{background: background}"> </div> <div class="auturan"> <div> <input type="range" min="0" max="255" v-model="red"> <input type='text' v-model='red' /> </div> <div> <input type="range" min="0" max="255" v-model="green"> <input type='text' v-model='green' /> </div> <div> <input type="range" min="0" max="255" v-model="blue"> <input type='text'v-model='blue' /> </div> <div> <input type="range" min="0" max="1" step="0.1" v-model="opaci"> <input type='text'v-model='opaci' /> </div> </div> <hr> <div> {{background}} </div> </div> `, data(){ return{ red: 0, green: 0, blue:0, opaci:1 } }, computed:{ background(){ return this.background = "RGBA("+this.red +", "+this.green + ", "+ this.blue + ", " + this.opaci + ")" } } }) new Vue({ el: "#app" }) </script> </body> </html> |
silahkan copy dan paste di lembar kerja teman-teman dan lihat apakah hasil sesuai dengan kepunyaan saya:
dan seperti inilah demo yang saya punya demo :
bagaimana sangat menarik bukan, oke saya rasa cukup sampai disini dulu belajar kita tengan cara membuat RGBA Generator dengan VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.