Realistic Water Drop Card Effects: HTML and CSS Tutorial @rayen-code

Rayen

Adding creative and eye-catching effects to your website can make it stand out from the crowd. One such effect that's gaining popularity is the realistic water drop card effect. In this tutorial, we'll guide you through the process of creating this captivating effect using HTML and CSS. Enhance your web design skills and give your website a touch of realism with this stunning design element.




Step 1: HTML Markup:

Start by setting up the HTML structure for your water drop card.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Water Drop Effects</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    
      <div class="water">
        <i class="fa-solid fa-droplet"></i>
        <h1>Droplet</h1>
        <a href="#">view more</a>
      </div>

  </body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
  min-height: 100vh;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --color: hsl(171, 82%, 45%)
}

.water {
  position: relative;
  width: 350px;
  aspect-ratio: 1;
  box-shadow: inset 20px 20px 20px #0001,
  inset -20px -20px 25px #ffffffe5,
  25px 25px 25px #0000000a,
  25px 25px 30px #0000000a;

  border-radius:59% 41% 56% 44% / 58% 52% 48% 42% ;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 0.5s;
}
.water:hover {
  border-radius: 50%;
}
.water::before {
  content: "";
  position: absolute;
  width: 85px;
  height: 20px;
  background: white;
  left: 70px;
  top: 50px;
  border-radius: 50%;
  rotate: -30deg;
  transition: 0.5s;
}
.water::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 10px;
  background: white;
  left: 115px;
  top: 70px;
  border-radius: 50%;
  rotate: -30deg;
  transition: 0.5s;
}
.water:hover::before {
  left: 65px;
  top: 45px;
}
.water:hover::after {
  left: 110px;
  top: 65px;
}
.water i {
  font-size: 4rem;
  color: var(--color);
}
.water h1 {
  color: var(--color);
  margin: 20px 0;
}
.water a {
  background: var(--color);
  text-decoration: none;
  color: white;
  border-radius: 30px;
  padding: 12px 20px;
  font-weight: bold;
  position: relative;
  transition: 0.5s;
  opacity: 0.7;
}
.water a:hover {
  opacity: 1;
}
.water a::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 66%;
  background: white;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

You can customize the card's size, colors, animation speed, and other properties to match your website's design. Experiment with different drop animations and styles to achieve the desired water drop effect.


Congratulations! You've successfully created a realistic water drop card effect using HTML and CSS. This effect can add a touch of interactivity and realism to your website, making it more engaging for visitors.

Feel free to implement this water drop card effect on sections of your website that you want to highlight or make more interactive. The skills you've gained from this tutorial will enable you to create visually stunning web designs.

0 Comments