Ios 7'S Blurred Overlay Effect Using Css

iOS 7's blurred overlay effect using CSS?

It is possible with CSS3 :

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Example here => jsfiddle

How to make an iOS 7-like translucency effect html

This is possible. Check the jsfiddle: http://jsfiddle.net/jawilliams346614/jmbsch96/

HTML

<div class="ios-container ios-blur">
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
    <div class="ios-items"> </div>
</div>
<div class="ios-frost"> </div>

CSS

.ios-container {
    width: 400px;
    height: 400px;
    background: url(http://www.hdwallpapers.in/walls/ios_7_galaxy-wide.jpg);
    z-index:1;
}
.ios-items {
    background: #f00;
    width:80px;
    height:80px;
    margin:10px;
    box-sizing:border-box;
    float:left;
    border-radius: 3px;
}
.ios-blur {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:5;
}
.ios-frost {
    height:200px;
    width: 400px;
    position:absolute;
    top:0;
    left: 0;
    background: rgba(255,255,255,0.3);
}

The class ios-blur could be added to the element by a click event. The same click event would show the overlay frosted glass.

Is it possible to use iOS7-like blur effect only on the background?

There are a few ways you can do this, but they will all involve the same basic steps.

Since the blur effect acts on the entire element, not just the background, you need a dedicated element that will contain the background and the effect applied to it. Then you just overlay the rest of the content over it.

Here is my attempt: http://jsfiddle.net/83aBP/

.background {
  height: 100%;
  width: 100%;
  background: url(http://i.imgur.com/Zz5bPNl.png);
  background-size: cover;
  position: fixed;
  -webkit-filter: blur(20px);
  opacity: 0.8;
}

.content {
  position: relative;
  color: white;
  z-index: 10;
}

iOS 7 dynamic blur effect like in Control Center

Here are ready solutions that I've found:

1. The most unexpected: Use UIToolBar

- (id) initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame]))
    {
        [self setup];
    }
    return self;
}

- (id) initWithCoder:(NSCoder *)coder
{
    if ((self = [super initWithCoder:coder]))
    {
        [self setup];
    }
    return self;
}

- (void) setup
{
    if (iOS7OrLater)
    {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];

        UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:self.bounds];
        toolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        toolbar.barTintColor = self.tintColor;
        [self insertSubview:toolbar atIndex:0];
    }
}

UIToolbar can be used for this needs, bacuse it has his only build-in blur mechanism, and this mechanism is dynamic, what is good. But the bad thing is that in some reason it ignores colors and makes background looks irredeemably...

Update:

To avoid color breaking, do not use barTintColor. You also may change style of toolbar if you want dark styled blur (use UIBarStyleBlack).

2. FXBlurView.

Unlike toolbar it more positive, but it's dynamic mechanism is rare yet and in fact it can be used only for static background. (dynamic = NO).

Creating a blurring overlay view

You can use UIVisualEffectView to achieve this effect. This is a native API that has been fine-tuned for performance and great battery life, plus it's easy to implement.

Swift:

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //always fill the view
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

Objective-C:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

If you are presenting this view controller modally to blur the underlying content, you'll need to set the modal presentation style to Over Current Context and set the background color to clear to ensure the underlying view controller will remain visible once this is presented overtop.

iOS 10 blur filter css

Some of my users met the same problem within my hybrid mobile app, the blur css property is not handled by IOS10 for unknown reasons.

Instead of blurring, in my case, it just makes the whole div white.

I don't have an IOS10, but could you try with the property:

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

Adding blurred background image

Its pretty easy.

All you need is a "visual effect view with blur and vibrancy" view.
You can add it directly from the Object Library. Just Drag and drop the view. You can set the background colour to clear if needed, And you can set the blur level to light, extra light etc.... Just go through those stuffs

---

Related Topics