"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?
Top comments (0)