Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Sebuah template pada dasarnya akan terlihat begitu indah dengan tampilan yang tidak hanya polos semata, maka banyak dari Template yang ada selalu menggunakan warna dalam menghiasi tampilannya.

Mulanya warna diproyeksikan sebagai pelengkap semata, namun lambat laun warna digunakan sebagai indentitas yang mempengaruhi Template secara keseluruhan. Sebagai contoh kita mengenal Facebook dengan tampilan kombinasi warna putih dan biru, dan semua orang pasti mengetahui akan hal ini.

Twitter bisa kita bilang sangat identik dengan warna biru langitnya, dan semua orang tentu mengetahui hal itu. Tentu saja warna adalah identitas dari sebuah template yang menaungi sebuah website atau blog. Terlepas dari itu semua, unsur gambar adalah hal yang paling utama ditentukan oleh designer template, namun warna adalah hal paling pentingnya.

Untuk lebih memudahkannya k'ian berikan sebuah widget mengenai aneka warna berserta kodenya.


Dari contoh widget diatas kita bisa sangat mudah dalam menentukan beberapa warna yang ingin kita gunakan, sebagai contoh apabila ingin menggunakan sebuah warna merah - cukup klik kotak yang berwarna merah dan lihat kode yang muncul.

Cara penggunaan kode warna
Penggunaan kode warna hampir tidak ada yang berbeda (karena kode ini masuk dalam style kode CSS) sehingga bisa digunakan sebagai background ataupun style color. Mungkin agak sedikit bingung dengan penjelasan k'ian ini, tapi intinya unsur warna yang ada dalam sebuah template itu menaungin "Background/Latar Belakang" dan "Font/Tulisan". Namun perkembang yang terjadi saat ini juga digunakan border, sehingga penggunaan perintah dari kode inilah yang memiliki perbedaan.

Berikut cara penggunaannya,
1. Pada style Background
Untuk kode CSS yang lazim digunakan diluar kode utamanya semisal #body atau #wrapper ( untuk teman-teman yang menggunakan blogpot sudah mengenal kedua kode induk diatas.)
sebagai contoh
#body{background:#000000; padding:5px; margin:5px; text-align:center;}
Dari kode diatas kode yang k'ian gunakan adalah "background:#000000;" yang berarti warna backgroundnya adalah warna hitam (kamu bisa melihat kode warna dari tabel diatas) sehingga akan muncul tampilan sebagai berikut :
Contoh 1
2. Pada style Font
Kita bisa memainkan kode warna seperti pada penjelasan style background diatas hanya saja kode perintahnya yang berbeda. dalam hal ini kita menggunakan kode CSS dan perintah HTML nya. sama seperti contoh kode CSS Background diatas :
#body{background:#000000; color:#fff; padding:5px; margin:5px; text-align:center;}
Terlihat contoh diatas kode warna tulisan yang muncul adalah color:#fff; untuk warna putih (kamu bisa melihat kode warna dari tabel diatas), kamu tentunya bisa merubah warna dengan keinginan kamu.
Dari contoh diatas kita akan lihat hasilnya
Contoh warna font berwarna putih dengan background berwarna hitam, pola warna untuk tulisan bisa kamu ubah sesuai dengan keinginan kamu.
Dari beberapa penjelasan diatas k'ian berharap ini bisa menjadi bahan contoh yang baik buat sobat sekalian.

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

1 Response to "Pengenalan warna serta deskripsi cara penggunaannya pada kode CSS"

  1. Beben Said,

    saya tiao kali nemuin tools warna, pasti ada yg beda...makana saya sikat toolsna...sssttt...hihihihi :D ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |