Water Drop Effect in HTML & CSS

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

HTML for Webkit and Chrome

abduzeedo's picture
Abduzeedo Editor

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials.

Sponsored Ads

RAWZ

Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple