HTML and CSS Fish Animation Tutorial

CodeHemu
how to draw a fish using css

In this tutorial, you will learn how to draw a fish by writing code. Hello, I'm Bishal Haldar. Welcome to my tutorial. Today we'll draw a fish using HTML and CSS, without any JavaScript.

What you will learn:

  • How to draw a fish with only two <div> elements?
  • How to animate a fish tail?
  • How to use transform and box-shadow for drawing?

My confession

This fish artwork is not actually used anywhere. If you are creating a fish tank, then this fish design is for you. Just kidding đŸ˜‰.

My purpose in drawing this fish is to have fun with CSS properties. So, let's explore some new side of CSS properties.

Final result of the CSS fish:

Before you start, here's a preview of finished fish artwork. Click the button to see the following:

What you need to know to continue:

  • Basic understanding of HTML and CSS code.

Table of Contents

How to draw a fish in HTML?

First, you create an HTML file named like fish.html. Then open the file in an editor (VS Code, Cursor, etc.) or Nodepad.

Step 1: Set Up the Structure

This code includes a DOCTYPE declaration, which tells the browser that the document is HTML (not plain text).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Fish Animation</title>
    <style>
      /* CSS is here */
    </style>
  </head>
  <body>
    <!-- Elements is here -->
  </body>
</html>

Step 2: Create the Fish Structure

These two elements together form the main structure of fish. You add this code in the <body> tag.

<div class="fish">
    <div class="eye"></div>
</div>

Inside the <body> tag, you will create a <div> element with a class named fish. Then, inside this container, you will create another <div> element with a class named eye. The second element will be used to draw a fish eye.

css drow

Now let's shape and color the fish. First, you'll draw the body of the fish, then the eyes, and finally the tail. We drew the CSS pig using this same process in the previous tutorial.

Step 3: Center the fish

We are using the flexbox method to center the fish. This method aligns elements both horizontally and vertically.

How does flexbox method work? Set the display property to flex, which makes the body a flex container. Then, the justify-content and align-items properties position the element exactly in the center of the screen. Still, the fish will not be vertically centered.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7fc3ff;    
    height: 100vh;
    overflow: hidden;
}

So you need to set the body height to 100vh. This means that the body always cover the full height of the browser window.

Step 4: Shape the fish body

Here, we have shaped and colored the main body of the fish. We'll define the height and width to the same value, such as 150 pixels. Then, we rotated the body 45 degrees, which looks like the body of a pomfret fish.

.fish{
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #4d68cb 40%, #5f82ff 60%);
    transform: rotate(45deg);
    box-shadow: inset -5px -15px 0px 0px #3a55b5;
}

The linear-gradient CSS property has been used for the fish body. It's creating a mixture of two shades of blue on the fish.

Step 5: Creating the tail

Here, the fish tail is created using the :after pseudo-element.

.fish:after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 100%;
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #4058af 25%, transparent 25%);
    animation: tail 1s linear infinite;
}

No extra HTML elements are needed to create the tail. The content property is set to an empty string ("") to create the pseudo-element. The interesting part is, we set animation on the tail to make the fish look alive.

Step 6: Color one eye of the fish

You will set the border-radius CSS property to 50% to make the eye perfectly round.

.eye {
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    margin-top: 60%;
    margin-left: 8%;
    box-shadow: inset 0 0 0 8px #fff, 4px -2px 0 6px #8da6ff;
}
css fish eye

Then the box-shadow property is used to style the eye. The first shadow creates an inset white ring for depth, and the second shadow adds a subtle blue outer glow.

Step 7: Animate the tail

Here, the keyframes creates a soft movement in the fish tail.

@keyframes tail {
  0% {
    width: 150px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 150px;
  }
}

We have already set the animation duration to 1 second. So the keyframe starts at 0% (0 seconds), which is the start of the animation. At this point, the width of the tail is 150px.

When the keyframe is at 50% (0.5 seconds), which means in the middle of the animation. At this time, the width is increased to 200px.

The keyframe changes the tail width by 50px, creating the illusion of a fish tail moving.

Next step:

  • Create a swim keyframe using the translateX.
  • Create more fish of different sizes and colors.
  • Change the eye color.

Conclusion

Now, you learned how to draw a fish shape using HTML and CSS. There is no use of JavaScript, just two divs and CSS. You can easily customize fish scenes by adjusting properties like width, position, rotation, and animation timing.

So start writing code without delay and don't hesitate to read the tutorial again.

Happy Coding!

Post a Comment

0 Comments