The new Star Wars series Andor introduced us to a new droid, B2EMO or Bee. We haven't seen too much of Bee yet. I wanted to make the new droid with CSS and HTML.
There's not a lot of images or products of him yet but I found a few online. In CSS terms this is a simple set of stacking rectangles.
FRAME
The frame is a large div with a white border. Inside the frame are the divs that make the droid's body.
<body>
<div class="flex-container">
<div class="main">
<div class="outer_frame">
<div class="droid"> </div>
</div>
</div>
</div>
</body>
.flex-container > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
background: var(--Black);
justify-content: center;
align-items: center;
position: relative;
}
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.outer_frame {
width: 950px;
height: 330px;
border: 4px white solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: #333;
}
BODY
The red is the outer shell which expands and contracts the gray is his interior. I called the outer shell, plates and the insides are I named insides.
The top is trapezoid with the same colors as a plate. CSS trapezoids are made out of a square built using borders. Three sides are transparent and the side you want to show has a color.
<div class="droid">
<div class="top"></div>
<div class="inside"></div>
<div class="plates torso1"></div>
<div class="inside2"></div>
<div class="plates torso2"></div>
<div class="inside2"> </div>
<div class="plates bottom"></div>
</div>
.top {
border-bottom: 35px solid var(--DarkRed);
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
filter: drop-shadow(0 0 .5rem black);
border-radius: 4%;
}
.inside {
background: linear-gradient(to right,
var(--Gray) 33%,
var(--DarkGray)
);
height: 36px;
width: 160px;
border-bottom: 2px solid var(--DarkGray);
border-right: 1px solid var(--DarkGray);
border-left: 1px solid var(--DarkGray);
margin-left: 20px;
z-index: 11;
}
.inside2 {
background: linear-gradient(to right,
var(--Gray) 33%,
var(--DarkGray)
);
height: 10px;
width: 160px;
border: 2px solid var(--DarkGray);
margin-left: 20px;
}
The body is made of rectangles. alternating between plate divs and insides divs. The feet are more rectangles.
Wrap up
This was a quick build to see if I could make something that was just released. The show first streamed a week ago so I feel good that I made something in a short time.
-$JarvisScript git push
Top comments (1)
Haha! YESSS... lovin' Andor and B2EMO is already a fave. I really hope they find a way to get K-2SO (hilarious droid from Rogue One) into the show.