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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay