Hi, It’s the yuletide season once again, so Akin and Molen from the aptLearn engineering and technical writing team couldn’t think of a more timely gift for aptLearners than creating an aptLearn Santa from scratch with HTML and CSS.

We hope this simple project spurs you to recreate and try your hands at more projects in the forthcoming year; you can also view beautiful Codepens created by other aptLearners here. Follow along with this stepwise explanation of how we made aptLearn Santa.

Section 1: Creating the HTML foundation for the aptLearn Santa.

Let’s begin with a body tag that will nest all our project’s HTML elements. Thereafter, open a series of div for the different parts of Santa’s outfit:

<div class="cartoon drawing">
  <div class="leg one"></div>
  <div class="leg two"></div>
  <div class="hands r"></div>
  <div class="arm"></div>
  <div class="body">
    <div class="belt"></div>
    <div class="suitbuttons r"></div>
  </div>

Next, we would open another set of divs for Santa’s face. Here we create separate classes for the beard, cheeks, eyes, etc, to make it easier to apply CSS later:

<div class="longbeard"></div>
  <div class="face r"></div>
  <div class="mustacheleft"></div>
  <div class="mustacheright"></div>
  <div class="cheeks r"></div>
  <div class="eyes r"></div>
  <div class="hat one drawing"></div>
</div>

Section 2: Adding style to our HTML using CSS.

We would start by customising the div class cartoon. In the code below, notice how we create CSS custom properties using “- -“. One unique thing about this property is that it allows us to link the value of a CSS property with another one. You would see how this is done later. For now, let’s see what the latest addition to our CSS looks like :

.cartoon {
  --skin: #FFCCAA;
  --beard: #efefef;
  --eyes: #630;
  --cheeks: #f002;
  --belt: #121;
  --belt-buckle: yellow;
  --suit: #a00;
}

body{
    background: #0f885f;
}

.cartoon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

Transform: translate is a CSS property that allows you to move the cartoon element in a 2D direction on the x and y-axis. vmin is a viewport unit that describes the minimum value of an element relative to the viewport.

Study each line of code and ensure you understand what it does. For clarity, you can play with the code within the aptLearn playground by deleting each line and adding them back.

Now, let’s move on to the next part. This involves styling the next set of elements which includes the canvas, hat, etc:

canvas{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.b {
  border: 0.5vmin solid;
}

.r {
  border-radius: 100%;
}
.drawing::before,
.one::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.two::after{
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

The ::before and ::after pseudo-elements in CSS allow you to add content onto a page without it needing to be in the HTML. In this case, .one and .two are elements not represented in the HTML DOM that we’ve styled with CSS.

For the next bit, we set the value of a custom property with another property. E.g we equate the background of Santa’s face with Santa’s skin( in essence, #ffccaa). Also, we would employ the transform-translate properties again.

.face {
width: 25%;
height: 25%;
background: var(--skin);
top: 10%;
left: 50%;
transform: translate(-50%, 0);
}

.longbeard {
width: 30%;
height: 40%;
background: var(--beard);
top: 10%;
left: 50%;
transform: translate(-50%, 0);
border-radius: 100% / 120% 120% 80% 80%;
}

.mustacheleft,.mustacheright {
width: 10%;
height: 10%;
background: #fff;
border-radius: 100% 20% 100% 0;
top: 31%;
left: 51%;
transform-origin: top right;
transform: translate(-100%, 0) rotate(25deg);
}

.mustacheleft {
left: 49%;
border-radius: 20% 100% 0 100%;
transform-origin: top left;
transform: rotate(-25deg);
}

For the next bit, see the below code:

.eyes {
  width: 2%;
  height: 2%;
  background: var(--eyes);
  top: 23%;
  left: 45%;
  box-shadow: 6.66vmin 0 var(--eyes);
}

.cheeks {
  width: 5%;
  height: 3%;
  background: var(--cheeks);
  top: 25.5%;
  left: 43%;
  box-shadow: 7.25vmin 0 var(--cheeks);
}

Then, let’s style other body parts. CSS gradients used helped achieve smooth transitions between two or more specified colours.

.body {
  width: 45%;
  height: 50%;
  background: var(--suit);
  border-radius: 100% / 150% 150% 25% 25%;
  top: 35%;
  left: 50%;
  transform: translate(-50%, 0);
  background-image:
    radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 0 83%, transparent 0),
    linear-gradient(to right, transparent 42%, white 43% 57%, transparent 58%)
}

.arm {
  width: 60%;
  height: 40%;
  background: #a00;
  border-radius: 100% / 170% 170% 25% 25%;
  top: 37%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: inset 0 0 0 10vmin #0002;
  background-image: linear-gradient(transparent 20%, #0003)
}

Let’s get onto styling the belt, suit buttons and hat:

.belt {
  width: 20%;
  height: 15%;
  border: 1vmin solid var(--belt-buckle);
  border-radius: 1vmin;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--belt-buckle);
  box-shadow: inset 1vmin 0 0 1.75vmin var(--belt);
}
.suitbuttons {
width: 5%;
height: 5%;
background: var(--belt);
color: var(--belt);
top: 33%;
left: 50%;
transform: translate(-50%, 0);
box-shadow:
0 5vmin, 0 10vmin 0 0.1vmin, 0 22vmin;
opacity: 0.75;
}
.hat {
width: 23%;
height: 20%;
background: var(--suit);
border-radius: 100% 20% 0 0;
top: -2%;
left: 50%;
transform: translate(-50%, 0) rotate(1deg);
}

For the definition, we explore more customisation for aptLearn’s Santa’s hat:

.hat::before {
  width: 110%;
  height: 40%;
  border-radius: 100% / 50%;
  bottom: -17%;
  left: -5%;
  box-shadow: inset 0 4vmin white;
  transform: rotate(-2deg);
}

.hat::after {
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  background: var(--beard);
  right: -5vmin;
  top: -15%;
}

So far, we have completed most parts of this project with just HTML and CSS. Let’s put together the final piece of the puzzle. See below:

.hands {
  width: 13%;
  height: 13%;
  background: var(--belt);
  top: 70%;
  left: 18%;
  box-shadow: 41vmin 0 var(--belt);
}

.leg {
  width: 19%;
  height: 25%;
  background: var(--suit);
  transform: skew(2deg);
  top: 75%;
  left: 29%;
  background-image: 
    linear-gradient(#0002, transparent 70%, var(--belt) 0);
}

.leg + .leg {
  left : 52%;
}

.leg::after {
  width: 110%;
  height: 20%;
  background: black;
  bottom: 0;
  left: -6%;
  border-radius: 10vmin 10vmin 0 0;
}

.leg + .leg::after {
  left: -4%;
}

Have look at the entire source code on the aptLearn playground, and make sure to run the below code. Also, If you are interested in JavaScript, I have included it in the playground code. We will love to see you recreate this project. You can tag Akin on Twitter @kynsofficial when you achieve this.

aptLearn wishes you a festive Celebration!

Merry Christmas!