ผสมผสานการไล่ระดับสี CSS ของคุณเองด้วยแอปพลิเคชันเว็บฟรีนี้

นักออกแบบเว็บไซต์ทุกคนควรรู้ การไล่ระดับสี CSS3. มีมานานหลายปีแล้วและได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์หลักทั้งหมด.

และตอนนี้เว็บแอปฟรีเช่น การผสมผสาน ให้คุณสร้างการไล่ระดับสี CSS3 ได้ทันทีด้วย โปรแกรมแก้ไขภาพในเบราว์เซอร์. คุณสามารถเลือกระหว่าง การไล่ระดับสีเชิงเส้นและรัศมี ในขณะที่ตกแต่งด้วยสีที่จะผสมผสาน.

หน้าเริ่มต้นโหลดด้วย สองสีทึบ ทั้งสองด้าน คุณสามารถใช้ จานสี เพื่อสลับระหว่างเฉดสีหรือป้อน รหัส HEX ด้วยตนเอง ถ้าคุณรู้สีที่คุณต้องการ เมื่อคุณมีสองสีที่คุณต้องการแล้วให้คลิก “มาผสมผสานกัน” ปุ่ม ในศูนย์.

ทั้งสองสีผสมผสานกันเป็นแบบไล่ระดับสี CSS3 ด้วย ตัวเลือกที่สามารถแก้ไขได้ ใกล้ด้านบนของหน้า คุณสามารถเลือกระหว่าง การไล่ระดับสีเชิงเส้น & การไล่ระดับสีรัศมี, และถ้าคุณใช้รูปแบบเชิงเส้นคุณก็สามารถทำได้ ลากตำแหน่งกึ่งกลาง ทั้งหมดในหน้า.

นอกจากนี้ในขณะที่คุณ ในโหมดผสมผสาน คุณยังสามารถกลับไปที่ เปลี่ยนสี ที่ส่วนลึกสุด. นี่เป็นเหมือนเครื่องมือสร้างการไล่ระดับสี CSS3 ที่ไม่มีโค้ดที่สมบูรณ์แบบที่นักออกแบบทุกคนต้องการ.

เมื่อคุณมีสองสีที่คุณต้องการคุณสามารถคลิก ไอคอนตัวยึดรหัส ที่มุมบนขวา สิ่งนี้จะทำให้ หน้าต่างด้วยรหัส CSS ที่คุณสามารถคัดลอก / วางในสไตล์ชีทของคุณ.

Blend เป็นเครื่องมือฟรีที่สร้างขึ้นโดยนักออกแบบ NYC Colin Keany ก็ยัง โฮสต์บนเว็บไซต์ของเขา, แม้ว่าฉันจะไม่เห็นลิงก์ไปยัง GitHub หรือซอร์สโค้ดฟรีใด ๆ ก็ตาม แต่เขาเขียน กรณีศึกษา ให้รายละเอียดกระบวนการของเขาในการสร้าง Blend ด้วยคุณสมบัติที่มีประโยชน์ทั้งหมด.

น่าเสียดายที่เวอร์ชันปัจจุบัน ไม่รองรับมากกว่าสองสี. แต่ฉันกำลังข้ามนิ้วของฉันสำหรับตัวเลือกหลายสีในอนาคต.

เนื่องจากคุณไม่สามารถดาวน์โหลดสำเนาในเครื่องได้ฉันขอแนะนำให้บุ๊กมาร์ก Blend สำหรับใช้ในอนาคต มันเป็นวิธีที่สมบูรณ์แบบ ทดสอบการไล่ระดับสี โดยไม่ต้องแก้ไขสไตล์ชีทของคุณซ้ำ ๆ.

และถ้าคุณต้องการแบ่งปันความคิดของคุณหรือเพียงแค่กล่าวขอบคุณสำหรับเครื่องมือไล่ระดับสีนี้คุณสามารถทวีต Colin @colinkeany.