ค่าสี่ปุ่มโซเชียลมีเดียของค่ายต่างๆ เป็นแบบ Hex และ RGB สำหรับทำเว็บ

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn

วลาทำเว็บผมแต่ละครั้งเวลาจะหาค่าสี ปุ่ม Social Media ของค่ายต่างก็จะเสียเวลาหามากครับ ไหนๆ ผมหาได้แล้วเลย รวบรวมมาให้เพื่อนได้นำไปใช้ง่ายๆ ครับ ค่าสี่ปุ่มโซเชียลมีเดียของค่ายต่างๆ เป็นแบบ Hex และ RGB สำหรับทำเว็บ ลองก๊อปปี้ไปใช้ได้เลยนะครับ

Facebook Blue Facebook Blue

Hex: #3b5998

RGB: 59, 89, 152

182-twitter-blue Twitter Blue

Hex: #00aced

RGB: 0, 172, 237

182-googleplus-red Google+ Red

Hex: #dd4b39

RGB: 221, 75, 57

182-youtube-red YouTube Red

Hex: #bb0000

RGB: 187, 0, 0

182-linkedin-blue Linkedin Blue

Hex: #007bb6

RGB: 0, 123, 182

182-instagram-blue Instagram Blue

Hex: #517fa4

RGB: 81, 127, 164

182-pinterest-red Pinterest Red

Hex: #cb2027

RGB: 203, 32, 39

Vine Green Vine Green

Hex: #00bf8fRGB: 0, 191, 143

Snapchat Yellow Snapchat Yellow

Hex: #fffc00

RGB: 255, 252, 0

Quora Burgundy Quora Burgundy

Hex: #a82400

RGB: 168, 36, 0

182-flickr-pink Flickr Pink

Hex: #ff0084

RGB: 255, 0, 132

182-tumblr-dark-turquoise Tumblr Dark Turquoise

Hex: #32506d

RGB: 50, 80, 109

182-vk-blue VK Blue

Hex: #45668e

RGB: 69, 102, 142

319-vimeo-green Vimeo Green

Hex: #aad450

RGB: 170, 212, 80

182-foursquare-logo-blue Foursquare Logo Blue

Hex: #0072b1

RGB: 0, 114, 177

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn

ดาวน์โหลด เว็บฟ้อนต์ ภาษาไทย เว็บฟอนต์สวยๆ webfont

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn

เมือหลายวันก่อน ทำเว็บให้ลูกค้ารายหนึ่ง และเขาต้องการฟ้อนต์ให้แตกต่างจากทั่วไป เลยต้องไปหาวิธีการมาใช้ซะหน่อย การใช้งานเว็บฟ้อนต์นั้น จริงๆแล้วไม่ได้ยุ่งยากมากนักครับ และสามารถเรียกใช้ ด้วย CSS3 ได้เลย ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 และบราวเซอร์ รุ่นใหม่ ทุกค่ายครับ

โดยขั้นแรกก็เราต้องนำฟอนต์ที่เราต้องการ นำไปแปลงให้เป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ส่วนที่สำคัญคือตั้ง Subsetting เป็น No Subsetting เพื่อให้ใช้ภาษาไทยได้ ดังภาพข้างล่างครับ แต่ผมได้เตรียมสำเร็จไว้ให้ท่านโหลดไปใช้ 17 ฟ้อนต์ครับ เตรียมไว้ในรูปแบบเว็บฟ้อนต์ และ css3 สามารถนำไปใช้ได้ทันทีครับ

 

webfont_00

จากนั้นคลิกปุ่ม Download your kit เมื่อแตกไฟล์ จะได้ไฟล์ ดังรูปข้างล่างนี้ครับ เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_05

เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_06

วิธีการใส่ ก็นำโค๊ดใส่ตรงสไตลชีสเราได้เลย เช่น

 

@font-face {

    font-family: 'Book_Akhanake';

    font-weight: normal;

    font-style:  normal;

    src: url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot'); /* IE9 Compat Modes */

    src: local('Book_Akhanake'),

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.woff') format('woff'), /* Modern browsers */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.ttf') format('truetype'); /* Safari, Android, iOS */

}

 

ตัวอย่างฟ้อนต์ภาษาไทยที่ผมได้รวบรวมไว้ครับ สามารถดาวน์โหลดไปใช้ได้เลยwebfont_01

webfont_02

webfont_03

Download “font ภาษาไทย” ThaiWebFonts.zip – Downloaded 4221 times – 8 MB

ดาวน์โหลดเว็บฟ้อนภาษาไทยทั้งหมด

 

หากต้องการฟ้อนต์เพิ่มเติม ไปหาได้จากที่นี่ครับ http://www.f0nt.com/

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn