CSS Battle #62 – Sunset

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[Narigo]

Code Source – 606.9 {426}

<div></div>
<style>
  body {
    background: #191919;
    display: grid;
    place-items: center;
  }
  div {
    background:
      radial-gradient(circle at 100% 100%, #824B20 100px, #0000 0),
      radial-gradient(circle at 0 100%, #E08027 100px, #0000 0),
      radial-gradient(circle, #FFF58F 30px, #0000 0) 0 20px,
      #F2AD43;
    width: 150px;
    height: 200px;
    border-radius: 75px 75px 20px 20px;
  }
</style>

[Narigo]

We added some psychedelic fun to this:

Code Source

<div></div>
<style>
  body {
    background: #191919;
    display: grid;
    place-items: center;
  }
  div {
    background:
      radial-gradient(circle at 100% 100%, #999 90px, #bbb 100px, transparent 0) no-repeat,
      radial-gradient(circle at 0 100%, #666 90px, #999 100px, transparent 0) no-repeat,
      radial-gradient(circle at 50% 120px, #FFF58F 30px, #f30 0 50px, #f60 60px, #f90 70px, transparent 100px) no-repeat,
      deepskyblue;
    width: 150px;
    height: 200px;
    border-radius: 75px 75px 20px 20px;
    animation: anim 2s infinite ease-in-out;
  }

  @keyframes anim {
    0% {
      rotate: -15deg;
      background-position-y: 0, 0, -50px, 0;
    }
    50% {
      rotate: 15deg;
      background-position-y: 0, 0, 50px, 0;
      background-position-x: 50px, -50px, 0, 0;
    }
    100% {
      rotate: -15deg;
      background-position-y: 0, 0, -50px, 0;
    }
  }
</style>

[ClJarvis]

Code Source – 590.21 {994}

<window>
  <sun></sun>
  <mtL></mtL>
  <mtR></mtR>
</window>
<style>
  body{
    background:#191919;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  window {
    width: 150px;
    height: 200px;
    background: #F2AD43;
    border-top-left-radius: 43%;
    border-top-right-radius: 43%;
    border-bottom-left-radius: 11%;
    border-bottom-right-radius: 11%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
  }
  sun{
    background: #FFF58F;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: 36px;
    position: absolute;
  }
  mtL{
    background: #E08027;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 160;
    margin-right: 116;
    position: absolute;
  }
    mtR{
    background: #824B20;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 160;
    margin-left: 116;
    position: absolute;
  }
</style>

[Narigo]

Nice idea using custom elements! We discussed the overflow: hidden idea as well but decided to look into radial gradients 😅

If you want to get to 100% match, do you know that using px values for border radius instead of percentages behaves different when the width / height is not a square?

[ClJarvis]

I didn't know that. That's may be why I get so close some times and others I hit 100%.. I have alternated between pixels and percents.