CODEWITHSUNDEEP
cssbackgroundgimp
sayth
sayth

Reputation: 7048

Create a Frosted glass effect for Image overlay on Web background

I am putting my wireframe together and being new too design am having trouble getting a nice design happening.

I have a background image which I want to use, but want to soften the whole effect by layering a look over top of the image similar to a very light frosted glass effect.

Can anyone advise how best to create a frosted glass layer or way to achieve similar effect? I was thinking in layers in case I decide to put several other elements on top of the background before layering with the frosted glass.

Upvotes: 3

Views: 8256

Answers (2)

szym
szym

Reputation: 3198

First I would put a div on top of that image. This can be achieved by doing something like this

<div class="box">
<img src="yourimage.jpg" />
<div class="top-layer"></div>
</div> 



.box{
  position: relative;
}
.top-layer{
  position: absolute;
  top: 0; left: 0;
}

The easiest and most efficient way would probably be creating semi transparent png imitating frosted glass using gimp or photoshop and setting it as background for .top-layer.

If you don't want to use another image and want pure css solution then you should experiment with .top-layer style properties. Try using multiple backgrounds of linear and radial gradients (mixture of white, light blue and transparency), opacity and multiple box shadows. Those designs should be of some help:

http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

Especially "A certain phone home screen" and "Box 3: They call me Mr. Glass".

Upvotes: 1

Etheryte
Etheryte

Reputation: 25328

All frosted glass essentially is is distortion, and usually a bit light added as well.

For the distortion you could use jQuery (if you're okay with it running on client side every time), like in this jQuery example (if you follow that code, you will want to have speed=0 and no scaling).

Upvotes: 1

Related Questions