Creative Commons License

[How2] ไล่สีด้วย css

posted on 08 Jan 2012 09:06 by rije  in HowTo, Knowledge
สวัสดีปีใหม่ย้อนหลังค่ะ ^^
 
 
------------------------------------------------------
 
  How To : วิธีการไล่สีด้วย css  
 
สามารถนำไปประยุกต์ใช้ได้กับหลายๆ ส่วนค่ะ ตอนท้ายแปะลิงค์ Css Gradient Generator ไว้ให้ด้วย เข้าไปใช้กันได้ค่ะ จะเป็นเว็บสร้างโค้ด gradient ให้ เพียงเลือกสีที่ต้องการเท่านั้นค่ะ ^^
 
++++++++++++++++++++++++++
 
  ทำความเข้าใจ  

ก่อนอื่นต้องบอกก่อนว่าการจะไล่สีด้วย css นั้น แต่ละบราวเซอร์ใช้โค้ดไม่เหมือนกันนะคะ
สำหรับ Safari , Firefox , Chrome หรืออื่นๆ ที่ไม่ใช่ IE ใช้โค้ด background แต่เขียนโค้ดคนละแบบอีกล่ะ
ส่วน IE ใช้ filter ในการทำไล่สีค่ะ
 
  รูปแบบการไล่สี  

สำหรับตัวอย่างเราใช้รูปแบบ linear คือไล่สีธรรมดา
ส่วน radial เป็นรูปแบบรัศมี ควรใช้จุดเริ่มต้นเป็น center
จากโค้ดตัวอย่างก็เอา radial แทน linear นะคะ ถ้าชอบแบบไล่สีแบบรัศมี
 
 สำหรับ Firefox (3.6 ขึ้นไป)
