การไล่ระดับสีวงกลมและรูปไข่ CSS3 [เคล็ดลับ CSS3]

วันนี้เราจะพูดคุยกันต่อไป การไล่ระดับสี CSS3. ในโพสต์ก่อนหน้าเราได้แสดงวิธีสร้าง การไล่สีเชิงเส้น. เวลานี้เราจะครอบคลุมญาติของพวกเขา, การไล่ระดับสีแบบวงกลมและรูปไข่.

ไวยากรณ์ไล่โทนสี

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

ค่าแรกกำหนด ตำแหน่งการไล่ระดับสี. เราสามารถใช้คำหลักที่สื่อความหมายเช่นด้านบนด้านล่างกลางและด้านซ้ายหรือเราอาจจะชอบมากกว่านี้, 50% 50% เพื่อตั้งค่าการไล่ระดับสีที่กึ่งกลางหรือ 0% 0% เพื่อตั้งค่าการไล่ระดับสีที่จะเริ่มต้น บนซ้าย.

ค่าที่สองกำหนด รูปร่างและขนาดไล่ระดับสี, มีสองข้อโต้แย้งในการกำหนดรูปแบบการไล่สี วงรี ซึ่งเป็นค่าเริ่มต้นและที่สองคือ วงกลม.

และสำหรับทางด้าน ขนาดไล่ระดับสี, เราสามารถเลือกหนึ่งในหกอาร์กิวเมนต์ต่อไปนี้.

ตารางที่มา: Mozilla Developer Network.

สุดท้ายที่สามและสี่กำหนด การผสมสี. ดังนั้นนี่คือวิธีที่เราเขียนไวยากรณ์เพื่อสร้าง รูปไข่ การไล่ระดับสีและในครั้งนี้เราจะใช้ ปก สำหรับขนาดการไล่ระดับสีดังนั้นมันจะกระจายอย่างกว้างขวางครอบคลุมภาชนะ;

 เนื้อหา ภาพพื้นหลัง: รัศมีไล่ระดับสี (กึ่งกลางศูนย์, ปกวงรี, # ffeda3, # ffc800);  

เพื่อสร้าง กลม การไล่ระดับสีเราสามารถทำได้ด้วยวิธีนี้:

 body background-image: radial-gradient (ศูนย์กลางกึ่งกลาง, ปกวงกลม, # ffeda3, # ffc800);  

เมื่อชื่อมีความหมายรูปร่างไล่ระดับสีจะเป็นวงกลม.

รองรับเบราว์เซอร์

เพียงสังเกตว่าเบราว์เซอร์ทั้งหมดยังอยู่ในขั้นตอนการให้การสนับสนุนอย่างเต็มที่สำหรับคุณลักษณะนี้ดังนั้นพวกเขาจึงยังต้องการคำนำหน้าผู้จัดจำหน่าย ดังนั้นทั้งไวยากรณ์ที่สมบูรณ์ที่จะทำงานในเบราว์เซอร์ที่ทันสมัยทั้งหมด - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ และ Opera 11+ - จะมีลักษณะเช่นนี้

 เนื้อหา ภาพพื้นหลัง: รัศมีไล่ระดับสี (ด้านล่างตรงกลาง, ปกวงรี, # ffeda3, # ffc800); ภาพพื้นหลัง: -o-radial-gradient (ด้านล่างตรงกลาง, ปกวงรี, # ffeda3, # ffc800); ภาพพื้นหลัง: -ms-radial-gradient (ด้านล่างตรงกลาง, ปกวงรี, # ffeda3, # ffc800); ภาพพื้นหลัง: -moz-radial-gradient (ด้านล่างตรงกลาง, ปกวงรี, # ffeda3, # ffc800); พื้นหลังภาพ: -webkit-radial-gradient (ด้านล่างตรงกลาง, ปกวงรี, # ffeda3, # ffc800);  

ลองดูตัวอย่างหรือดาวน์โหลดซอร์สเพื่อเล่นกับการไล่ระดับสี.

• การสาธิต
• แหล่งดาวน์โหลด

คำพูดสุดท้าย

การสร้างการไล่ระดับสีแบบ CSS3 นั้นไม่ยากอย่างที่คิดและโดยเฉพาะอย่างยิ่งเมื่อคุณได้รับความช่วยเหลือจากเครื่องมือเหล่านี้ในการสร้างรหัส:

• การไล่ระดับสี Colorzilla
• Gradientoo

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