ตัวแก้ไข CSS gradient ที่มีความสามารถเหมือน Photoshop
ความทึบแสง:
|
ตำแหน่ง: | % | ||
สี: |
ตำแหน่ง: | % |
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | เบราว์เซอร์ Android | Chrome สำหรับ Android |
---|---|---|---|---|---|---|---|---|
6 - 8
รองรับบางส่วนโดยใช้ไวยากรณ์ filter
การใช้เบราว์เซอร์: 0.03%
|
4 - 9
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
4 - 5
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0.01% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
3.2 - 4.3
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
2.1 - 3
รองรับโดยใช้ไวยากรณ์ -webkit- แบบเก่า
การใช้เบราว์เซอร์: 0.01% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
||||
9
รองรับบางส่วนโดยใช้ไวยากรณ์ filter
รองรับเต็มรูปแบบโดยใช้ SVG (เลือก "IE9 support") การใช้เบราว์เซอร์: 0.05% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
3.6 - 15
รองรับโดยใช้คำนำหน้า -moz-
การใช้เบราว์เซอร์: 0.01% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
10 - 25
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
5.1 - 6
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0.01% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
11.1 - 11.5
รองรับโดยใช้คำนำหน้า -o-
การใช้เบราว์เซอร์: 0% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
5.1 - 6.1
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
4 - 4.3
รองรับโดยใช้คำนำหน้า -webkit-
การใช้เบราว์เซอร์: 0.09% เลือก "เพิ่มความเข้ากันได้สูงสุด" เพื่อรองรับ |
||
10+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
12+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
16+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
26+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
6.1+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
12+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
7.1+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
4.4+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
46+
รองรับเต็มรูปแบบ (ไม่มีคำนำหน้า)
|
(?)
ลิงก์ไปยังเอกสารสำหรับการไล่สีของ CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
Ultimate CSS Gradient Editor ถูกสร้างขึ้นโดย Alex Sirota. หากคุณชอบเครื่องมือนี้, ลองดู ColorZilla สำหรับเครื่องมือที่ขั้นสูงขึ้น เช่น eyedroppers, color pickers, palette editors และ website analyzers.
ดังที่คุณอาจรู้, HTML5 ได้นำเสนอคุณสมบัติที่น่าตื่นเต้นสำหรับนักพัฒนาเว็บ หนึ่งในคุณสมบัติคือความสามารถในการระบุ gradients โดยใช้ CSS3 อย่างเดียว, โดยไม่ต้องสร้างภาพใด ๆ และใช้พวกเขาเป็นพื้นหลังที่ซ้ำกันสำหรับเอฟเฟกต์ gradient.
สำคัญ: คุณจะต้องใช้เวอร์ชันล่าสุดของ Firefox, Chrome, Safari, Opera หรือ IE เพื่อใช้ Gradient Generator นี้ การสร้าง CSS gradients ที่ได้จะทำงานได้ในเบราว์เซอร์เหล่านี้และยังจะสามารถย้อนกลับไปยัง gradient ที่ง่ายขึ้นในเวอร์ชันเก่า ๆ ของ Internet Explorer.
ตัวควบคุม gradient หลักช่วยให้คุณสามารถทำได้ดังนี้:
แผง 'Preview' ช่วยให้คุณสามารถดูตัวอย่าง gradient ปัจจุบันในรูปแบบแนวตั้งหรือแนวนอน และยังช่วยให้คุณสามารถดูตัวอย่างได้รวดเร็วว่า gradient ที่เป็น fallback สำหรับ Internet Explorer จะดูอย่างไรใน IE
สุดท้าย, แผง 'CSS' มี CSS สำหรับ gradient ปัจจุบันเสมอเพื่อความสะดวกในการคัดลอกและวางลงใน stylesheet ของคุณ คุณยังสามารถใช้แผงนี้เพื่อนำเข้า CSS gradient ที่มีอยู่แล้วลงในเครื่องมือ
gradient presets 'Ultimate Web 2.0 Gradients' ได้รับการสืบเนื่องมาจากงานของ deziner folio และ SGlider12.
Color Picker เป็นการปรับเปลี่ยนเล็กน้อยจาก John Dyer's Color Picker.
ฟังก์ชัน encoder Base-64 มาจาก webtoolkit.
บางไอคอนโดย Yusuke Kamiyamane.