149 lines
3.0 KiB
HTML
149 lines
3.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>backdrop-filter property example</title>
|
|
<style>
|
|
body {
|
|
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
font-size: 120%;
|
|
line-height: 1.5;
|
|
margin: 2em 2em;
|
|
padding: 0;
|
|
background-color: #E2E6F5;
|
|
}
|
|
|
|
.backdrop {
|
|
position: relative;
|
|
margin: 50px auto 50px auto;
|
|
}
|
|
|
|
.backdrop img, .backdrop video {
|
|
display: block;
|
|
margin: 0px auto;
|
|
width: 800px;
|
|
}
|
|
|
|
.backdrop p {
|
|
position: absolute;
|
|
top: 140px;
|
|
left: 0px;
|
|
right: 0px;
|
|
line-height: 100px;
|
|
width: 600px;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 60px;
|
|
padding: 15px 30px;
|
|
margin: 0px auto;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid white;
|
|
text-shadow: 0px 0px 3px black;
|
|
font-family: "Myriad Set Pro";
|
|
color: white;
|
|
}
|
|
|
|
#simpleBlur {
|
|
-webkit-backdrop-filter: blur(10px);
|
|
background-color: transparent;
|
|
}
|
|
|
|
#invertedColor {
|
|
top: 180px;
|
|
-webkit-backdrop-filter: invert();
|
|
}
|
|
|
|
#multiple {
|
|
top: 180px;
|
|
-webkit-backdrop-filter: sepia() hue-rotate(120deg);
|
|
background-color: transparent;
|
|
}
|
|
|
|
#dynamic {
|
|
top: 350px;
|
|
font-size: 30px;
|
|
line-height: 40px;
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
pre {
|
|
padding: 1em 3em;
|
|
border: 1px solid #ccc;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
code {
|
|
font-size: 115%;
|
|
font-weight: bold;
|
|
color: #0F5426;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>
|
|
The <code>backdrop-filter</code> Property.
|
|
</h1>
|
|
|
|
<p>
|
|
The following are a series of image (<code>img</code>) elements, each with a <code>div</code> positioned
|
|
on top. Each of these <code>div</code>s is styled using a different type of backdrop filter.
|
|
</p>
|
|
|
|
<h2>
|
|
A simple blur effect.
|
|
</h2>
|
|
<div class="backdrop">
|
|
<img src="simple_blur.jpg">
|
|
<p id="simpleBlur">backdrop-filter: blur(10px)</p>
|
|
</div>
|
|
<p>
|
|
The CSS for the above image is:
|
|
</p>
|
|
<pre>
|
|
-webkit-backdrop-filter: blur(10px);
|
|
</pre>
|
|
|
|
<h2>
|
|
Inverted color.
|
|
</h2>
|
|
<div class="backdrop">
|
|
<img src="inverted_color.jpg">
|
|
<p id="invertedColor">backdrop-filter: invert()</p>
|
|
</div>
|
|
<p>
|
|
The CSS for the above image is:
|
|
</p>
|
|
<pre>
|
|
-webkit-backdrop-filter: invert();
|
|
</pre>
|
|
|
|
<h2>
|
|
Multiple filters.
|
|
</h2>
|
|
<div class="backdrop">
|
|
<img src="multiple.jpg">
|
|
<p id="multiple">backdrop-filter: sepia() hue-rotate(120deg)</p>
|
|
</div>
|
|
<p>
|
|
The CSS for the above image is:
|
|
</p>
|
|
<pre>
|
|
-webkit-backdrop-filter: sepia() hue-rotate(120deg);
|
|
</pre>
|
|
|
|
<h2>
|
|
Dynamic backdrop.
|
|
</h2>
|
|
<div class="backdrop">
|
|
<video src="dynamic_source.m4v" loop="loop" controls="controls" autoplay muted poster="dynamic_poster.jpg"></video>
|
|
<p id="dynamic">Dynamic Background</p>
|
|
</div>
|
|
<p>
|
|
The CSS for the above image is:
|
|
</p>
|
|
<pre>
|
|
-webkit-backdrop-filter: blur(10px);
|
|
</pre>
|
|
|
|
</body>
|
|
</html>
|