SHOW:
|
|
- or go back to the newest paste.
1 | - | TYPE html> |
1 | + | |
2 | <head> | |
3 | <style> | |
4 | #grad1 { | |
5 | height: 200px; | |
6 | background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ | |
7 | background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ | |
8 | background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ | |
9 | background: linear-gradient(red, blue); /* Standard syntax (must be last) */ | |
10 | } | |
11 | #grad2 { | |
12 | height: 150px; | |
13 | width: 200px; | |
14 | background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */ | |
15 | background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */ | |
16 | background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */ | |
17 | background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */ | |
18 | } | |
19 | #grad3 { | |
20 | height: 150px; | |
21 | width: 200px; | |
22 | background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */ | |
23 | background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */ | |
24 | - | </html> |
24 | + | |
25 | background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */ | |
26 | } | |
27 | </style> | |
28 | - | <!DOCTYPE html> |
28 | + | |
29 | <body> | |
30 | ||
31 | <h3>Linear Gradient - Top to Bottom</h3> | |
32 | <p>This linear gradient starts at the top. It starts red, transitioning to blue:</p> | |
33 | ||
34 | <div id="grad1"></div> | |
35 | ||
36 | <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> | |
37 | ||
38 | <br><br> | |
39 | ||
40 | <h3>Repeating Radial Gradient</h3> | |
41 | ||
42 | <div id="grad2"></div> | |
43 | ||
44 | <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> | |
45 | ||
46 | <br><br> | |
47 | ||
48 | <h3>Repeating Radial Gradient</h3> | |
49 | ||
50 | <div id="grad3"></div> | |
51 | - | </html> |
51 | + | |
52 | <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> | |
53 | ||
54 | - | <!DOCTYPE html> |
54 | + | |
55 | </html> |