Dev Easter

#frontendchallenge #devchallenge #css

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

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

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);
}

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%);
}

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