Dark Mode Duck and other CSS Ducks.

"DarkMode Duck, let's git superfluous."

Last week I made a Rubber Duck using CSS and HTML. Here are a few more CSS Ducks. See I want a new Rubber Duck for more details.

The body was modified a little bit. I tweaked the shape b changing the curve on the bottom front from border-bottom-right-radius: 30% to border-bottom-right-radius: 40%.

HTML is same

These Ducks use the same HTML a the initial Rubber Duck post. I'm just changing the Class for each duck. Below I added the darkmode class for this Dark Mode Duck.

   <div class="duck_body darkmode">         
        <div class="duck_head darkmode">
          <div class="eye">
            <div class="pupil"></div>
          </div>
        </div>
  </div>

  <div class="duck_bill"><div class="line"></div></div>
  <div class="duck_wing darkmode"></div>         

Dark Mode Duck

Dark Mode CSS. Dark Mode is basically a gray duck with a white border.

.darkmode {
  background: var(--DarkGray);
  border: 2px solid var(--White);
}

.duck_wing{
  border-right-color: var(--DarkGray);
}

.duck_head {
    border-left-color: var(--DarkGray);
}

Barbie Mode

Yep it's time to see Pink. This is a brighter color pallet that I usually work with but it fits the Barbie theme. I even tried to find the official barbie CSS Pink. It's suggested that it is #EC4399. I didn't find an style guide just a few sites that color picked from the Barbie sites and listed the pantone color.

  --barbiePink: #EC4399;
  --barbieAccent: #F7B9D7;


.barbie_mode {
  background: var(--barbiePink);
  border: 2px solid var(--barbieAccent);

}

.duck_wing{
  border-right-color: var(--barbiePink);
}

.duck_head {
    border-left-color: var(--barbiePink);
}

.duck_bill {
  width: 80px;
  height: 27px;
  background: #ED5C9B;
  border: 2px solid var(--barbieAccent);
}

.barbie_line {
  background: var(--barbieAccent);
}

Penguin

Can you rubber duck with a Penguin? Sure.

Here gradients are used to change the colors from black to white. On the body the color changes from the top down. For the wing the to right modifier is used to change the direction of the gradient flow.
The penguin's bill also had gradient DarkGray to Orange, top to bottom.

.penguin_mode{
  background: linear-gradient(
      var(--Black) 45%,
      var(--White)
    );
}

.penguin_mode_wing{
  background: 
linear-gradient(to right,
      var(--White) 33%,
      var(--Black)
    );
}

.penguin_mode_head{
  background: 
      var(--Black);
}
.penguin_bill{
  width: 80px;
  height: 27px;
  background: linear-gradient(
      var(--DarkGray) 30%,
      var(--Orange)
    );
  border: 2px solid var(--Black);
}

.duck_head {
  border: 2px solid var(--Black);
}

Porg Mode

The little birds from Star Wars. Porgs are brown, tan and white. A drop shadow was used around he eye to recreate that look of the birds.

Porgs don't have bills or beaks, just mouths. But the duck looked weird without a bill so this porg has one.

Movie Facts

The location where The Last Jedi was filmed was full of Puffin birds. Rather than moving the real birds they covered them up digitally with Porgs.

They also used puppets for some scenes but many Porgs in the movie are covering up real birds.

.porg_mode{
  background: 
linear-gradient(
      var(--Brown) 45%,
      var(--White)
    );
}

.porg_mode_wing{
  background: var(--Brown);
}

.porg_mode_head{
  background:linear-gradient(var(--Brown), var(--White));
}

.porg_eye {
  width: 34px;
  height: 34px;
  background: var(--Black);
  border-radius: 50%;
  border: 1px solid var(--White);
  margin-left: 51px;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(-8px -4px 3px var(--Tan));
  }

Wrap up

More fun with CSS. I got to play with drop shadow and gradients again. Maybe if I do enough of these I'll remember the syntax and not have to look it every time.

Any Suggestions for other duck themes?