I created this stunning star using CSS, complete with a beautiful box-shadow effect. However, when I tried to populate my page with multiple stars to create a galaxy effect, the performance took a hit due to the heavy use of box-shadow. This resulted in slow scrolling on the page.
After experimenting, I found that using a PNG image instead of a DIV element significantly improved performance and eliminated the scrolling issue. The only problem is, I can't figure out how to convert this intricate star design into a PNG format. HTML2Canvas was no help as it doesn't support shadows, leaving me stuck with a less-than-ideal solution.
If anyone has any tips or solutions, I would be incredibly grateful for the assistance. My last resort would be to find a similar star design in SVG format, but I believe there are talented individuals here who could provide a better solution. Please help!
.holder {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background-color: #000000;
}
.star {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
transform: translateX(-50%) translateY(-50%);
}
.star div {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%) translateY(-50%) rotateX(-85deg) rotateZ(45deg);
background-color: #ffffff;
box-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px rgb(27, 53, 97),
0 0 70px rgb(27, 53, 97),
0 0 80px rgb(27, 53, 97),
0 0 100px rgb(27, 53, 97),
0 0 150px rgb(27, 53, 97);
}
.star div:nth-child(2) {
transform: translateX(-50%) translateY(-50%) rotateZ(90deg) rotateX(-85deg) rotateZ(45deg);
}
.star div:nth-child(3) {
width: 50%;
height: 50%;
transform: translateX(-50%) translateY(-50%) rotateZ(45deg) rotateX(-85deg) rotateZ(45deg);
}
.star div:nth-child(4) {
width: 50%;
height: 50%;
transform: translateX(-50%) translateY(-50%) rotateZ(-45deg) rotateX(-85deg) rotateZ(45deg);
}<div class="holder">
<div class="star"><div></div><div></div><div></div><div></div></div>
</div>