Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by sakatagintoki
sakatagintoki
12,624 Points

Creating Translucent Colors/Backgrounds

What I want to create is a translucent navbar.

2 Answers

Zoltán Holik
Zoltán Holik
3,401 Points

In this case you need a helper div...

Put this html tag directly after your beginning body tag, and before the nav, and apply the css.

<div class="helper"></div>

.helper {
  background: url("http://jaylacey.nationbuilder.com/themes/1/553aaf9b01925b7439000001/0/attachments/14299096161430828280/default/pyramid.png");
  position: absolute;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  height: 80px;
  width: 100%;
  top:0;
  left:0;

And if you put something in the helper div, it will be "blurred", and you get the effect, what you want.

Zoltán Holik
Zoltán Holik
3,401 Points

I am glad how I may have helped :)

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

A little tricky but you can do what you want :)

http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

Zoltán Holik
Zoltán Holik
3,401 Points

it's ok, but if you use the blur for one "layer" down with rgba colors and opacity..... with a little trick :before selector

i make codpen for you: http://codepen.io/anon/pen/YXypzX

I think this nis what you need :)