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

รักชอบแชร์เลย!! Share on Facebook
Facebook
0Share on Google+
Google+
0Pin on Pinterest
Pinterest
0Tweet about this on Twitter
Twitter
0Share on LinkedIn
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 Facebook
Facebook
0Share on Google+
Google+
0Pin on Pinterest
Pinterest
0Tweet about this on Twitter
Twitter
0Share on LinkedIn
Linkedin

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

รักชอบแชร์เลย!! Share on Facebook
Facebook
0Share on Google+
Google+
0Pin on Pinterest
Pinterest
0Tweet about this on Twitter
Twitter
0Share on LinkedIn
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 6043 times – 8 MB

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

 

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

รักชอบแชร์เลย!! Share on Facebook
Facebook
0Share on Google+
Google+
0Pin on Pinterest
Pinterest
0Tweet about this on Twitter
Twitter
0Share on LinkedIn
Linkedin