Better Done than Perfect

Lieur was founded in 2014. Almost 2 years it didn’t has a website. I mean a real website that lead someone who doesn’t know about us to someone who know what Lieur is. At least they know that Lieur is design studio, what we’ve done, and how to contact us.

The last Lieur website before alpha version.
The last design Lieur website before alpha version.

We’re too busy to reach the perfection. Find the typography formula, experiment with color scheme, even debated with Adobe super user at Adobe forum about color conversion :P.

Then we realized that we really need a real website. Many people ask about “What is Lieur?” after they visited the website. Although we put blog link under the big logo, but I’m not sure they will click it.

So I decided to create the alpha version. With just quick sketch on my phone to create a wireframe then I start designing in the browser. Actually it just need 7 hours to make the alpha version live. (Sorry for my bad skill on Photoshop to crop the image, it took quite long).

And here we are, Lieur.co is live.

It’s alpha version, we will update everything to reach the perfection.

Backdrop-filter, the New Way to Create Blur Background

Lovebird's top navigation
Lovebird’s top navigation

The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element’s transparency/opacity.

developer.mozilla.org

Have you seen Lovebird‘s top navigation? You will see blur effect to the area behind it. It’s cool right? The blur effect is introduced by iOS 7 and OS X Yosemite. Even Sketch also put it into its style panel.

zV4qfDNPAq
Sketch – background blur

Then we can create that effect by using just 3-4 lines CSS, or even 1 line CSS (if we use mixins). Webkit introduced backdrop-filter in 2nd semester of 2015. Unfortunately until now, browser that support backdrop-filter are Safari 9+ and iOS 9.2+ (See the table). We have to wait until CSS Working Group finish working on it. Or you can do it with Javascript hack. You choose :)

Anyway, backdrop-filer has some options to manipulate the area behind the element. It’s not only blur option but also you can use brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related backdrop-filter on Codepen.

Originaly posted in Lieur’s Journal