Title: [188087] trunk/Websites/webkit.org
- Revision
- 188087
- Author
- bfulg...@apple.com
- Date
- 2015-08-06 16:31:45 -0700 (Thu, 06 Aug 2015)
Log Message
Add an example of backdrop-filter.
* demos/backdrop-filter: Added.
* demos/backdrop-filter/dynamic_poster.jpg: Added.
* demos/backdrop-filter/dynamic_source.m4v: Added.
* demos/backdrop-filter/index.html: Added.
* demos/backdrop-filter/inverted_color.jpg: Added.
* demos/backdrop-filter/multiple.jpg: Added.
* demos/backdrop-filter/simple_blur.jpg: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (188086 => 188087)
--- trunk/Websites/webkit.org/ChangeLog 2015-08-06 23:25:46 UTC (rev 188086)
+++ trunk/Websites/webkit.org/ChangeLog 2015-08-06 23:31:45 UTC (rev 188087)
@@ -1,5 +1,17 @@
2015-08-06 Brent Fulgham <bfulg...@apple.com>
+ Add an example of backdrop-filter.
+
+ * demos/backdrop-filter: Added.
+ * demos/backdrop-filter/dynamic_poster.jpg: Added.
+ * demos/backdrop-filter/dynamic_source.m4v: Added.
+ * demos/backdrop-filter/index.html: Added.
+ * demos/backdrop-filter/inverted_color.jpg: Added.
+ * demos/backdrop-filter/multiple.jpg: Added.
+ * demos/backdrop-filter/simple_blur.jpg: Added.
+
+2015-08-06 Brent Fulgham <bfulg...@apple.com>
+
Add a poster image for the video.
* blog-files/backdrop-filters/dynamic_poster.jpg: Added.
Added: trunk/Websites/webkit.org/demos/backdrop-filter/dynamic_poster.jpg
(Binary files differ)
Added: svn:mime-type
Added: trunk/Websites/webkit.org/demos/backdrop-filter/dynamic_source.m4v
(Binary files differ)
Added: svn:mime-type
Added: trunk/Websites/webkit.org/demos/backdrop-filter/index.html (0 => 188087)
--- trunk/Websites/webkit.org/demos/backdrop-filter/index.html (rev 0)
+++ trunk/Websites/webkit.org/demos/backdrop-filter/index.html 2015-08-06 23:31:45 UTC (rev 188087)
@@ -0,0 +1,148 @@
+<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 are styled using a different type of backdrop filter.
+</p>
+
+<h2>
+ A simple blur effect.
+</h2>
+<div class="backdrop">
+ <img src=""
+ <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=""
+ <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=""
+ <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="" 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>
Added: trunk/Websites/webkit.org/demos/backdrop-filter/inverted_color.jpg
(Binary files differ)
Added: svn:executable
Added: svn:mime-type
Added: trunk/Websites/webkit.org/demos/backdrop-filter/multiple.jpg
(Binary files differ)
Added: svn:executable
Added: svn:mime-type
Added: trunk/Websites/webkit.org/demos/backdrop-filter/simple_blur.jpg
(Binary files differ)
Added: svn:mime-type
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
