All geek questions in one place

Sunburst effect with css3 gradient

I searched around and tried for several days, but I just can't get it 100% right ... I am trying to achieve the following effect with css3 gradient:

sunburst done in illustrator

closest i got demo :

html { background: linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(82deg, transparent 50%, #eee 50%, #eee), linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(52deg, transparent 50%, #eee 50%, #eee), linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(22deg, transparent 50%, #eee 50%, #eee), linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(-8deg, transparent 50%, #eee 50%, #eee), linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(-38deg, transparent 50%, #eee 50%, #eee), linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd), linear-gradient(-68deg, transparent 50%, #eee 50%, #eee), linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd); background-position: center -100%; background-color: #eee; background-size: 100% 200%; min-height: 100%; }

I will continue to try. Any help is greatly appreciated.

Update:

There should be a better / reusable way to do this ... looking at the scss solution, here is what I still have:

 .sunburst { @for $ray from 1 through 26 { $color: #eee; $degree: 7; @if $ray%2 == 0 { $color: #ddd; } background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color), } }

Now Iā€™m just trying to figure out the actual mathematical data behind it ... an attempt to steal the logic from pow.js , but it seems to be difficult if you are as terrible in math as I am ...

+6
source share
3 answers

You can use :before and :after : pseudo-elements to get this effect.

 html, body { width: 100%; height: 100%; margin: 0; } #grad { position: relative; width: 100%; height: 100%; } #grad:after, #grad:before { content: ''; position: absolute; background: linear-gradient(90deg, transparent 50%, black 50%, black), linear-gradient(82deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(67deg, transparent 50%, #000000 50%, #000000), linear-gradient(52deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(37deg, transparent 50%, #000000 50%, #000000), linear-gradient(22deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(7deg, transparent 50%, #000000 50%, #000000), linear-gradient(-8deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-23deg, transparent 50%, #000000 50%, #000000), linear-gradient(-38deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-53deg, transparent 50%, #000000 50%, #000000), linear-gradient(-68deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-83deg, transparent 50%, #000000 50%, #000000), linear-gradient(-90deg, transparent 50%, #12E0DB 50%, #12E0DB); background-position: 0% 0%; background-size: 200% 100%; height: 100%; width: 50%; } #grad:before { left: 50%; transform: rotate(180deg); } 
 <div id="grad"></div>
+5
source

your background-postition set to center -100%; . Just use

 background-position: center center;

Now with this change and your provided code, half of your image has already been completed;). Just add a second half with more linear-gradients

+1
source

@ chipChocolate.py gave a brilliant solution! This is an improvement based on it.

  • In Firefox, transparent behaves like rgba(0,0,0,0) , which leaves a thin gray line at the edge. Change to rgba(255,255,255,0) looks better.

  • Make the visual effect closer to the screen shot: 36 bars, each of which has an angle of 10 degrees.

  • Effective in the <html> , for example, OP.

BTW: Chrome's rendering engine sucks, best viewed in Firefox.

 html { height: 100%; position: relative; } html:before, html:after { content: ''; height: 100%; width: 50%; position: absolute; top: 0; background-size: 200% 100%; background-image: linear-gradient(85deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(75deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(65deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(55deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(45deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(35deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(25deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(15deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(5deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-5deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-15deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-25deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-35deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-45deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-55deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-65deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-75deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db), linear-gradient(-85deg, rgba(255,255,255,0) 50%, #000 50%, #000), linear-gradient(-95deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db); } html:before { left: 50%; transform: rotate(180deg); }
+1
source

Source: https://habr.com/ru/post/979783/

More articles:


All Articles