Skip to content

Instantly share code, notes, and snippets.

@las3r

las3r/SassMeister-input-HTML.html

Created December 9, 2014 11:32
Show Gist options
  • Save las3r/a6da1e55319a1ad317ae to your computer and use it in GitHub Desktop.
Save las3r/a6da1e55319a1ad317ae to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div id="colorWheel">
<span class="color01"></span>
<span class="color02"></span>
<span class="color03"></span>
<span class="color04"></span>
<span class="color05"></span>
<span class="color06"></span>
<span class="color07"></span>
<span class="color08"></span>
<span class="color09"></span>
<span class="color10"></span>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
@mixin transition($speed: 0.2s, $easing: ease) {
-webkit-transition: all $speed $easing;
-moz-transition: all $speed $easing;
-ms-transition: all $speed $easing;
-o-transition: all $speed $easing;
transition: all $speed $easing;
}
@mixin noselect() {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
@mixin rotate($degrees: 90) {
-webkit-transform: rotate(#{$degrees}deg);
-moz-transform: rotate(#{$degrees}deg);
-ms-transform: rotate(#{$degrees}deg);
-o-transform: rotate(#{$degrees}deg);
transform: rotate(#{$degrees}deg);
}
@mixin origin($x, $y) {
-webkit-transform-origin: $x $y;
-moz-transform-origin: $x $y;
-ms-transform-origin: $x $y;
-o-transform-origin: $x $y;
transform-origin: $x $y;
}
@mixin swatch($color) {
border-color: $color transparent transparent transparent;
}
@mixin animationCount($count: 1){
-webkit-animation-iteration-count: $count;
-moz-animation-iteration-count: $count;
-o-animation-iteration-count: $count;
-ms-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin intro($name: introAnimation, $length: 3s, $easing: ease) {
animation: $name $length $easing;
-webkit-animation: $name $length $easing;
-moz-animation: $name $length $easing;
-o-animation: $name $length $easing;
-ms-animation: $name $length $easing;
}
@mixin introAnimation() {
@include intro();
@include animationCount(1);
}
@keyframes introAnimation{
0% {
@include rotate(0);
}
50% {
@include rotate(720);
}
100% {
@include rotate(0);
}
}
@-moz-keyframes introAnimation{
0% {
@include rotate(0);
}
50% {
@include rotate(720);
}
100% {
@include rotate(0);
}
}
@-webkit-keyframes introAnimation {
0% {
@include rotate(0);
}
50% {
@include rotate(720);
}
100% {
@include rotate(0);
}
}
@-o-keyframes introAnimation {
0% {
@include rotate(0);
}
50% {
@include rotate(720);
}
100% {
@include rotate(0);
}
}
@-ms-keyframes introAnimation {
0% {
@include rotate(0);
}
50% {
@include rotate(720);
}
100% {
@include rotate(0);
}
}
$theme_Blue: #E4312C;
$theme_Green: #F18E00;
$theme_LightGreen: #FFE600;
$theme_Yellow: #CECD00;
$theme_Orange: #96BF0D;
$theme_Rust: #0092BB;
$theme_Red: #56378A;
$theme_Purple: #952D98;
$theme_Violet: #C3004A;
$theme_grey : #005192;
body {
margin: 60px auto;
background: #F5F5F7;
}
#colorWheel {
-webkit-animation: intro 3s ease;
height: 100px;
width: 100px;
margin: 0 auto ;
position: relative;
@include noselect();
@include transition(0.5s, linear);
@include introAnimation();
@include origin(50px, 150px);
span {
$deg: (360 / 10);
position: absolute;
@include origin(50%,50%);
border-style: solid;
border-width: 150px 50px;
box-sizing: border-box;
&.color01 {
@include rotate($deg * 0);
@include swatch($theme_Blue);
}
&.color02{
@include rotate($deg * 1);
@include swatch($theme_Green);
}
&.color03{
@include rotate($deg * 2);
@include swatch($theme_LightGreen);
}
&.color04{
@include rotate($deg * 3);
@include swatch($theme_Yellow);
}
&.color05{
@include rotate($deg * 4);
@include swatch($theme_Orange);
}
&.color06{
@include rotate($deg * 5);
@include swatch($theme_Rust);
}
&.color07{
@include rotate($deg * 6);
@include swatch($theme_grey);
}
&.color08{
@include rotate($deg * 7);
@include swatch($theme_Red);
}
&.color09{
@include rotate($deg * 8);
@include swatch($theme_Purple);
}
&.color10{
@include rotate($deg * 9);
@include swatch($theme_Violet);
}
}
&:before {
content: "";
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: -30px;
left: -130px;
border-radius: 100%;
border: 30px solid rgba(white, 100%);
z-index: 100;
}
&:after {
content: "";
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 100px;
left: 0px;
border-radius: 100%;
background: url("http://oi59.tinypic.com/210ye6q.jpg") no-repeat center center #fff;
}
}
Raw
SassMeister-output.css
@keyframes introAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes introAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes introAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-o-keyframes introAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-ms-keyframes introAnimation {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
body {
margin: 60px auto;
background: #F5F5F7;
}
#colorWheel {
-webkit-animation: intro 3s ease;
height: 100px;
width: 100px;
margin: 0 auto;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
animation: introAnimation 3s ease;
-webkit-animation: introAnimation 3s ease;
-moz-animation: introAnimation 3s ease;
-o-animation: introAnimation 3s ease;
-ms-animation: introAnimation 3s ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 50px 150px;
-moz-transform-origin: 50px 150px;
-ms-transform-origin: 50px 150px;
-o-transform-origin: 50px 150px;
transform-origin: 50px 150px;
}
#colorWheel span {
position: absolute;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
border-style: solid;
border-width: 150px 50px;
box-sizing: border-box;
}
#colorWheel span.color01 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #E4312C transparent transparent transparent;
}
#colorWheel span.color02 {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
border-color: #F18E00 transparent transparent transparent;
}
#colorWheel span.color03 {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
border-color: #FFE600 transparent transparent transparent;
}
#colorWheel span.color04 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
border-color: #CECD00 transparent transparent transparent;
}
#colorWheel span.color05 {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
border-color: #96BF0D transparent transparent transparent;
}
#colorWheel span.color06 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
border-color: #0092BB transparent transparent transparent;
}
#colorWheel span.color07 {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
border-color: #005192 transparent transparent transparent;
}
#colorWheel span.color08 {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
border-color: #56378A transparent transparent transparent;
}
#colorWheel span.color09 {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
border-color: #952D98 transparent transparent transparent;
}
#colorWheel span.color10 {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
border-color: #C3004A transparent transparent transparent;
}
#colorWheel:before {
content: "";
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: -30px;
left: -130px;
border-radius: 100%;
border: 30px solid white;
z-index: 100;
}
#colorWheel:after {
content: "";
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 100px;
left: 0px;
border-radius: 100%;
background: url("http://oi59.tinypic.com/210ye6q.jpg") no-repeat center center #fff;
}
Raw
SassMeister-rendered.html
<div id="colorWheel">
<span class="color01"></span>
<span class="color02"></span>
<span class="color03"></span>
<span class="color04"></span>
<span class="color05"></span>
<span class="color06"></span>
<span class="color07"></span>
<span class="color08"></span>
<span class="color09"></span>
<span class="color10"></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment