Getting Started with Microcontrollers: A Beginner's Guide

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!