The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a requirement to anyone willing to work with web. I have been playing more and more with CSS, trying to create simple things like basic typography styles to more complex ones, like water drop effects. In this post I will show you how to create a simple water drop effect using CSS. The process is quite simple but it will require some basic knowledge of CSS and a little bit of jQuery.
Web Design Inspiration: Bacardi Mojito
I believe we have already posted about this website for the Sites of the Week in the past, however I would like to feature it on a full post because it's still one of the sites that really caught my attention in terms of beautiful execution and seamless integration of audio, video and typography. Kudos to Benjamin Guedj and Digital Creative Boutique Watson DG. From celebrated documentarian Asif Kapadia, AMY is a powerful documentary exploring the triumphant career and tragic life of singer Amy Winehouse.
One thing that really amazes me is how much better the web has become, especially in terms of visual design. Video has become part of the tools available to communicate the desired message and enhance the user's experience. The work that Kyson Dana and Garth Pratt put together for the SolarCity Recruiting Website is a great example. Beautiful imagery, appealing video loops. Founded in 2006 by the Rive Brothers and with Elon Musk as the Chairman, SolarCity has since grown to become America’s largest solar provider with more than 12,000 employees.
With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype.