0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
2 minute read
No comments

Dark Mode Duck and other CSS Ducks.

Spencer Grover
November 17, 2023
dark-mode-duck-and-other-css-ducks.
Total
0
Shares
0
0
0

“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%.

rubber duck

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. 

    class="duck_body darkmode">         
         class="duck_head darkmode">
           class="eye">
             class="pupil">
class="duck_bill"> class="line">
class="duck_wing darkmode">

Dark Mode Duck

A black and gray rubber 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.

A Pink rubber duck 

  --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.

a black and white rubber duck. matches the coloration of a penguin.

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.

a tan and brown rubber duck.

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?

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
analysts-are-personas-too:-best-practices-to-develop-your-analyst-relations-strategy

Analysts are personas too: Best practices to develop your analyst relations strategy

November 17, 2023
Next Post
javascript-from-0-to-mastery-(if-you-ask-me)

JavaScript From 0 to Mastery (if you ask me)

November 17, 2023
Related Posts