DEV Community

Cover image for Dev Easter
Matt Ryan
Matt Ryan

Posted on • Edited on

Dev Easter

Inspiration

Since the first Dev community challenge ends on Easter, I decided to make my CSS art submission on theme. So I made an Easter egg sitting in an Dev-branded egg cup. It also just so happens that boiled eggs are one of my favorite snacks.

The egg pattern is based on Pysanky. Pysanky are traditional Ukrainian Easter eggs, decorated i intricate patterns and symbols.

Demo

Journey

The project began with the simple goal of creating an Easter egg design. I wanted to use CSS properties like border-radius and pseudo-elements to craft geometric patterns and shapes on the egg.

Here is what an egg looks like in CSS:

.egg {
  position: relative;
  width: 150px;
  height: 200px;
  background-color: yellow;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 2px solid black;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

By manipulating manipulate the ::before and ::after pseudo-elements to add multiple decorative elements and to use gradients to create textures. Positioning each element required a fine balance between absolute and relative positioning, while ensuring the z-index was properly managed to maintain the visual stack order.

I added two rows of circles by utilizing the flex and position properties.

.circle {
  width: 15px;
  height: 15px;
  background-color: green;
  border-radius: 50%;
  margin: 0 5px;
  border: 1px solid black;
}

.circles-row1 {
  position: absolute;
  width: 100%;
  top: 30.8%;
  display: flex;
  justify-content: center;
}

.circles-row2 {
  position: absolute;
  width: 100%;
  top: 60.5%;
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

I tried using flex to create the triangles, but ended up using transform and position, and created over 30 divs. Not ideal but it worked.

#triangle1 {
  border-bottom: 40px solid red;
  top: 10%;
  left: 50%;
  transform: translateX(-75%);
}

#triangle2 {
  border-bottom: 40px solid black;
  top: 10%;
  left: 44%;
  transform: rotate(180deg);
}
Enter fullscreen mode Exit fullscreen mode

One of the more challenging aspects was attempting to create a wave pattern using CSS gradients. Despite the initial attempt not rendering as intended, it taught me the value of iteration and flexibility in design. Subsequently, I chose to create a simpler but more predictable row of half-circles along the top of the egg.

.half-circle-top {
  position: absolute;
  bottom: 0;
  width: 25px;
  height: 25px;
  background-color: black;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

.half-circle-container-top {
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.half-circle-top:nth-child(1) {
  left: 25%;
  transform: translateX(-50%) translateY(83%);
}

.half-circle-top:nth-child(2) {
  left: 50%;
  transform: translateX(-50%) translateY(40%);
}

.half-circle-top:nth-child(3) {
  left: 75%;
  transform: translateX(-50%) translateY(83%);
}
Enter fullscreen mode Exit fullscreen mode

Adding the egg cup to the design required careful consideration of the egg's shape and the shadows, which I created using box-shadow to give the cup depth and realism. I added the DEV logo to make it look like the egg cup was bought on the DEV Store. 😉

.egg-cup {
  width: 115px;
  height: 80px;
  background-color: ivory;
  border-radius: 0 0 30px 30px;
  margin-top: -20px;
  position: relative;
  border: 1px solid black;
}

.egg-cup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background-color: ivory;
  border-radius: 5px;
  border: 1px solid black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.egg-cup-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: auto;
  z-index: 10;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
jess profile image
Jess Lee

This is very fun 🐰

Collapse
 
mattryanmtl profile image
Matt Ryan

Thank you!