background: -moz-linear-gradient(จุดเริ่มต้น, #สีที่1, #สีที่2);

ใช้ -moz-linear-gradient สำหรับ firefox เท่านั้น
ในวงเล็บคือคำสั่งในการแสดงผลค่ะ

- จุดเริ่มต้น : คือเราจะเริ่มไล่สีจากตำแหน่งใด ใส่โค้ดได้ดังนี้

-------1. top : เริ่มจากบน

-------2. left : เริ่มจากซ้าย

-------3. right : เริ่มจากขวา


-------4. bottom : เริ่มจากล่าง


-------5. center : เริ่มจากตรงกลาง (ใช้กับ radial)
หากต้องการเริ่มจากเฉียง เช่น บนซ้ายไล่มาทางล่างขวาให้
 
ใส่โค้ดดังนี้
 
background: -moz-linear-gradient(left top, #สีที่1, #สีที่2);
ถ้าเริ่มจากขวาล่างก็เป็น right bottom เป็นต้น
 
- สีที่ใช้ : สีที่เราจะไล่จากจุดเริ่มต้นไปยังจุดสุดท้าย
ในโค้ด #สีที่ 1 , #สีที่ 2 คือ

--------#สีที่ 1 : สีแรกสุดที่จะเริ่มไล่สี หากจุดเริ่มต้นเป็น top สีที่1 ใช้ #FF0000 (สีแดง)
ก็จะเป็นการไล่สีแดงจากข้างบนไปยังสีถัดไป

--------#สีที่ 2 : สีถัดมาหากให้เป็น #00FF00 (สีเขียว) ก็จะได้การไล่สีจากแดงไปเขียว

หากต้องการใส่หลายสี ก็ใส่สีถัดไป คั่นด้วย , (ลูกน้ำ) จะเรียงยังไงก็ได้ เริ่มด้วย 1->2->3->ถัดไป อย่างนี้เสมอ

ตัวอย่าง

background: -moz-linear-gradient(top, #FF0000, #00FF00);
เห็นเฉพาะ Firefox

 สำหรับ Safari,Chrome,อื่นๆ
 
background: -webkit-gradient(linear, จุดเริ่มต้นแบบ x y, จุดสิ้นสุดแบบ x y, from(#สีที่1), to(#สีที่2)); คล้ายๆ กับของ firefox แต่เพิ่มจุดสิ้นสุดมา และโค้ดที่ใช้จะต่างกันนิดหน่อย

- จุดเริ่มต้นและจุดสิ้นสุด : ใช้ค่าแบบ x-y (หากสงสัยถามอาจารย์คณิตศาสตร์เอานะคะ ^^)
 
ตัวอย่างเช่น เริ่มต้นจากบนไปล่าง แบบเป็นแนวเส้นตรง เวลาเขียนโค้ดจะต้องเขียนให้ถูกนะคะ เพราะจะต่างกับ firefox ตรงที่ใช้รูปแบบ x-y นี่ล่ะค่ะ โค้ดที่จะใส่ควรเป็นดังนี้ค่ะ
 
background: -webkit-gradient(linear, left top, left bottom, from(#สีที่1), to(#สีที่2));

ใช้เริ่มจาก left top คือ มุมซ้ายบน ถ้ามีช่องสี่เหลี่ยมก็สุดมุมซ้ายบนเลย left(x) top(y) ตามแกน x-y เลย
ส่วนจุดสิ้นสุด left bottom คือ มุมซ้ายล่าง

ทีนี้จะดูว่ามันถูกต้องยังไง ให้ลองวาดรูปดูตามนะคะ (ขออธิบายตามรูปด้านล่าง)



จากรูปในวงกลมคือจุดเริ่มต้นและจุดสิ้นสุดค่ะ สีแดงคือทิศทางการไล่สี จะเห็นว่าเป็นการไล่สีจากบนลงล่าง เหมือน top ไปเช่นเดียวกัน เพียงแต่เริ่มที่มุมซ้ายเท่านั้นเองค่ะ ดังนั้นผลที่ได้จึงเหมือนของ Firefox ทุกประการค่ะ

ส่วนการเลือกสีก็ใช้รูปแบบเดียวกับ Firefox นะคะ
 
ตัวอย่าง

background: -webkit-gradient(linear, left top,
left bottom, from(#ccc), to(#000));
เห็นเฉพาะ Safari , Chrome , อื่นๆ เท่านั้น

 สำหรับ Internet Explorer(3.6 ขึ้นไป)
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#สีที่ 1', endColorstr='#สีที่ 2');
 
 
startColorstr : คือจุดเริ่มต้นค่ะ
endColorstr : คือจุดสิ้นสุดค่ะ

ก็ใส่สีที่ต้องการไล่สีลงไป ตามตัวอย่างโค้ดเลยค่ะ
 
ตัวอย่าง

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ccc', endColorstr='#000');

เห็นเฉพาะ IE

++++++++++++++++++++++++++

กรณีที่ไม่อยากเขียนโค้ดเอง เพราะบางทีโค้ที่เขียนอาจผิดพลาดได้
แนะนำเว็บสำหรับ generator โดยเฉพาะเลยค่ะ ^^

http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
++++++++++++++++++++++++++

END

Comment

smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????   ??????????????????
smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????

Tweet

Hot! Hot! Hot! Hot! Hot!

#1 By b-padung Studio on 2012-01-08 11:28

Hot! Hot! Hot! Hot!

ความรู้ใหม่เลยค่ะ เอามาประยุกต์แต่งบล็อกได้ด้วย ;p
ขอบคุณมากเลยค่าาา confused smile

#2 By HeDw!g on 2012-01-08 15:21

อ่ามมมม

ดะไปศึกษาก่อน >w<

โยนดาวไว้ก่อน
Hot! Hot! Hot!

#3 By TomTonk on 2012-01-08 19:19

โอ้ว ความรู้สุดๆเลยค่ะ
ขอบคุณมากนะคะ
Hot!

#4 By Tama-kung on 2012-01-08 21:12

ดีจริง
วิเศษสวดไปเลยครับ open-mounthed smile double wink Hot! Hot! Hot!

#5 By บุรุษนิรนาม on 2012-01-09 09:43