Webmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - Logo
  • Home
  • บทความฟรี
    • บทความทั้งหมด
    • บทความแนะนำ
    • WordPress
      • การติดตั้ง / การใช้งาน
      • WordPress Plugins
    • SEO
    • Tips & Trick
    • Free Tools
    • Inspiration
    • My Experience
  • คอร์สเรียน
    • Basic WordPress (เรียนสด)
  • เกี่ยวกับผู้สอน
  • ติดต่อผู้สอน

อยากรู้ว่าสีแบบนี้ใช้โค๊ดอะไร ใช้ตัวดูดสี ColorZilla ดูสิ

Published by Yui Kanchita
Categories
  • Tips & Trick
Tags
  • add-ons
  • browser
  • code
  • color
  • CSS
  • HTML
  • tool
colorzilla-featured
  • Facebook
  • Twitter
  • Line

ColorZilla เป็น Add-ons ใน Firefox และ Chrome ตัวนี้ช่วยดูดสีตามหน้าเว็บที่เราชอบแล้ว copy โค๊ดสีออกมาได้เลย สะดวกมากสำหรับการออกแบบเว็บไซต์ และ banner ต่างๆ หรือเอาไปใส่ใน Inspect Element สำหรับ preview การเปลี่ยนสี font สี background และสีของ object อื่นๆ ได้สบายมาก

  • อ่านบทความ ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ

อยากรู้ว่ามันเจ๋งยังไง เรามาลองติดตั้งและใช้งานกันดู (บทความนี้ใช้ Firefox)

1. ที่ Firefox เปิด Add-ons Manager ขึ้นมา

colorzilla-02

 

2. ที่แท็บ Get Add-ons ให้พิมพ์คำว่า colorzilla ในช่อง search แล้วกด Enter จากนั้นเลือก Install ColorZilla

colorzilla-08


3. เสร็จแล้วมันจะมาอยู่ที่แท็บ Extensions เราต้อง restart browser ก่อนจึงจะใช้งานได้ โดยปิด Firefox แล้วเปิดใหม่

colorzilla-03

 

4. ทีนี้ก็พร้อมใช้งานแล้ว

colorzilla-04

 

5. กดรูป dropper แล้วเลือกบริเวณสีที่เราต้องการ

colorzilla-05

 

6. คลิก 1 ครั้ง ก็จะได้สีที่เราต้องการพร้อมกับ copy โค๊ดให้เรียบร้อย
นำไป paste หรือ Ctrl+V ได้เลย ตามตัวอย่างนี้ได้โค๊ด #26A9E1

colorzilla-06

 

colorzilla-07

 

 

 

นอกจากความสามารถในการดูดสีแล้ว ColorZilla ยังมีความสามารถอื่นอีก
ให้คลิกขวาที่ข้าง dropper ออกมาแล้วลองเล่นกันดู
น่าจะถูกใจพวกเราชาว web design นะคะ

 

 

 

 

 

 

บทความ/รูปภาพ : Webmonster Lab | Yui K Artist

 

SME Webinar แหล่งความรู้ชั้นดีและฟรี ที่อยากแนะนำ
ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ
  • Facebook
  • Twitter
  • Line
Yui Kanchita
Yui Kanchita
พี่ยุ้ยเป็นคนทำเว็บที่สนุกกับการใช้ชีวิต inspire อยู่กับศิลปะการใช้กลยุทธ์เว็บไซต์ 18 ปี "หลงรักงานสอน" ชอบอ่านหนังสือ ถ่ายรูปเล่น กินบุฟเฟ่ต์ และก็ชอบขับรถเที่ยวต่างจังหวัดคนเดียว มันชิลดีนะ : )

Related posts

content-is-king-bill-gates
April 6, 2015

“Content is King” นี่จริงไหมนะ


Read more
how-to-fixed-evernote00-featured
November 2, 2014

วิธีแก้ปัญหา Evernote Desktop Sync ไม่ได้


Read more
webmonsterlab-speedtest
August 22, 2014

มาทดสอบ Speed ของเว็บเราด้วย Pingdom Tools กันเถอะ


