Piotr Berebecki Piotr Berebecki - 29 days ago 9
CSS Question

Prevent CSS stardust effect from losing shape on narrow screen

I'm planning to implement the following stardust effect as a background to my page: http://codepen.io/PiotrBerebecki/pen/aBbmgW

The problem that I'm experiencing is that when the width of the browser window drops below 700px the rays in the stardust effect become distorted as in the following image:

enter image description here

Would you know what causes the distortion in shape and how to fix it?

HTML:

<ul class="starbust-wheel">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


CSS:

body {
padding: 0;
margin: 0;
background: #03a9f4;
}

.starbust-wheel {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.starbust-wheel > li {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
padding: 0;
margin: 0;
transform-origin: 0 0;
}

.starbust-wheel > li:nth-child(odd) {
background-image: linear-gradient(-197deg, rgba(255, 255, 255, 0.4) 5%, transparent 25%);
}

.starbust-wheel > li:nth-child(1) {
transform: rotate(18deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(2) {
transform: rotate(36deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(3) {
transform: rotate(54deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(4) {
transform: rotate(72deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(5) {
transform: rotate(90deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(6) {
transform: rotate(108deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(7) {
transform: rotate(126deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(8) {
transform: rotate(144deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(9) {
transform: rotate(162deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(10) {
transform: rotate(180deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(11) {
transform: rotate(198deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(12) {
transform: rotate(216deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(13) {
transform: rotate(234deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(14) {
transform: rotate(252deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(15) {
transform: rotate(270deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(16) {
transform: rotate(288deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(17) {
transform: rotate(306deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(18) {
transform: rotate(324deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(19) {
transform: rotate(342deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(20) {
transform: rotate(360deg) skewX(72deg);
}

Answer

They're just shrinking due to the relative size you've set at 50%. If you change that to 100% then it looks exactly the same but doesn't exhibit the problem you've had. I'd also recommend changing the height to 100% so you don't have the problem if the page height goes too low...

.starbust-wheel > li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  transform-origin: 0 0;
}

Updated example: http://codepen.io/anon/pen/MbWXga

You'll probably want to change the gradient slightly, as this has brightened it up a bit from the original.

Comments