Overview
This “Little Bits” tutorial will show you how to use CSS to create a blurred background behind different elements in your skin. In this example we will create the blurred effect on a menu bar that sits behind the controller and on the background of the userdata popup.
The CSS Property we will be using is called backdrop-filter. This property allows you to add filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background instead of to the element’s content.
Note: At the time of writing, backdrop-filter is part of the Filter Effects Module 2 Editor’s Draft and is not officially part of any specification. Browser support is currently limited (see “Browser Support” at the end of the tutorial).
Note: this tutorial was built in Pano2VR V6.1.9 You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Final Output: click on the “info button” for a blur bg popup.
Tutorial Files
In the tutorial folder, Blur_BG_Tutorial, there is an Asset Folder with an equirectangular image. There is also a Project folder with a Pano2VR project 'blurbg.p2vr', a V6 Simplex based skin 'blurbg.ggsk' and an Output Folder ‘blurbg_base’ with project files created from the .p2vr and .ggsk elements. (Figure #1)
Note: the sample equirectangular image provided is copyright Tony Redhead and cannot be used or distributed without my permission.
Figure #1: Tutorial Folder
Project Overview
In this tutorial we will modify the blurbg.ggsk skin by;
Adding CSS code to the menu bar and popup background
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here
2. Open the project file ‘blurbg.p2vr’ (Figure #2)
Figure #2: Blur BG Tutorial .p2vr file
3. Click on the ‘Open Output’ button to view the project in its current state (Preview #1)
Preview #1: Basic project without backdrop-filter
4. Click on the ‘Edit Skin’ button to open the skin editor (Figure #3)
Figure #3: Skin Editor showing menu bar and popup background
Note: both the menu bar and popup bg are solid black. In order to implement the blur effect the elements need to have some transparency so I’ve added in some CSS to each element
5. In the Tree, scroll down to the blur_menu container, open it and select the blurbg_menu_bar element
6. In the Properties open the Advanced drop down menu and click on the pencil icon next to CSS Styles: to open the Enter Value window (Figure #4)
Figure #4: blurbg_menu_bar element and its associated CSS
Note: this window contains the CSS that styles the menu bar adding a solid white line at the top and setting the color to black and the opacity to 0.3
Adding the CSS back-drop filter
1. Copy and paste the following code after the existing CSS code in the ‘Enter Value’ window. (Figure #5)
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
Figure #5: backdrop-filter CSS code
Note: as mentioned earlier the backdrop-filter property is not well supported and even in Safari where it is supported. So we need prefix the CSS with -webkit-. Unfortunately there’s no support for Firefox at all.
2. Select ‘OK’ to close the window
3. In the Tree, scroll up to the ‘userdata’ container, open it and select the userdatabg element
6. In the Properties open the Advanced drop down menu and click on the pencil icon next to CSS Styles: to open the Enter Value window (Figure #6)
Figure #6: userdatabg element and its associated CSS
7. Copy and paste the same code after the existing CSS code in the ‘Enter Value’ window. (Figure #7)
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
Figure #7: backdrop-filter CSS code
8. Select ‘OK’ to close the window
Publish the Project
1. Save and close the skin
2. Save the project and Generate an Output
Note: Now the area of the panorama that falls behind the menu bar or user data background will be blurred.
If the browser doesn’t support backdrop-filter it will display the original tinted version.
Browser Support
As mentioned earlier the backdrop-filter is still in draft mode and not fully supported across all platforms.
For a comprehensive list of browser support please visit Can I Use at https://caniuse.com/#feat=css-backdrop-filter
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
