Lesson: lesson-css-gradients

This example show the usage of CSS gradients

PDF files

Converter PDF Preview
PDFreactor
OK
Download
partial support for gradients
PrinceXML
OK
Download
partial support for gradients
Antennahouse
OK
Download
Vivliostyle
OK
Download
partial support for gradients

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@import url("../styles/a5.css");

div {
    width: 3cm;
    height: 3cm;
    border: 1px solid blue;
    margin-right: 1em;
    margin-bottom: 1em;
}

#gradient1 {
    background: -webkit-radial-gradient(60% 55%, circle closest-corner, red, green 20%, yellow 70%, black);
    background: radial-gradient(60% 55%, circle closest-corner, red, green 20%, yellow 70%, black);
}

#gradient2 {
    background: -webkit-repeating-linear-gradient(red, red 11px, white 11px, white 22px);
    background: repeating-linear-gradient(red, red 11px, white 11px, white 22px);
}

#gradient3 {
    background: -webkit-linear-gradient(left, red, blue 30%, green);
    background: linear-gradient(left, red, blue 30%, green);
}

#gradient4 {
    background: -webkit-linear-gradient(225deg, red, green 20%, yellow 70%, black);
    background: linear-gradient(225deg, red, green 20%, yellow 70%, black);
}

#gradient5 {
    background: -webkit-repeating-radial-gradient(#000000, #ffffff 10px, #000000 20px);
    background: repeating-radial-gradient(#000000, #ffffff 10px, #000000 20px);
}

/*
#gradient6 {
    background:
        repeating-radial-gradient(
            circle at top left,
            cyan,
            yellow 2em,
            magenta 4em,
            cyan 6em
        ),
        repeating-radial-gradient(
            circle at bottom left,
            cyan,
            yellow 2em,
            magenta 4em,
            cyan 6em
        ),
        repeating-radial-gradient(
            circle at top right,
            cyan,
            yellow 2em,
            magenta 4em,
            cyan 6em
        ),
        repeating-radial-gradient(
            circle at bottom right,
            cyan,
            yellow 2em,
            magenta 4em,
            cyan 6em
        );

    background-blend-mode: multiply;    
}
*/

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="gradient1"></div>
        <div id="gradient2"></div>
        <div id="gradient3"></div>
        <div id="gradient4"></div>
        <div id="gradient5"></div>
        <!--
            <div id="gradient6"></div>
        -->
    </body>
</html>