CSS PEEPER

CSS PEEPER

CSS PEEPER เป็น Chrome extension ตัวนึง ที่ช่วยให้เราเช็ค style ให้เหมือนกับ design ได้เร็วมากขึ้น
ที่มา : https://csspeeper.com/

ทำอะไรได้บ้าง

  1. แสดงข้อมูลพื้นฐาน ของเว็บเราได้ เช่น ขนาดของไฟล์ css, เวลาที่ใช้ในการโหลดไฟล์, ชนิดของ font ที่ใช้ใน header และใน body แล้วก็ยังบอกสี Background ของ body ด้วย
  2. สามารถ export ไฟล์รูปที่ใช้ในหน้าเว็บเราได้ โดย export ในรูปแบบ zip ไฟล์ นอกจากนั้นก็ยังแสดงรายละเอียดความ กว้าง และสูงของรูปในเว็บด้วย
  3. แสดง pallete สีที่เราใช้ในเว็บได้ (มันจะแสดงเฉพาะ สีที่อยู่ใน element html ไม่รวมถึงรูปภาพนะ)
  4. แสดงชื่อคลาสที่เราใช้ ถ้าไม่มีชื่อคลาสก็จะแสดงเป็นชนิดของ element
  5. เวลาคลิกที่ element ก็จะแสดงรายละเอียดของ element นั้นๆ ได้แก่ width / height / max-width / padding- Typography
    font-family / font-size / font-weight / line-height / text-align /     letter-spacing / words-spazing / color / background-color / box shadow / border-radius
    **เวลาเรา hover ก็จะแสดงข้อมูลสีที่เปลี่ยน และ effect ที่เปลี่ยนด้วย
  6. สามารถใช้ใน local site ได้ด้วย

CSS PEEPER (Chrome extension)
Reference : https://csspeeper.com/

  1. CSS information
    – CSS file, Load time
    – Heading & body typography
    – Body background color
  2. Can export assets  from website as a ZIP pack.
    – can access asset details (width / height)
  3. Can see all colors in website that use html
  4. Show class name of the element.
  5. Can access to the useful styles
    – Element size
    width / height / max-width / padding- Typography
    font-family / font-size / font-weight / line-height / text-align /     letter-spacing / words-spazing- Colors

– BG Color w/ opacity
– Effects (box shadow / border-radius)

** when hover button, details color & bg color are changing.

  • Can use in local site

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.