Water Drop using CSS

A source code post for creating water drop using CSS effect
water drop using html css

Today we are going to make a water drop effect using simple HTML and CSS.

Paste this in HTML file

<div>
</div>

Paste this CSS code in the style.css file

body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
background:#eee;
font-family: 'Nunito', sans-serif;
}
div{
height:200px;
width:200px;
background:#fff;
box-shadow:inset 10px 10px 10px rgba(0,0,0,0.05),
           15px 25px 10px rgba(0,0,0,0.05),
           15px 20px 20px rgba(0,0,0,0.05),
           -10px -10px 15px rgba(255,255,255,0.9);
border-radius:50%;
position:relative;
top:170px;
background:#eee;
}
div:before{
content:'';
position:absolute;
top:60px;
left:30px;
height:25px;
width:25px;
border-radius:50%;
background:#fff;
}
div:after{
content:'';
position:absolute;
top:35px;
left:50px;
height:15px;
width:15px;
border-radius:50%;
background:#fff;
}
p{
position:absolute;
padding:10px;
text-align:center;
width:50px;
font-size:17px;
color:gray;
top:195px;
left:140px;
}

Thank You!

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
Interest Calculator using c++

Interest Calculator using C++

Next Post
Best Web Accessibility Tools

Best Web Accessibility Tools as Developer

Related Posts
Total
0
Share