Translucent UI

10 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

   over 1 year ago

2. Pro Waseem Arshad

   Very nice

   1likes

   over 1 year 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

   over 1 year ago

4. Pro Mateusz Dembek

   nice idea Flavius :)

   1likes

   over 1 year 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.

   over 1 year ago

6. Joel Carter

   Good grief....I love this.

   1likes

   over 1 year ago

7. Flavius Mihaiu

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

   1likes

   over 1 year ago

8. Pro Garrett Gee

   You do very nice work. Well done.

   1likes

   over 1 year ago

9. Pro Rosina

   wow! this is great

   1likes

   over 1 year ago

10. Pro Naoshad

    Nice mate.

    8 months ago