Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 24, 2012 17:14
Show Gist options
  • Save xav76/3947404 to your computer and use it in GitHub Desktop.
Save xav76/3947404 to your computer and use it in GitHub Desktop.
A CodePen by Hugo Giraudel. CSS kaleïdoscop - A small pen to try with SASS for loops, HSLa and Zen Coding. ALL IN ONE ! Plus a colorful result. :P
<ul>
<li class="a-1"></li>
<li class="a-2"></li>
<li class="a-3"></li>
<li class="a-4"></li>
<li class="a-5"></li>
<li class="a-6"></li>
<li class="a-7"></li>
<li class="a-8"></li>
<li class="a-9"></li>
<li class="a-10"></li>
<li class="a-11"></li>
<li class="a-12"></li>
<li class="a-13"></li>
<li class="a-14"></li>
<li class="a-15"></li>
<li class="a-16"></li>
<li class="a-17"></li>
<li class="a-18"></li>
<li class="a-19"></li>
<li class="a-20"></li>
<li class="a-21"></li>
<li class="a-22"></li>
<li class="a-23"></li>
<li class="a-24"></li>
<li class="a-25"></li>
<li class="a-26"></li>
<li class="a-27"></li>
<li class="a-28"></li>
<li class="a-29"></li>
<li class="a-30"></li>
<li class="a-31"></li>
<li class="a-32"></li>
<li class="a-33"></li>
<li class="a-34"></li>
<li class="a-35"></li>
<li class="a-36"></li>
</ul>
@import "compass";
html {
height: 100%;
}
body {
height: 100%;
background: linear-gradient(#fff, #eee);
}
ul {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
transform-origin: 50% 50%;
transform: rotate(-20deg);
animation: rota 20s linear infinite;
}
ul:after {
content: "";
position: absolute;
border-radius: 50%;
left: -25px;
top: -25px;
bottom: -25px;
right: -25px;
background: #2d2d2c;
z-index: -1;
box-shadow: 0 0 10px 3px rgba(0,0,50,0.3), 0 3px 10px rgba(0,0,0,0.4);
}
/*
ul:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
width: 20px;
height: 20px;
background: white;
margin: -10px 0 0 -10px;
}
*/
li {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left:-50px;
transform-origin: bottom center;
border-radius: 50% 0 50% 50%;
}
@for $i from 1 through 36 {
li:nth-child(#{$i}){
transform: rotate($i*10deg);
background: hsla($i*10.5, 80, 60, 0.15);
}
}
@keyframes rota {
100% { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment