DEV Community

Cover image for CSS Battle #7 - Leafy Trail
Olzhas Askar
Olzhas Askar

Posted on

CSS Battle #7 - Leafy Trail

Here is the seventh one. Half of the challenges are behind. This one is the first to reuse the colors of the previous task, number five, to be precise. Anyways, I really like the composition of the colors used throughout the battles and hope one day to be cool with colors.

1. Z-Index

The first solution relies on the precise placement of the divs. First we describe a common div with its width, height and border-radius and afterward, we use position: absolute to allow positioning regardless of the neighbor elements. The absolute here can be safely replaced by fixed to save some characters if you fancy. Now to stack the elements we use z-index yet again. You know, the higher the number, the more is the element on the front. And since we already defined our content box with padding: 75px on the body, our only movements will be playing around with the left margins.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

<style>
  body {
    margin: 0;
    background: #0B2429;
    padding: 75px;
  }
  div {
    width: 150px;
    height: 150px;
    border-radius: 100px 0;
    position: absolute;
  }
  #a {
    background: #1A4341;
    z-index: 1;
  }
  #b {
    background: #998235;
    z-index: 2;
    margin-left: 50px;
  }
  #c {
    background: #F3AC3C;
    z-index: 3;
    margin-left: 100px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

2. Box Shadows

If somebody will ask, what I've learned from doing the CSS battle, I'd probably respond with "Box Shadows". This single technique keeps appearing throughout the challenges, often resulting in shorter solutions. And mostly these solutions also appear more idiomatic to me personally.
Here again, we use box shadows. The only gotcha here is that each subsequent shadow is placed behind the previous one, so to achieve the wanted appearance we should start with the rightmost leaf.
Notice how some of the values are defined with vh and vw - that is to save the battle characters. In the end, 50vh is one character shorter than 150px and doing this trick 4 times in our case, we save 4 characters.

<div></div>

<style>
* {
    background: #0B2429;
}

div {
    background: #F3AC3C;
    width: 50vh;
    height: 50vh;
    border-radius: 25vw 0;
    margin: 75px 167px;
    box-shadow: -50px 0 #998235, -25vw 0 #1A4341;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Which one of these solutions would you prefer? Do you know any others?

Top comments (4)

Collapse
 
kiranojhanp profile image
kiranojhanp

My solution

<div></div>
<style>
  body {
    background: #0B2429;
    display: grid;
    place-items: center;
  }
  div,div::before,div::after {
    display: inline-block;
    width: 150px;
    height: 150px;
    background: #998235;
    border-radius: 100px 0;
    content: '';
    position: absolute;
  }
  div::before {
    margin: 0 -50;
    background: #1A4341;
    z-index: -1;
  }
  div::after {
    margin: 0 50;
    background: #F3AC3C;
  }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
khacho_abram profile image
Khachatur Abramian

I just modify your first code:

body {
margin: 0;
background: #0B2429;
padding: 75px;
}
div {
width: 150px;
height: 150px;
border-radius: 100px 0;
position: absolute;
}
#a {
background: #1A4341;
}
#b {
background: #998235;
left: 125px;
}
#c {
background: #F3AC3C;
left: 175px;
}

Collapse
 
khacho_abram profile image
Khachatur Abramian

also works if cut the margin:0;
and change padding to 67px;

Collapse
 
khacho_abram profile image
Khachatur Abramian

in first example it was good idea using padding
in second the use of asterisk
i will keep in mind this ideas to make shorter my code.