Read more

ค้นหาบทความ

Webmonster Lab

blog แชร์ความรู้เว็บมาสเตอร์ การทำเว็บไซต์ด้วย WordPress ที่ไม่มีสอนในโรงเรียน
เขียนจากประสบการณ์ทำงาน 18 ปี ในสายงาน Web Design & Development, WordPress, SEO, E-Commerce, Digital Marketing

คอร์สเรียนทำเว็บไซต์ “Basic WordPress”

สอนผู้เริ่มต้น สร้างเว็บไซต์ธุรกิจ
ด้วย WordPress + Elementor
(ไม่ต้องเขียนโค้ด)

เรียนตัวต่อตัว/กลุ่มส่วนตัว
รายละเอียดคอร์ส
** ให้สิทธิ์ผู้ที่จองก่อน **
ได้เลือกวันเรียนก่อนจร้าาา : )

บทความล่าสุด

  • ทำไมเว็บไซต์จึงต้องการ Webmaster
    ทำไมเว็บไซต์จึงต้องการ Webmaster
    August 14, 2020
  • ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    January 13, 2020
  • ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที
    ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที
    December 10, 2018
  • SEO ไม่ใช่ The King ของการทำเว็บไซต์
    SEO vs. User ใครคือ The King ของการทำเว็บไซต์
    March 20, 2016
  • แจก Free – 2016 Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
    แจก Free – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
    February 22, 2016

บทความแนะนำ

  • howto-fix-install-wordpress-on-xampp-featured
    ปัญหาการติดตั้ง WordPress บน localhost (XAMPP)
    July 13, 2014
  • วิธีการติดตั้ง WordPress บน localhost (XAMPP)
    วิธีการติดตั้ง WordPress บน localhost (XAMPP) สอนละเอียดยิบ
    June 27, 2014
  • wp-ecommerce-plugin-all
    WordPress E-Commerce Plugins ตัวไหนชนะเลิศ
    June 5, 2014
  • wordpress-updates
    คุณก็อัพเดท WordPress ได้ด้วยตัวเอง
    April 2, 2014

Tags

add-ons browser code color content CSS design Digital Marketing font free Google How To HTML image install WordPress life localhost MS-Office plugins SEO SME social theme tool tools twitter update User/UX/UI Webmaster website wireframe WooCommerce WordPress work-life xampp ความรู้ ธุรกิจ รูปภาพ แก้ปัญหา
© Webmonster Lab. All rights reserved.
บทความในบล็อกนี้ ยุ้ยเขียนและจัดทำขึ้นเองทั้งหมดค่ะ อนุญาตให้เผยแพร่เนื้อหาบทความและนำไฟล์ที่แจกไปใช้ได้ฟรี เพื่อการแบ่งปันสิ่งดีๆ :)
โดยขอให้ท่านอ้างอิงแหล่งที่มา
link กลับมาหน้าเว็บที่ท่านนำไปใช้ด้วยทุกครั้งนะจร๊ะ
❤︎

Webmonster Lab

085-615-9244 (ยุ้ย)

เวลาทำการ
จันทร์-ศุกร์ 10:00-18:00 น.

ออฟฟิศ/ห้องเรียน
คลิคเอ็กซ์ สามย่าน (KliqueX Samyan)
co-working space ชั้น 3 แอมพาร์ค จุฬา

© 2021 Webmonster Lab. All Rights Reserved.
Created with ❤︎ Kanchita Varitthinanon
นโยบายข้อมูลส่วนบุคคล
เราขอเก็บข้อมูลการใช้งานเว็บไซต์ของคุณด้วย cookies นำมาวิเคราะห์และพัฒนา เพื่อให้คุณได้รับประสบการณ์การใช้งานได้ดียิ่งขึ้น

หากคุณเลือกไม่ยอมรับ ข้อมูลการใช้เว็บไซต์ของคุณจะไม่ถูกจัดเก็บ อ่าน นโยบายข้อมูลส่วนบุคคล
ยอมรับไม่ยอมรับ