How would you improve this vaporsun?

HTML & CSS
1

code: https://jsfiddle.net/4m3abtef/1/

body {
  height: 100vh;
  overflow: hidden;
}

figure {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stripes-wraper {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px #F29);
  overflow: hidden;
  position: absolute;
}

.stripe {
  width: 100%;
  height: 15px;
  background-color: #FFF;

}

.stripe + .stripe {
  margin-top: 15px;
}

.gradient-mask {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #92F 0%, #F29 100%);
  mix-blend-mode: multiply;
  position: absolute;
}

<figure>
 
 <div class="stripes-wraper">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="gradient-mask"></div>
 

</figure>
2

I suck at doing stripes with gradients but this has the basic idea…

1 Like
3

Here was my 1st attempt: https://jsfiddle.net/etavuz4b/

How would this be fixed?

2nd attempt: https://jsfiddle.net/40srwhqp/1/

body {
  background-color: pink;
}


.sun {
  width: 450px;
  height: 450px;
  background: linear-gradient(to bottom, #92F 0%, #F29 100%);
  margin: auto;
  position: relative;
  border-radius: 50%;
}


figure {
  width: 450px;
  height: 450px;

}
figure {
  margin: 5em auto;
  border-radius: 50%;
  padding: 0px;
  background: repeating-linear-gradient(0deg,
      black,
      black 15px,
      transparent 15px,
      transparent 30px);
}

<div class="sun">
  <figure>
  </figure>
</div>

Improved: https://jsfiddle.net/k2pxsfzb/1/

1 Like
4

Another example (ignoring responsiveness). No pseudo elements required.

The black lines are transparent and allow the body background to show through. If you wanted them to remain black then you’d probably need to add the pseudo element.

This seems to be a similar question that you asked about a year ago which resulted in this demo of mine.

1 Like
5

Dave you could have combined both the gradients in the single rule :slight_smile:

Or at the fixed 450px height and width :wink:

1 Like
6

Showoff. :lol: Like I said, I suck at those, and I forgot you can layer backgrounds…

meh. I’m a fixed size hater. :wink:

1 Like
7

Here you go :slight_smile:

1 Like
8

Wow…that drop shadow is trippy… :peace_symbol:

2 Likes
9

How would you get the drop shadow to look like this?

As how it is here: https://jsfiddle.net/4m3abtef/1/

I wasn’t able to figure it out.

fdfdf

10

I was copying the one with the solid background from this fiddle https://jsfiddle.net/k2pxsfzb/1/

That one with the shadow behind will be will be quite hard to do especially in a fluid layout.

That’s close but nor the same but I haven’t got time to play today. It might be easier as a fixed size like yours.

e.g.

11

Can aspect-ratio: 1 / 1;

be added to this? https://jsfiddle.net/h3rn1pgy/

Is that possible?

That wouldn’t look the same either.

Is there a way that uses filter: drop-shadow that can be figured out?

Someone shared these with me:

One person said:

Quite simply, you can’t.

Drop-shadow works on edges, because you have one div there is only the one outer edge for it to work on. In the one you are trying to replicate there are a bunch of divs within the outer one so drop-shadow is working on the edge of each of those to get the horizontal lines.

Another person:

You can’t get the same effect because each colored bar has to drop it’s shadow.

There are 2 ways to achieve a similar (but not identical) effect.

Use a white/transparent mask with coloured shadow, and color the mask using blending

This produces a very similar shading, but there is a small brightness step at the edge of black bars.

https://jsfiddle.net/vwyrzpg8/3/

.sun::before {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px #f29);
  background: linear-gradient(
      to bottom,

.sun::after {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #92F 0%, #F29 100%);
  mix-blend-mode: multiply;
  position: absolute;
}

oneway

Simulate the shadow using a radial gradient placed on top of the bars

This has no steps, but the shading is monochrome.

https://jsfiddle.net/vwyrzpg8/1/

sun::after {
  content: ' ';
  position: absolute;
  width: calc(100% + 40px);
  left: -20px;
  top: -20px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 34, 153, 0.4) 0%, rgba(255, 34, 153, 0.3) 55%, rgba(255, 34, 153, 0) 72%);
}

save2

12

Yes I did it on this one which I have now made fluid.

That looks more or less like your picture.

The filter works on the alpha channel of the transparent parts of the gradient so is much the same effect as your slices.

13

That doesn’t look like this.

save2

14

I think my earlier one was closer.

I’m pretty sure one of those can be made to match.

15

Your examples omit the black lines.

save2

16

Yours and mine side by side?

sun
sun791Ă—365 69.1 KB

Mine has more black lines but other than that I can’t see enough of a differenece to notice.

2 Likes
17

Actually now that I look back at post #1 mine is almost identical to yours including the number of black lines.

Here’s yours and mine side by side again.

sun2
sun2954Ă—456 65 KB

Mine is on the right and has slightly less blur which can be changed by adjusting the opacity.