Translucent UI

Translucent

10 Responses

  1. Flavius Mihaiu 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

    about 2 years ago

  2. Waseem Arshad Waseem Arshad

    Very nice

    likes

    about 2 years ago

  3. Andrew Liebchen 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).

    likes

    about 2 years ago

  4. Mateusz Dembek Mateusz Dembek

    nice idea Flavius :)

    likes

    about 2 years ago

  5. Flavius Mihaiu 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.

    about 2 years ago

  6. Joel Carter Joel Carter

    Good grief....I love this.

    likes

    about 2 years ago

  7. Flavius Mihaiu Flavius Mihaiu

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

    likes

    about 2 years ago

  8. Garrett Gee Garrett Gee

    You do very nice work. Well done.

    likes

    about 2 years ago

  9. Rosina Rosina

    wow! this is great

    likes

    about 2 years ago

  10. Naoshad Naoshad

    Nice mate.

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like