Creating iOS 7 effects with CSS3: translucency and transparency

So, the iOS 7 Beta has been out for a couple of weeks, and while the opinions over whether it’s amazing, terrible, too much like Android or Windows Phone continues, it’s fair to say that, as Maxine observed a week ago here at Web Directions:

it’s hard to imagine today’s release still not having a massive impact on the design of not just iPhone apps, but apps developed for any platform, including the web, and web sites themselves more generally

So, we thought we’d take a look at some of the more notable design features from the beta, and how you might implement them using web technology. Note that while we’re part of the iOS Developer Program, we’re basing these observations purely on Apple’s publicly released images and videos.

In this first instalment, we’ll look at the use of translucency in the interface. Here’s what we are going to build: there’s a bit more to it than you might think!

Transparency and Translucency

While the word on the street in advance of the release was that Apple would be adopting a “flat” style of UI with iOS7, as has become popular on the web and on various platforms such as Android, Windows Phone, and Windows 8, Apple went out of their way to emphasise the concept of “Depth”. One of the key ways they’ve brought a depth to the new OS is through translucency.

The translucent background of the Control Center allows the layers behind to remain present
The translucent background of the Control Center allows the layers behind to remain present (Image © Apple)

Now, you might be wondering what the fuss is, after all, we’ve had transparency in interfaces for years.

But translucency is not necessarily transparency. For an object to be transparent, any light passing through it should not be dispersed, so the image of something behind it remains as sharp as if the transparent object weren’t there.

We’re probably most used to semi-​​transparency in UIs, where an image behind another is darkened, but the definition of that object is not lowered. Here’s a very simple example we’d all be familiar with.

Using semi transparency on a web page
Here we use semi-​​transparency to allow the image behind our element to “shine through” its background.

