| <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> |
