Correct a typo in the explanatory text.
[WebKit-https.git] / Websites / webkit.org / demos / backdrop-filter / index.html
1 <html>
2 <head>
3     <title>backdrop-filter property example</title>
4     <style>
5     body {
6         font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
7         font-size: 120%;
8         line-height: 1.5;
9         margin: 2em 2em;
10         padding: 0;
11         background-color: #E2E6F5;
12     }
13
14     .backdrop {
15         position: relative;
16         margin: 50px auto 50px auto;
17     }
18
19     .backdrop img, .backdrop video {
20         display: block;
21         margin: 0px auto;
22         width: 800px;
23     }
24
25     .backdrop p {
26         position: absolute;
27         top: 140px;
28         left: 0px;
29         right: 0px;
30         line-height: 100px;
31         width: 600px;
32         display: block;
33         text-align: center;
34         font-size: 60px;
35         padding: 15px 30px;
36         margin: 0px auto;
37         background-color: rgba(0, 0, 0, 0.2);
38         border: 1px solid white;
39         text-shadow: 0px 0px 3px black;
40         font-family: "Myriad Set Pro";
41         color: white;
42     }
43
44     #simpleBlur {
45         -webkit-backdrop-filter: blur(10px);
46         background-color: transparent;
47     }
48
49     #invertedColor {
50         top: 180px;
51         -webkit-backdrop-filter: invert();
52     }
53
54     #multiple {
55         top: 180px;
56         -webkit-backdrop-filter: sepia() hue-rotate(120deg);
57         background-color: transparent;
58     }
59
60     #dynamic {
61         top: 350px;
62         font-size: 30px;
63         line-height: 40px;
64         -webkit-backdrop-filter: blur(10px);
65     }
66
67     pre {
68         padding: 1em 3em;
69         border: 1px solid #ccc;
70         background-color: #ddd;
71     }
72
73     code {
74         font-size: 115%;
75         font-weight: bold;
76         color: #0F5426;
77     }
78     </style>
79 </head>
80 <body>
81
82 <h1>
83     The <code>backdrop-filter</code> Property.
84 </h1>
85
86 <p>
87     The following are a series of image (<code>img</code>) elements, each with a <code>div</code> positioned
88     on top. Each of these <code>div</code>s is styled using a different type of backdrop filter.
89 </p>
90
91 <h2>
92     A simple blur effect.
93 </h2>
94 <div class="backdrop">
95     <img src="simple_blur.jpg">
96     <p id="simpleBlur">backdrop-filter: blur(10px)</p>
97 </div>
98 <p>
99     The CSS for the above image is:
100 </p>
101 <pre>
102 -webkit-backdrop-filter: blur(10px);
103 </pre>
104
105 <h2>
106     Inverted color.
107 </h2>
108 <div class="backdrop">
109     <img src="inverted_color.jpg">
110     <p id="invertedColor">backdrop-filter: invert()</p>
111 </div>
112 <p>
113     The CSS for the above image is:
114 </p>
115 <pre>
116 -webkit-backdrop-filter: invert();
117 </pre>
118
119 <h2>
120     Multiple filters.
121 </h2>
122 <div class="backdrop">
123     <img src="multiple.jpg">
124     <p id="multiple">backdrop-filter: sepia() hue-rotate(120deg)</p>
125 </div>
126 <p>
127     The CSS for the above image is:
128 </p>
129 <pre>
130 -webkit-backdrop-filter: sepia() hue-rotate(120deg);
131 </pre>
132
133 <h2>
134     Dynamic backdrop.
135 </h2>
136 <div class="backdrop">
137     <video src="dynamic_source.m4v" loop="loop" controls="controls" autoplay muted poster="dynamic_poster.jpg"></video>
138     <p id="dynamic">Dynamic Background</p>
139 </div>
140 <p>
141     The CSS for the above image is:
142 </p>
143 <pre>
144 -webkit-backdrop-filter: blur(10px);
145 </pre>
146
147 </body>
148 </html>