DEV Community

Cover image for Talk like a Pirate day
Chris Jarvis
Chris Jarvis

Posted on

4

Talk like a Pirate day

Avast mateys, It be Talk like a Pirate day. It's time to hoist the Jolly Roger and set sail.
But before you can hoist, or raise, a flag you have to make it with CSS.

I made a the Pirate flag with CSS. This was just a quick project when I realized what the day was so this will be a brief write up.

The Skull is made out of two modified ovals. Then I put the eye and nose sockets and teeth on top.

<div class="skull">
            <div class="upperSkull">
                <div class="eyerow">
                  <div class="eye"></div>
                  <div class="eye"></div>
                  </div>
                </div>
                  <div class="jaw">
                    <div class="tooth"></div>
                    <div class="tooth"></div>   
                    <div class="tooth"></div>
                  </div>
                <div class="nose"></div>
</div>

Enter fullscreen mode Exit fullscreen mode
  .skull {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  position: relative;
  filter: drop-shadow(0 0 0.95rem var(--DarkRed));
  }
 .upperskull {
    width: 120px;
    height: 100px;
    background: var(--White);
    border-radius: 60px 60px 15px 15px;
  }

.eyerow{
  width:120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  gap: 10px;
  margin-top: 45px;
}
  .eye {
    width: 42px;
    height: 32px;
    border-radius: 50%;
    background: #191919;
  }

  .jaw {
    background: var(--White);
    display: flex;
    flex-direction: row;
    width: 86px;
    height: 30px;
    border-radius: 6px 6px 92px 92px;
    justify-content: center;
    gap: 10px;  
  }
  .tooth {
    width: 8px;
    height: 12px;
    background: var(--Black);
    border-radius: 40%;
    margin-top: 20px;
  }
  .nose {
    height: 33px;
    width: 15px;
    border-radius: 40%;
    background: var(--Black);
    margin-top: -50px;
  }
Enter fullscreen mode Exit fullscreen mode

A pirate flag or Jolly Roger. It has a black background with a skull and two bones placed in the shape of an

The crossbones are two long rectangles with circles on each end.

            <div class="crossbones">
                <div class="bones left">
                    <div class="endsL"></div>
                    <div class="endsR"></div>
                </div>
                <div class="bones right">
                    <div class="endsL"></div>
                    <div class="endsR"></div>
                </div>
            </div>
Enter fullscreen mode Exit fullscreen mode
  .bones{
    width: 150px;
    height: 15px;
    background: var(--White);
    border-top-right-radius: 35%;
    border-top-left-radius: 35%;
    border-bottom-right-radius: 35%;
    border-bottom-left-radius: 35%;
    overflow: visible;

  }
  .endsL{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--White);
    margin-right: 85px;
    margin-top: -5px;
  }
Enter fullscreen mode Exit fullscreen mode
👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
wraith profile image
Jake Lundberg •

This be a splendid idea! Tell us, landlober, what did ye learn while makin this here pirate flag?

Collapse
 
wakywayne profile image
wakywayne •

Cool, I think the cross is uneven though. Also might be fun to make it with an SVG. If you're up for the challenge arrrg

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

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay