css | itpcc

สร้าง Icon font ของตัวเองได้ง่ายๆ ด้วย IconMoon App

หนึ่งในองค์ประกอบหลักที่สำคัญของเว็บไซต์ที่จะขาดไปเสียไม่ได้เลยคือ icon เหตุผลหลักก็เหมือนที่มีมีคนเคยกล่าวไว้ว่า “หนึ่งภาพมีค่ายิ่งกว่าร้อยคำพูด” icon ถึงแม้จะไม่ใช่รูปภาพเสียทีเดียว แต่ด้วยความที่เป็นสื่อกลางที่คนไม่ว่าจะชาติภาษาไหนก็เข้าใจได้ง่าย หลายท่านคงอาจเคยใช้งาน icon ไม่ว่าจะเป็นรูปภาพ gif, png svg vector หรือแม้แต่ icon font ที่เป็นที่นิยมอย่างมากในปัจจุบัน (หากสงสัยว่าแล้ว icon font คืออัลไล ลองอ่านบทความของ designil นี้ดูครับ อธิบายได้ดีทีเดียว สรุปสั้นๆ คือมันเป็นฟอนต์ฟอนต์หนึ่งนี่แหละครับ แต่แทนที่จะเก็บแบบตัวอักษรก็เก็บ icon ไว้แทน ถ้านึกไม่ออกก็นึกถึงฟอนต์ Wingdings ที่มี icon แบบนี้ : ( ÿ ครับ) เพราะทั้งสะดวก ใช้งานง่าย ที่สำคัญคือมีขนาดเล็กและสวยงามดี ไม่มีอาการแตกเมื่อขยายใหญ่เข้า แล้วถ้ามี logo หรือรูป icon ที่อยากทำเป็น icon font เองล่ะจะทำอย่างไร? IconMoon Apps คือคำตอบ…

9 July 2015

ทำขอบเฉียงด้วย CSS3 Gradient

ตามที่สัญญากันไว้ครับ หลายท่านอาจเคยเห็นบางเว็บไซต์ทำขอบเฉียงๆ กันมาบ้างแล้ว อาจจะใช้คุณสมบัติของ CSS Border ทำให้ขอบบางส่วนใส หรือการดัดด้วย transform: skew, SVG element เป็นต้น แต่ด้วยข้อเสียบางอย่างของวิธีการดังกล่าว เช่น CSS Border จำเป็นต้องรู้ขนาดตายตัวเป็น pixel หรือหน่วยที่สัมพันธ์เหมือนกัน (em, rem, vh, vw เป็นต้น) หรือ transform: skew ก็ต้องดัด element นั้นจริงๆ หากต้องใส่ใน element อื่นต้องคำนวนระยะมุมด้วย เป็นต้น หลังจากที่ค้นหาข้อมูลอยู่นาน ผมก็เจอ Fiddle อันหนึ่งที่ใช้การทำขอบเฉียงด้วย CSS Gradient ซึ่งเป็นอะไรที่ถูกใจแจ้จริงๆ ก็เลยนำมาประยุกต์ใช้ครับ ลองดูตัวอย่างนี้ดูครับ มันทำได้อย่างไรกันนี่!? เทคนิค linear gradient ที่เราจะใช้ก็คือการใส่พื้นหลังแบบไล่สีง่ายๆ นี่แหละครับ ตาม syntax ของ W3C linear-gradient() ซึ่งเป็นมาตรฐานที่สรุปแน่นอนแล้ว จะสามารถใช้คำสั่ง…

6 July 2015

spin right round กันให้มึน ซูม element กันให้บ้านบึ้ม ด้วย CSS3 transform

ก่อนจะว่าไปถึงอย่างอื่น ก็ขอสวัสดีกับผู้ชม เอ้ย! ผู้อ่านทุกท่าน โพสต์ที่ท่านอ่านตอนนี้ เป็นโพสต์แรกของเว็บ itpcc.net โฉมใหม่ หลังจากที่ปิดไปปีหนึ่งเพราะลืมจ่ายค่าโฮสต์ เอ้ย! ยุ่งกับการสอบเข้า ซึ่งตอนนี้ก็เสร็จไปแล้ว ก็เลยขอล้างไพ่แล้วทำใหม่ซะเลย ยังไงก็ขอฝากผู้อ่านทุกท่านติดตามบล็อกผม เก็บผมไว้ใน bookmark ด้วยนะครับ ขอบคุณครับ 😀 ตอนนี้ผมกำลังทำ portfolio เก็บผลงานแบบ Single Web Page อยู่ครับ ก็วางแผนว่าช่วงเปลี่ยนหน้าไปหน้าผลงาน จะหมุนโลโก้สักสองรอบ แล้วซูมโลโก้จนส่วนขาวของโลโก้คลุมทั้งหน้า แล้วเฟดเข้าหน้าผลงาน อันที่จริงจะใช้แฟลชก็ได้ แต่เดี๋ยวนี้แม้แต่ศาสดาจ็อบซึ่งล่วงลับไปแล้วยังไม่เผาผีกับแฟลช แถม CSS3&HTML5 ก็มาแรง ก็ขอจัด CSS3 หน่อยแล้วกัน ซึ่งวิธีการก็ไม่ได้ยากเลยอย่างที่หลายคนคิดเลยครับ แค่นี้เอง : .welcome.change-page .logo { -webkit-animation: spinZoom 2s 1 ease-in-out; -moz-animation: spinZoom 2s 1 ease-in-out;…

9 May 2014

css tip-and-technic No comments ราชศักดิ์ รักษ์กำเนิด