Facebook SDK

Dropmorphism using HTML and CSS

Hello Coders, In this article we are going to learn how to create water drops or you can also call it Dropmorphism using HTML and CSS.

You might have seen water drops in real world but there is no code written for it right? lol. So today we are going to create water drops using html and css. People also call it Dropmorphism. Both of these water drops you are seeing above will be created using pure css.

Q : How to create dropmorphism or water drops with html and css?
I have given a step by step video tutorial as well all the source code required to help you create this dropmorphism effect using html and css.

Dropmorphism or Water drops using HTML and CSS | Video Tutorial

In the video above, I have shown how to build this step by step. If you are beginner and its hard for you to understand what I am saying. Please Consider watching the video tutorial.

Dropmorphism or Water drops with HTML and CSS | Source Code

Here I have provided both html and css code. You can also download the complete source code by clicking on the download button at the bottom of this article.

How do I create Water drops in HTML? HTML Source Code
Create an index.html file and Copy the below code which contains boiler plate of an html document like html, head, title, body tags. And also all the html code required for this project.

HTML Code : Create a div tag with class 'c' and add two divs with class 'drop'. Give 'drop1' as class name for first one and 'drop2' as class name for second one. Also add some text as shown below.

How do I create Water drops in CSS? CSS Source Code
To create water drops, create css file styles.css and link it out html document inside the head section. Start typing the below css code and as you type observe the changes it makes.

CSS Code : We will be using a custom font from the google font i.e Montserrat. I have also provided the import code for that font in the below css code.

This is what you will get. Really cool looking 2 Water drops.

Dropmorphism using HTML and CSS

Thank you for reading this article.

Credits: Pratham

Download Source Code of Dropmorphism | Click on the below download button to directly download the source codes.

Post a Comment

Previous Post Next Post