Menu

Microcontrollers
By Admin June 15, 2023 5 Comments 8 min read
Electronics

Creating a Mini Happy Baby Girl with Pure CSS

In this tutorial, we'll create a cute animated baby girl character using only HTML and CSS. This is a great exercise to learn about CSS positioning, animations, and creative styling techniques.

The HTML Structure

Our character is built with simple div elements that we'll style to look like a baby:

<div class="scene">
  <div class="character">
    <!-- Hair -->
    <div class="hair back-hair"></div>
    <div class="hair front-hair-right"></div>
    <div class="hair front-hair-left"></div>

    <!-- Head -->
    <div class="head">
      <div class="face">
        <div class="eyes">
          <div class="eye left-eye"></div>
          <div class="eye right-eye"></div>
        </div>
        <div class="mouth"></div>
      </div>
    </div>

    <!-- Body and limbs -->
    <div class="body"></div>
    <div class="arm left-arm"></div>
    <div class="arm right-arm"></div>
    <div class="leg left-leg"></div>
    <div class="leg right-leg"></div>
  </div>
</div>

The CSS Styling

The magic happens in the CSS. Let's break down the key components:

1. Setting Up the Scene

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff0f5, #ffd1e3);
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 150px;
  height: 250px;
}

.character {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

2. Creating the Head

.head {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: #ffe8cc;
  border-radius: 50%;
  border: 1px solid #ffb6c1;
  z-index: 10;
}

.eyes {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.eye {
  width: 15px;
  height: 15px;
  background: transparent;
  border-bottom: 2px solid #555;
  border-radius: 0 0 50% 50%;
}

.mouth {
  position: absolute;
  width: 20px;
  height: 15px;
  border-bottom: 2px solid #ff6f6f;
  border-radius: 0 0 50% 50%;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
}

3. Styling the Hair

.hair {
  position: absolute;
  background: #ffb6c1;
  z-index: 5;
  border: 1.5px solid #ffb6c1;
}

.back-hair {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 0 0;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.front-hair-left {
  width: 50px;
  height: 25px;
  border-radius: 100% 0 100% 0;
  border-bottom: 1.5px solid #ffb6c1;
  top: 20px;
  left: 37px;
  z-index: 11;
}

.front-hair-right {
  width: 50px;
  height: 25px;
  border-radius: 0 100% 0 100%;
  border-bottom: 1.5px solid #ffb6c1;
  top: 20px;
  right: 37px;
  z-index: 11;
}

4. Body and Limbs

.body {
  position: absolute;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 120px solid #ffb6c1;
  z-index: 8;
}

.arm {
  position: absolute;
  background: #ffb6c1;
  width: 40px;
  height: 2px;
  z-index: 7;
}

.left-arm {
  top: 110px;
  left: 20px;
  transform: rotate(15deg);
}

.right-arm {
  top: 110px;
  right: 20px;
  transform: rotate(-15deg);
}

.leg {
  position: absolute;
  background: #ffb6c1;
  width: 40px;
  height: 2px;
  bottom: 50px;
  transform-origin: top center;
}

.left-leg {
  left: 40px;
  transform: rotate(90deg);
}

.right-leg {
  right: 40px;
  transform: rotate(90deg);
}

How It Works

  • We use absolute positioning to layer all the elements
  • The character is animated with a simple floating effect using CSS keyframes
  • We create shapes using border-radius and clever border techniques
  • Z-index controls the stacking order of elements

Try It Yourself!

Check out the live demo below and experiment with the code:

Feel free to modify the colors, sizes, or animation to create your own version!

Author

Rahul Sharma

Electronics engineer with 8 years of experience in embedded systems design. Passionate about teaching microcontroller programming and circuit design.

Comments (5)

User
Priya Patel
June 16, 2023

Great introduction to microcontrollers! The examples are very clear and helpful for beginners like me. I was able to get my first LED blinking project working following this guide.

User
Amit Kumar
June 17, 2023

Nice article! Could you recommend some resources for learning more about ARM Cortex-M microcontrollers? I'm particularly interested in the STM32 series.

Author
Rahul Sharma (Author)
June 17, 2023

Hi Amit, I recommend starting with the official STM32 documentation and the book "Mastering STM32" by Carmine Noviello. Also check out the STM32CubeIDE which provides helpful examples.

User
Neha Gupta
June 18, 2023

This is exactly what I needed to start my electronics project. The comparison between different microcontroller families is particularly helpful. Looking forward to more articles like this!

Leave a Comment