Blurred Backgrounds Effects in E-Learning #366: Challenge | Recap
Design Visually Rich Backgrounds Using This Simple Effect
Background images are one of the best ways to add visual intere...
Published 3 years ago
Version 1.0
Blog Post
My entry for this challenge is a dynamic partial blur filter i use in projects.
https://360.articulate.com/review/content/5e75d3dd-d56d-4647-a1e2-f0364158dd85/review
Here you can see it work.
It is in fact a CSS filter applied to images and with some magic its displayed partially only there were other specified elements ( the draggable element and the textbox ) are overlapping the image. You can change the blur value in the options.
As this approach only works for images, i will update this in the near future with an SVG based filter that will work on shapes and other Storyline elements too.
The Storyline for this Challenge you find here:
https://community.articulate.com/discussions/articulate-storyline/partial-blur
Drag the panel on the left around to see that only parts of the background image blur.
And change the amount of blurriness in the options.
Reload the review page for a new image ;-)
https://360.articulate.com/review/content/5e75d3dd-d56d-4647-a1e2-f0364158dd85/review
Here you can see it work.
It is in fact a CSS filter applied to images and with some magic its displayed partially only there were other specified elements ( the draggable element and the textbox ) are overlapping the image. You can change the blur value in the options.
As this approach only works for images, i will update this in the near future with an SVG based filter that will work on shapes and other Storyline elements too.
The Storyline for this Challenge you find here:
https://community.articulate.com/discussions/articulate-storyline/partial-blur
Drag the panel on the left around to see that only parts of the background image blur.
And change the amount of blurriness in the options.
Reload the review page for a new image ;-)
Thanks for the source file Math. I am interested to see other techniques in action.