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.
Step 1 – Reference
First thing to do is to look for references, in this case photos of water drops effects. Google Images is a super useful resource to create mood boards and find inspiration.
Step 2 – CSS for the drops
Create your simple HTML/CSS boilerplate or download it at http://html5boilerplate.com/. After that start putting together the CSS for the drop. Below you can see the basic code with no color effects.
Step 3 – Water Drop Effect
To create the effect we will use “box-shadow” and “background”. For the background you can see below that we are using a white at 30% and a radial gradient. With shadow we will create the 3D effect. To do that we will use 3 inset shadows and 1 normal shadow. Below you can see the code.
Step 4 – Basic Javascript with jQuery to create instances
To fill the screen with
CSS
Conclusion
You can also animate some of the drops, it would be an extra step but it can be achieve quite easily using CSS animations. The whole idea was to explore the possibilies of CSS to create different effects and water drops effect was one that I had done before in Photoshop, so I thought it would be a good exercise. Now it’s up to you not only to play with it but to make it better.
Image
Click on the image to see the demo