การทำ Gradient ก็คือการไล่โทนสี ซึ่งการทำไล่โทนสีนั้น Web Browser บางตัวก็ไม่รองรับ ทำให้ต้องเขียน CSS ในรูปแบบที่แตกต่างกัน วันนี้ไปเจอ CSS Gradient generator ก็เลยเอามาแนะนำกันครับ
เริ่มกันเลย
คลิกไปที่ http://www.colorzilla.com/gradient-editor
ก็จะเจอหน้าตาประมาณนี้ครับ หน้าตาคล้ายๆกับ Gradient tools ใน Photoshop เลย
กรอบ Presets ก็คือ รูปแบบที่ทางเว็บมีมาให้อยู่แล้ว ถ้าชอบก็คลิก แล้วก็ copy code ใน ช่อง CSS ไปใช้ได้เลย
หรือถ้าไม่ชอบก็ปรับเอาครับ ในแถบที่อยู่ใต้ กรอบของ Presets
สามารถเพิ่มสีได้ แล้วก็เปลี่ยนสีได้ด้วย ในกรอบ Stops ครับ
มันก็จะไปแสดงตัวอย่างในกรอบ Preview ตรงนี้ เราสามารถเลือกทิศทางการไล่สีได้ครับ ใน menu Orientation
เมื่อปรับแต่งเสร็จแล้ว เราก็สามารถ copy code ในกรอบ CSS ไปใช้งานได้เลยครับ
และมี CSS Matic อีกเว็บ
คลิกไปที่ http://www.cssmatic.com/gradient-generator
และ ที่ CSS Matic จะมี Border Radius tools , Noise texture และ Box Shadow ให้ด้วย ถือว่าสะดวกมากเลยทีเดียว ไม่ต้องเขียน code เยอะแยะ
ภาพประกอบจาก http://multimedia.journalism.berkeley.edu/tutorials/css-intro/