{"id":12029,"date":"2015-08-19T10:20:02","date_gmt":"2015-08-19T14:20:02","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=12029"},"modified":"2015-08-19T10:20:02","modified_gmt":"2015-08-19T14:20:02","slug":"webkit-backdrop-filters","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2015\/08\/19\/webkit-backdrop-filters\/","title":{"rendered":"WebKit Backdrop Filters"},"content":{"rendered":"<p><a href=\"https:\/\/www.webkit.org\/blog\/3632\/introducing-backdrop-filters\/\">Brent Fulgham<\/a>:<\/p>\n<blockquote cite=\"https:\/\/www.webkit.org\/blog\/3632\/introducing-backdrop-filters\/\">\n<p>The User Interface design language for iOS 7 and OS X Yosemite changed to incorporate some beautiful backdrop blur effects. This layering gives a sense of depth, while preventing detail from the content underneath from cluttering the foreground.<\/p>\n<p>The following image shows the WebKit media controls on top of a video. Notice that you can see some of the background content through the frosted glass effect.<\/p>\n<p>[&#8230;]<\/p>\n<p>Until recently, there was no standards-compliant method for producing these kinds of effects. Many designers were forced to create the illusion of blurred backdrops using pre-rendered background content and carefully clipping and positioning these assets to achieve the desired effect.<\/p>\n<\/blockquote>\n<p>The regular system media controls respect the &ldquo;Reduce transparency&rdquo; setting in the Accessibility preferences pane. The WebKit background filters do not.<\/p>","protected":false},"excerpt":{"rendered":"<p>Brent Fulgham: The User Interface design language for iOS 7 and OS X Yosemite changed to incorporate some beautiful backdrop blur effects. This layering gives a sense of depth, while preventing detail from the content underneath from cluttering the foreground. The following image shows the WebKit media controls on top of a video. Notice that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,469,30,903,103,96,328],"class_list":["post-12029","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-ios7","tag-mac","tag-mac-os-x-10-10-yosemite","tag-safari","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=12029"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12029\/revisions"}],"predecessor-version":[{"id":12030,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/12029\/revisions\/12030"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=12029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=12029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=12029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}