Facebook สามารถติดตามข่าวสารเรื่องไอทีได้จาก ไปที่ Facebook

สร้าง CSS Gradient ด้วย Ultimate CSS Gradient Generator

สร้าง CSS Gradient ด้วย Ultimate CSS Gradient Generator

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

gradient generator

Gradient คือ การไล่สีเพื่อให้เกิดความสวยงาม ความมีมิติของภาพ ตามที่เราต้องการ โดยส่วนใหญ่จะใช้ Gradient เพื่อเน้นเมนู, ปุ่ม, navbar, และ หัวข้อ เพื่อให้ดูเด่นและทำให้เกิดความน่าสนใจ ดังตัวอย่าง

ตัวอย่าง Gradient Navbar ของ Apple.com

Preview Section Css Gradient Creator

ตัวอย่าง Gradient Button ของ Bootstrap

ตัวอย่างด้านบนล้วนแต่ใช้ CSS3 ในการเขียน ใช่แล้ว CSS3 โดยไม่ต้องสร้างเป็นรูปเพื่อให้เปลืองเนื้อที่ แม้แต่เราขยายภาพก็ไม่ทำให้ภาพแตกจึงเป็นที่นิยมอย่างมากในสมัยปัจจุบัน

แต่การสร้าง CSS Gradient นั้นเราจำเป็นต้องมีความรู้ด้านศิลป์และการเขียน CSS เพราะเราต้องเขียนเป็น Code สี เพื่อทำการไล่ลำดับตามที่เราต้องการ และการเขียน Gradient ค่อนข้างยุ่งยากสำหรับผู้เขียนเว็บเริ่มต้นเพราะต้องใช้เวลาศึกษาอยู่พอสมควร ที่ดีที่สุดคือการเลียนแบบสีจาก Photoshop และ นำมาเขียน Code ที่เราเลือกสีไว้ นั้นก็สร้างความยุ่งยากอีกเช่นกัน

วันนี้ gunoob.com จึงขอเสนอเครื่องมือในการ สร้าง CSS Gradient ด้วย Ultimate CSS Gradient Generator แบบง่าย เพียง ลาก วาง เลือกสี แล้วก็คัดลอกโค๊ด นั่นคือเว็บ Ultimate CSS Gradient Generator ซึ่งมีความสะดวกสบายในการใช้งานอย่างมาก

เมื่อเราเข้าไปในเว็บจะพบกับส่วนต่างๆดังนี้

  1. ส่วน​ Preset คือส่วนที่มีคนออกแบบไว้ให้เราแล้ว เราเพียงแค่ คลิกเพื่อเรียกใช้งาน โดยในกรอบของ Preset เองจะมีสีหลากหลายให้เราเลือกอยู่แล้ว
    Preset Section Css Gradient Creator
  2. ใส่ส่วนของการปรับแต่ง เมื่อเราต้องการทำการปรับแต่งด้วยตัวเอง เราสามารถเลือกสีที่มีให้แล้วจาก Preset หรือเราจะทำการใส่สีเองก็สามารถทำได้ในส่วนนี้ หน้าตาของส่วนนี้จะเหมือนเครื่องมือ Gradient บน Photoshop โดยเราสามารถเพิ่มและลบสีที่จะนำมาไล่ได้
    Self Design Section Css Gradient Creator
  3. ในส่วนของ Preview คือส่วนแสดงผล ส่วนนี้จะแสดงผลแบบ Realtime ในขณะที่เราเปลี่ยนแปลงค่าต่างๆ
    Preview Section Css Gradient Creator
  4. ในส่วน CSS จะเป็นการ Generate  CSS Code ให้กับเราอัตโนมัติ เพียงเราทำการคัดลอกเพื่อไปใช้งานได้อย่างรวดเร็ว และยังมีฟังก์ชั่นในการ Hack เพื่อให้รองรับ Internet Explore 9 ได้อีกด้วย ส่วนนี้เราสามารถเลือก Color format เป็นแบบ hex เช่น#aabbcc , rgb เช่น rgb(30,87,153), rgba เช่น rgba(30,87,153,1) และอื่นๆ ได้อีกด้วย
    CSS Code Section CSS Gradient Creator

เราสามารถนำ Code CSS เหล่านี้ไปสร้างคลาส เพื่อเรียกใช้งาน Gradient ที่เราสร้างขึ้นจาก CSS Gradient Generator อย่างง่ายดาย หากใครมีข้อสงสัย กรุณาฝากคำถามไว้ในช่องคอมเม้นท์​ และใครเห็นว่าบทความนี้มีประโยชน์ โปรดกด Like Share +1 Google Plus เพื่อเป็นกำลังใจให้ผู้เขียนได้นำบทความดีๆเหล่านี้มานำเสนออีกต่อไป ขอบพระคุณ

ฝากแชร์ด้วยครับ

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Add a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *