Translucent UI

9 Responses

1. Flavius Mihaiu

   Just playing around with border and background opacity and achieving the following. To replicate opacity use the following simply snippet.

   background: rgba(255,255,255,0);
   border: 2px solid rgba(255,255,255,0.3);
   box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0px 0px 3px rgba(0,0,0,0.05);
   text-shadow: 0 1px 0 rgba(0,0,0,0.2);

   Have fun!

   Background: http://browse.deviantart.com/customization/wallpaper/?q=blur&order=9&offset=168#/d4b3q8r

   For more background go to deviantart > Customizations > Wallpapers > Search: Blur

   4 months ago

2. Pro Waseem Arshad

   Very nice

   1likes

   4 months ago

3. Andrew Liebchen

   Love this. Schemes like this always depend on picking the right background image...gauzy, not too detailed, and relatively even in contrast (just like you have in the shot).

   1likes

   4 months ago

4. Pro Mateusz Dembek

   nice idea Flavius :)

   1likes

   4 months ago

5. Flavius Mihaiu

   @Waseem Arshad that you very much.

   @Andrew Liebchen of course it does. I edited my original post with the link to the one I used and where to find nice ones.

   @Mateusz Dembek glad you think so. I did too. It's nothing new to some designers, I just thought I'd explain to others how it works.

   4 months ago

6. Pro Joel Carter

   Good grief....I love this.

   1likes

   4 months ago

7. Flavius Mihaiu

   @Joel Carter thanks a lot Joel. Glad you love it.

   1likes

   4 months ago

8. Pro Garrett Gee

   You do very nice work. Well done.

   1likes

   4 months ago

9. Rosina

   wow! this is great

   1likes

   4 months ago