We could do this in a couple of ways on the web. We could use the CSS property opacity. This as you almost certainly know, takes a value between 0 and 1, where the lower the value, the more transparent an element is (opacity is the opposite of translucency, and we’ll see in a moment why the property arguably should have been called transparency. So, we might use this CSS

h2 {
	opacity: .3
}

But the problem is, this applies to the entire element (not just the background), as well as all of its descendant elements. We can’t even do this

h2 * {
	opacity: 1
}

to “turn off” opacity for descendent elements. Once opacity is set, it’s on for the element, and all its descendants.

So opacity certainly isn’t what we always want for creating transparency in our designs. We could use a PNG image, with alpha channel transparency as a background-image for the element, but CSS provides a simpler, more generalizable way to do this, using RGBa colors. RGBa colors are like regular RGB colors, but also take an opacity value between 0, and 1 as a fourth parameter. As an example, the effect achieved above uses rgba(255, 255, 255, .8), a white background color with an opacity of 80% (or in other words, 20% transparency).

Note how the image behind is still sharp, its edges aren’t blurred. Now take a look at Apple’s Control Center above. The icons of the homescreen it overlays are ‘smudged’ as if seen through frosted glass. This is not simply transparency as we know it on the web—it’s translucency. Translucency is essentially a superset of transparency. Where with transparency light is not dispersed as it passes through the object, with translucency, it may be. Think of it like looking through frosted glass. Now, how can we do this with web technologies?

Translucency

To tell the truth, there’s no easy way to achieve this effect right now in the browser. There are a number of ways of emulating aspects of the effect, with varying degrees of support. We’ll take a look at some of these now.

CSS Filters

The closest we’re likely to get right now are CSS filters. Not to be confused with either Internet Explorer’s old, non standard, and no longer supported in IE10 filter property, or the various filter techniques we used to rely on to hide CSS from various browsers in the good old days.

At present, this technique is only supported in modern webkit based browsers, using the -webkit- vendor prefix, and on iOS6+ and Blackberry 10+ (though not the standard Android browser). The good thing is that it falls back nicely for browsers that don’t support CSS filters.

A filter is a “graphical operation that is applied to an element as it is drawn into the document”. Filters can be quite simple, and there are a small number of “canned” filters for achieving common effects such as blurring an image. There are also more complex approaches to creating filters, all the way up to creating shaders in a shader language.

Today we’re just going to use the basic “blur” effect (other basic effects include grayscale, sepia, contrast and invert). We use these effects by using the filter property, which takes a function as its value. In this case, the blur function, which takes a value specifying how blurry the effect should be.

Here, we’ll blur an element with the id of “homescreen”

#homescreen {
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

Which will produce a result rather like this (before on the left, after on the right)

using the blur filter to blur an element
Using the blur filter to blur an element

So, this looks perfect! Why don’t we use this technique as follows:

  • We’ll have a foreground “Control Center” element, which contains the controls we want to present to the user
  • Behind this, with the same dimensions, we’ll have another element, blurred using the blur filter, as the “background” for the controls
  • All this in front of our homescreen element. Note that this time we won’t blur the homescreen as we just did, rather the “background” of the foreground element.

Schematically, this is what we’re doing

creating the blurred effect
Creating the blurred effect

And here’s what we get

apply the blur to the background element
Apply the blur to the background element

Which isn’t quite what we expected. Why? Well, the blur effect only applies to the element itself, so it’s not affecting the elements shining through the background of the blurred element. We’ll have to apply the blur to the homescreen element itself. Let’s do that and see what happens.

apply the blur to the element behind
Apply the blur to the element behind the background

This is a lot closer to what we want. Behind the foreground element, we have our homescreen element blurred. But, we have one big stumbling block—we’ve also blurred the part of the homescreen that’s peeking over the top. Not what we want. This is a limitation of the basic CSS filters, they apply to the whole of an element, not just parts of them.

So, we’re going to have to come up with a hack. Here’s my thinking. Firstly, we no longer need our fake background element. We’ll just apply a semi-​​transparent background color using rgba to the control panel element itself. But here’s how I’m going to fake the only-​​partly-​​blurred homescreen element. We’re going to clone the element. Then we’ll apply the blur to the cloned homescreen, but not the original. Lastly, we only want part of the cloned element to show, not all of it. Hmm, how to achieve this all? Let’s position the cloned element behind the “real” homescreen element.

Here’s how we might visualize that

emulating the blur with a cloned element
Emulating the blur with a cloned element

And let’s see how that works in the browser

our blurred effect in the browser
Our blurred effect in the browser

Which is starting to get there. It’s not a general solution, and it’s certainly less than ideal having to clone an existing element. But for now it’s a start.

Animating the translucent overlay

Just to show this is not a completely hacked up solution, we can even animate the effect of the overlay sliding up over the homescreen, and down when no longer needed. We’ll do this using a tiny bit of JavaScript, and CSS transitions for the animation itself.

Our JavaScript will simply be

  • set the height of the ‘real’ homescreen element to 20%, and top of the Control Center element to 20% to slide the control center element up
  • set the height of the ‘real’ homescreen element to 100% and the top of the Control Center element to 100% to slide the control center element down

You can see this in action here.

Notice that we don’t have to change the cloned homescreen element at all. It just sits there quietly behind the ‘real’ homescreen. Here’s more or less all the JavaScript we need to do this

if(slidingUp === true) {
	//sliding the ControlCenter up
	homeScreen.style.height = "20%"
	controlCenter.style.top = "20%"		
}

else {
	//sliding the ControlCenter down
	homeScreen.style.height = "100%"
	controlCenter.style.top = "100%"
}

Alternatively, we could create two classes, such as “up” and “down”, and simply change the class of each element, with the actual styling taking place in our style sheet. This better separates presentation from behavior.

Now for the animation, we just have two simple CSS transitions, one for the height property of the homescreen element

transition: height .75s

And one for the top property of the Control Center element

transition: top .75s

You’ll want to add a -webkit- prefixed version as well for some webkit browsers, including Android and iOS. Of course, to really animate this in the most lifelike way possible for touch devices, you’ll want to make the speed of the animation a function of how quickly the user ‘flicked’ the Control Center up or down. But hopefully this demonstrates how we can implement an animatable, translucent overlay effect, using CSS filters. It’s also backwards compatible, as browsers which don’t support filters will show the semi-​​transparent overlay, without the blurring of the homescreen element which is behind it.

Caveats

This article is not meant to provide a bullet-​​proof way of creating translucent effects. Rather, it’s an exploration of the various features of CSS are available to create an effect we’re likely to be seeing quite a lot of on the web and elswhere in coming months. The properties we’ve looked at here will work mostly in webkit browsers, with the advantage that they fall back nicely for browsers which don’t as yet support CSS Filters.

There is in fact another way to create the translucent effect, using SVG filters, that is more widely supported, and also does away with the need for our cloned background element. Sadly, at present, while SVG filters are quite well supported in modern browsers, this technique won’t actually work in most browsers.

More Translucency

There’s other uses of translucency in iOS 7 that present additional challenges in terms of implementation using web technologies, which we’ll explore soon in part II.

Further reading and watching

Technologies covered in this post

Browser Support via Can I Use

11 responses to “Creating iOS 7 effects with CSS3: translucency and transparency”:

  1. This is really awesome, great job! Now I’m getting all these ideas to try and utilize this. Except I see in the next six months the world being burned out on the blurred layered effect like we did on 90º corners, gradient reflects, strokes and so on… we’ll see! Thanks for sharing :)

    • By: John
    • June 28th, 2013

    Thanks Ryan,

    yes, new design features, from onwards, have brought the danger of misuse. It was often expressed as a concern when webfonts started taking off, though it was more of a concern in theory than in reality.

    I guess it’s the price we pay for new possibilities — the chance they’ll be poorly used.

    john

  2. […] difference between a browser based or native app, and I’m currently exploring how many of these features such as translucency can be done with today’s web […]

  3. […] Creating iOS 7 effects with CSS3: translucency and transparency | Web Directions […]

  4. […] Creating iOS 7 effects with CSS3: translucency and transparency is a thorough look at how to use opacity and CSS filter effects to build the iOS control center widget, (the new panel that appears when you swipe up from the bottom of a device running iOS7). If you liked my post about using blur filters to recreate an effect from the Yahoo! weather app, this is a great next step to really deep-​​dive on using translucency and other filters to improve usability and delight people, all with CSS. Filters still have some issues, notably a lack of broad desktop browser support and sub-​​60fps performance when animating. But despite those limitations they can be an exceptionally useful tool when used correctly and sparingly. […]

    • By: Nacho Gil
    • July 3rd, 2013

    On the #homescreen2 add a 3d transformation to boost the animation performance. CSS filters are not quite optimised yet and they have expensive painting times on the browser. So switching on the hardware compositing mode does the job.

    –webkit-​​transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

    • By: Can
    • August 29th, 2013

    You don’t need that hack, you can just use negative value for magin.
    Do you know how to implement this : http://​www​.celwk​.com/​B​l​i​nd/ in my website?

    • By: qgustavor
    • September 11th, 2013

    Why on the article you don’t forgot to use “filter: …” but on the example you don’t used this?
    You simple made the example unworkable and Firefox and IE, even if they support the filter.

  5. This is a really well documented tutorial and I did enjoy reading! However, you suggested overlaying images and fixing structure with javascript stylings, which I feel is a bit messy.

    I would suggest maybe taking a look at blur.js which is still javascript, but works on a much more minimised base, allowing for more diversity in developments with easier integration and functionality when developing certain aspects of a website. I personally have found this useful when developing a semi transparent, translucent header background over the top of a dynamic, fading background image, where the image is constantly changing and the webpage scrolls to different locations.

    Both articles are useful and work very well in their own right, but I think blur.js is a different step you could look into using with this tutorial here!

  6. I fired up Chrome dev tools timeline with your demo and noticed a lot of CPU wasted on resizing the icons. You icons have 256x256px resolution and are resized to 64x64px on up and down transition.

    Thank you for a detailed explanation of the technique!

    • By: Emily
    • March 21st, 2014

    I kindled Chrome dev instruments timetable with your demo and perceived a great deal of CPU squandered on resizing the symbols. You symbols have 256x256px determination and are resized to 64x64px on here and there move.

    http://​www​.theweb77​.com/​s​i​m​p​l​e​-​w​e​b​s​ite
    designers web