I Want a New Rubber Duck

“I need a new duck.
One that will not steal a beer.
One that will not stick his invoice in my mail.
One which is aware of the duck stops right here.”
Bizarre Al “I need a new Duck.”

Final month I made a TV and Ghost utilizing CSS. I wished to construct on that, and do extra monsters motion pictures on TV, however simply did not have the time.

Now I’ll attempt one other collection with the Developer’s favourite buddy a rubber duck. Rubber ducking is the method of speaking out loud about your code while you’re caught.

The speculation is explaining one thing out loud will make you shift perspective and take into consideration the issue otherwise, that may aid you get unstuck.

This works if speaking to an individual or an object. Coding lore is that it was accomplished to a rubber duck, thus the time period rubber ducking.

Framing the Duck

There’s an outer body div inside that’s the topic div. The topic div holds the particular character for this train, on this case a duck. It has a category of duck_body.

<div class="flex-container">
 <div class="most important">
  <div class="outer_frame">
    <div class="topic">
        <div class="duck_body"></div>   
    </div>
  </div>
 </div>
</div>

.outer_frame {
  width: 600px;
  top: 400px;
  border: 4px white stable;
  show: flex;
  justify-content: heart;
  align-items: heart; 
  flex-direction: row;
  background-color: var(--Water);
  border-radius: 10% / 50%;
}


.topic {
  show: flex;
  justify-content: heart;
  place: absolute; 
  overflow: seen;
  margin-top: -44px;

}

Duck Physique

The duck’s physique is an arch. Arches are made y modifying rectangles. I performed with the border-radii until it seemed type of like a duck swimming or sitting down. Most rubber geese do not have ft and are flat bottomed, higher for them to sit down on a desk.

Flat-bottomed geese you make the coding world go spherical.

.duck_body {
  width: 200px;
  top: 190px;
  background: var(--Yellow);
  border: 2px stable var(--Black);
  border-radius: 80% 80% 30% 30%;
  margin-top: 25px;
  justify-content: heart;
  place: absolute; 
}

Duck Wings

The wing is one other arch however the flatter ends are on the fitting aspect and the curve is on the left. So the border-radius on the fitting high and backside are smaller that ones the left aspect.

In CSS you code aspect in a clockwise course. The order is High-left, High-right, bottom-right, bottom-left. You may write them on separate strains or use the shorthand.

The good distance is wordier however faster to know if you end up first studying by the code. I am going to use the shorthand for the remainder of the article.

.duck_wing {
  border-top-left-radius: 80%;
  border-top-right-radius: 30%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 80%;
}

is identical as. They offer the identical curves to the form.

.duck_wing {
  border-radius: 80% 30% 30% 80%;
}

Duck’s Head

The top is only a circle with a border. Now if the border goes all the way in which across the circle it appears to be like like a circle form and never a duck head. The shapes should be related.

border: 2px stable var(--Black);

By altering one aspect of the border to the identical background shade of the duck’s physique and head, it visually connects the 2 components. I later went again and adjusted the wing similarly.

border-left-color: var(--Yellow);

That is higher however the define of the neck is off. The duck’s head must be rotated to the fitting place. Rework and rotate are used to show the circle until it appears to be like higher.

remodel: rotate(-33deg);

Eyes and Invoice

The attention is a white circle with a black circle for the pupil. The invoice is an extended skinny oval with a line within the heart.

.eye {
  width: 34px;
  top: 34px;
  background: var(--White);
  border-radius: 50%;
  border: 2px stable var(--Black);
  margin-left: 51px;
  margin-top: -20px;
  show: flex;
  justify-content: heart;
  align-items: heart;
  }

  .pupil {
  width: 14px;
  top: 14px;
  background: var(--Black);
  border-radius: 50%;
  margin-left: 5px;
}

.duck_bill {
  width: 80px;
  top: 27px;
  background: var(--Orange);
  border: 2px stable var(--Black);
  border-radius: 30% 80% 80% 30%;
  margin-left: 290px;
  margin-top: 25px;
  place: absolute;
  show: flex;
  justify-content: finish;
  align-items: heart;
}

.line {
  width: 40px;
  top: 2px;
  background: var(--Black);
}

Ultimate Model (for now)

Wrap up

This was an pleasing challenge. I appreciated taking part in with the border-radii to get completely different shapes. it I feel I have to play with the physique and wing sizes somewhat extra. And perhaps do one thing else with the body for the picture.

As soon as the form is correct, I am going to attempt different shade schemes for the extra geese.

UPDATE: Whereas this submit was in draft, I up to date the duck some. You may see slight adjustments to its physique form and wings within the ultimate photos. Like many tasks I am nonetheless discovering issues to vary.

Offered to YouTube by VolcanoI Need a New Duck · “Bizarre Al” YankovicDare To Be Silly℗ 1985 Volcano Leisure, III, L.L.C.Launched on: 1985-06-18Produce…

youtube.com

- $JarvisScript git push