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 Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

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