DEV Community

Cover image for CSS B2EMO from Andor.
Chris Jarvis
Chris Jarvis

Posted on

5

CSS B2EMO from Andor.

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

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.

small droid looks like a stack of boxes.

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

Enter fullscreen mode Exit fullscreen mode
.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;
    }

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
michaeltharrington profile image
Michael Tharrington

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay