DEV Community

loading...
Cover image for CSS Battle #5 - Acid Rain

CSS Battle #5 - Acid Rain

pheeria profile image Olzhas Askar Updated on ・3 min read

Well, this one is pretty easy. Actually, I solved it first the naïve way and it came much later to me, that I could also use the box-shadow. But we have already used box-shadow twice. So let's add something more.

1. Z-Index

The naïve way is to use an outer div, centered with margins, or if don't want to pollute the markup, use the padding for the same goals. Every div placed inside of it shall have the same width and height and, here comes the interesting part, position: absolute;. This will not only an easier positioning with margins relative to the outer div, but also the usage of z-index. We pile up the shapes as in the task and set up border-radius.

<div id="o">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</div>
<style>
  body {
    margin: 0;
    background: #0B2429;
  }
  #o {
    margin: 30px 80px;
    width: 250px;
    height: 240px;
  }
  #o div {
    width: 120px;
    height: 120px;
    position: absolute;
  }
  #a {
    z-index: 1;
    margin: 0px 120px;
    background: #F3AC3C;
    border-radius: 60px;
  }
  #b {
    z-index: 2;
    margin: 60px 60px;
    background: #998235;
    border-radius: 60px 0px 60px 60px;
  }
  #c {
    z-index: 3;
    margin: 120px 0px;
    background: #F3AC3C;
    border-radius: 60px 0px 60px 60px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

2. Box Shadow

This one is inspired by the shortest solution of the very first battle. We make two divs, one of them will be a circle. The second one has a squared border on one side and a box shadow. No need for z-index, because every next box-shadow is placed behind the previous. Five values, two mandatory ones for X and Y offsets, Blur, spread, and the color. By now you should have somehow realized what you gotta do. This is really the main part of the solution, other things like cascading, overwriting and nth-of-type() are nothing more than an attempt to reduce the amount of code in a "smart" way.

<div></div>
<div></div>

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

div {
  width: 120px;
  height: 120px;
  margin: 30px 192px;
  border-radius: 60px;
  background: #F3AC3C;
}

div:nth-of-type(2) {
  margin: -30px 72px;
  box-shadow: 60px -60px #998235;
  border-radius: 60px 0 60px 60px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

3. Sixty

Just for the sake of trying out something new and noticing quite a relationship of all of the values to sixty, I decided why not. We don't need SASS, we need much less – custom properties. We define a property --sixty and place to the wildcard so that it is available through cascading. Then we do some calc() magic and the rest is the same as above.

<div></div>
<div></div>

<style>
* {
  background: #0B2429;
  --sixty: 60px;
}

div {
  width: calc(2 * var(--sixty));
  height: calc(2 * var(--sixty));
  margin: calc(0.5 * var(--sixty)) calc(3 * var(--sixty) + 0.2 * var(--sixty));
  border-radius: var(--sixty);
  background: #F3AC3C;
}

div:nth-of-type(2) {
  margin: calc(-0.5 * var(--sixty)) calc(var(--sixty) + 0.2 * var(--sixty));
  box-shadow: var(--sixty) calc(-1 * var(--sixty)) #998235;
  border-radius: var(--sixty) 0 var(--sixty) var(--sixty);
}
</style>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

pic
Editor guide
Collapse
nirajn profile image
Niraj Nandish

Hey, I recently started doing CSS Battle as I sometimes feel doubtful of my knowledge of CSS and it also gave me a chance to practice how much of CSS I know and reinforce it. Anyways wanted to say this an amazing series you have here, I make sure I try out the different methods you put in case I didn't think of them.

Today while doing Acid Rain I saw that you didn't use ::after and ::before for this one so thought of solving the challenge using them and I did it. Here's the code incase you are interested and for others who come here:

<div></div>
<style>
  * {
    margin: 0;
    background: #0B2429;
  }
  div, div::before, div::after {
    display: inline-block;
    width: 120px;
    height: 120px;
    background: #F3AC3C;
    margin: 30 200;
    border-radius: 50%;
    content: "";
  }
  div::before {
    margin: 60 -60;
    background: #998235;
    border-radius: 50% 0 50% 50%;
  }
  div::after {
    margin: 0 -120;
    border-radius: 50% 0 50% 50%;
  }
</style>
Enter fullscreen mode Exit fullscreen mode