I just created Meering – an HTML/CSS company profile template which contains 4 pages; homepage, studio/about page, works/portfolios page, and work/portfolio detail page. And I’ll tell you the story behind the design.
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.
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.
Ever wondered how some CSS animations run so smoothly in the browser?
Check out this link
backdrop-filterproperty 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.
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.
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-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