Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Matt

How can I create a blurred background fixed footer?

Making a sticky footer with transparent background is easy, but what if I want the background of the fixed footer to be semi-transparent AND have a background blur (using sketch's background blur style)?

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Ashima Sood
InVision ambassador Ashima Sood , ambassador
Comment actions Permalink

Hi Matt, 

While this is a more Sketch specific question and you may find a better answer in a forum pertaining to Sketch App (maybe these ones could be a good start: https://blog.sketchapp.com/, https://www.sketchappsources.com/tutorials-tips.html, https://www.sketch.com/docs/) I'm happy to talk about how I'd go about it in the following steps!

1. Select the element you'd like to edit.

2. Change the transparency (under the fill color section)

3. Scroll down to the 'Blur' section, select it and use the drop down to select 'Background Blur'. Here you can decide the degree to which you'd like to blur the element or the saturation of the blur.

4. Once that's done, you can follow this simple adjustment to your prototype.

I hope that helped!

0

Matt
InVision ambassador Matt , ambassador
Comment actions Permalink

Thanks for the insight, but that much I already knew. 

The issue is when you create a rectangle that will be your fixed footer, then you apply the background blur to it... then upload it to invision and set the fixed footer hotspot... the background blur doesn't show up. Invision just doesn't recognize it, so it just shows the rectangle with opacity, but no blur. 

0

Ashima Sood
InVision ambassador Ashima Sood , ambassador
Comment actions Permalink

I see, I'm sorry to hear this. I tried recreating this issue and wasn't able to. Our support team will be in touch with you. In the meanwhile would you be able to provide the details for -

  1. The version of sketch you are using
  2. The version on craft you are using.
  3. Mac OS version

 

0

Laura Cunha
InVision ambassador Laura Cunha, InVision Employee , ambassador
Comment actions Permalink

Hi Matt,

Laura from the InVision team here — so sorry about the trouble viewing the background blur in your fixed footer! To help us understand this issue a bit better, could you please share a few additional details?

  1. Could you please send a screenshot showing the missing blur in your fixed footer?
  2. Which Sketch version are you using?
  3. Are you syncing this screen using Craft? If so, which Craft version are you using?
  4. Which macOS version are you using? e.g. macOS Mojave 10.14.6

Thank you in advance!

Laura

0

join the conversation

to comment, sign up or sign in.