Langsung ke konten utama

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

  


warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan

Salam sobat semua

Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi

dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau

html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites

ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian baca tutorial sebelumnya tentang adobe photshop disini.


kalau bagi yang sudah ada adobe photoshopnya yuk langsung saja cekidot bagaimana caranya. dan apa kelebihannya memakai cara ala saya dengan adobe phtoshop ini

hehehehehe.


1. buka aplikasi adobe phtoshopnya kawan

2. kemudian klik pada sebelah kiri bawah yang namanya set foreground color seperti pada gambar berikut


3. maka akan muncul seperti tampilan berikut setelah di klik

4. nah ketika sudh tampil seperti diatas maka kursor kita arahkan kepada warna yang akan kita ambil nilai hexnya dan kemudian kita klik, dan setelah di klik maka akan
tampil nilai hexnya pada isian dengan tanda # di sebalah bawah seperti tampak pada gambar

5. nah nilai itulah yang akan kita copy dan kita paste pada nilai atau value di properti atau atrribut color sehingga akan menghasilkan seperti berikut
color:#eb15d9;

6. nah untuk kelebihannya kita memakai photoshop adalah ketika kita tidak tahu nama warnanya kawan tapi kita tahu dan sudah melihat warna tersebut di sinilah

letak kelebihan tersebut sehingga bagaimana kita bisa mendapatkan nilai warna tersebut dengan photoshop.

 7. semisal kita ingin warna biru seperti tombol login pada https://facebook.com/, maka kita buka dulu tuh https://facebook.com/ nya seperti pada gambar


8. setelah terbuka tekan tombol ctrl+print Scrn(Print screen), pada sebagian perangkat atau laptop ada juga yang memakai tombol Fn+Print Scrn(print screen), kemudian
buat file new atau ctrl+n pada photoshop kemudian paste pada file new tersebut atau ctrl+v seperti tampak pada gambar.




9. kemudian klik set foreground color lagi, dan ketika sudah muncul window atau jendela color picker, maka arahkan kursor kita pada warna yang akan kita ambil, seperti
contoh warna biru pada tombol login facebook. seperti tampak pada gambar.


10. maka nilai hex warna tersebut akan di peroleh seperti berikut
color:#1877f2;

nah seperti itulah menurut versi saya untuk mengambil suatu nilai hex warna pada css atau HTML, dan untuk tulisan kali ini cukup sekian dulu. mudah mudahan bisa 

bermanfaat buat kita semua khususnya buat saya

kita lnjut di next tutorila kawan.


salam sobat semua

#css #picker #warna #hex #photoshop #html #web #websites #website #free #share #berbagi #gratis 



Komentar

Postingan populer dari blog ini

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...