Permalink
Browse files

Post 28: CSS Preprocessing using SASS

  • Loading branch information...
akmurray committed Mar 7, 2013
1 parent 62b234b commit be8daa61dd6d8dcee80ecf9045a7cad8f31ebb54
View
@@ -1,137 +1,137 @@
/*
Aaron K. Murray
@aaronkmurray
Blog-related CSS styles for aaronkmurray.com rotating logo
*/
#wrapper-logo { #wrapper-logo {
float:right; float: right;
padding:0; padding: 0;
margin-right:12em; margin-right: 12em;
margin-top:20px; margin-top: 20px;
margin-left:40px; margin-left: 40px;
width: 128px; width: 128px;
height: 128px; height: 128px;
position: relative; position: relative;
-webkit-perspective: 640px; -webkit-perspective: 640px;
-moz-perspective: 640px; -moz-perspective: 640px;
-o-perspective: 640px; -o-perspective: 640px;
perspective: 640px; perspective: 640px; }
}
#wrapper-logo .logo { #wrapper-logo .logo {
display: block; display: block; }
}
#logo-cube { #logo-cube {
width: 128px; width: 128px;
height: 128px; height: 128px;
position: absolute; position: absolute;
margin:0; margin: 0;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d; -o-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s; -webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s; -moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s; -ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s; -o-transition: -o-transform 1s;
transition: transform 1s; transition: transform 1s; }
}
#logo-cube figure { #logo-cube figure {
display: block; display: block;
position: absolute; position: absolute;
width: 128px; width: 128px;
height: 128px; height: 128px; }
}
#logo-cube.panels-backface-invisible figure { #logo-cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
-ms-backface-visibility: hidden; -ms-backface-visibility: hidden;
-o-backface-visibility: hidden; -o-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden; }
}
#logo-cube .side-1 {
#logo-cube .side-1 { -webkit-transform: translateZ(64px);
-webkit-transform: translateZ( 64px ); -moz-transform: translateZ(64px);
-moz-transform: translateZ( 64px ); -ms-transform: translateZ(64px);
-ms-transform: translateZ( 64px ); -o-transform: translateZ(64px);
-o-transform: translateZ( 64px ); transform: translateZ(64px); }
transform: translateZ( 64px );
} #logo-cube .side-2 {
#logo-cube .side-2 { -webkit-transform: rotateX(-180deg) translateZ(64px);
-webkit-transform: rotateX( -180deg ) translateZ( 64px ); -moz-transform: rotateX(-180deg) translateZ(64px);
-moz-transform: rotateX( -180deg ) translateZ( 64px ); -ms-transform: rotateX(-180deg) translateZ(64px);
-ms-transform: rotateX( -180deg ) translateZ( 64px ); -o-transform: rotateX(-180deg) translateZ(64px);
-o-transform: rotateX( -180deg ) translateZ( 64px ); transform: rotateX(-180deg) translateZ(64px); }
transform: rotateX( -180deg ) translateZ( 64px );
}
#logo-cube .side-3 { #logo-cube .side-3 {
-webkit-transform: rotateY( 90deg ) translateZ( 64px ); -webkit-transform: rotateY(90deg) translateZ(64px);
-moz-transform: rotateY( 90deg ) translateZ( 64px ); -moz-transform: rotateY(90deg) translateZ(64px);
-ms-transform: rotateY( 90deg ) translateZ( 64px ); -ms-transform: rotateY(90deg) translateZ(64px);
-o-transform: rotateY( 90deg ) translateZ( 64px ); -o-transform: rotateY(90deg) translateZ(64px);
transform: rotateY( 90deg ) translateZ( 64px ); transform: rotateY(90deg) translateZ(64px); }
}
#logo-cube .side-4 { #logo-cube .side-4 {
-webkit-transform: rotateY( -90deg ) translateZ( 64px ); -webkit-transform: rotateY(-90deg) translateZ(64px);
-moz-transform: rotateY( -90deg ) translateZ( 64px ); -moz-transform: rotateY(-90deg) translateZ(64px);
-ms-transform: rotateY( -90deg ) translateZ( 64px ); -ms-transform: rotateY(-90deg) translateZ(64px);
-o-transform: rotateY( -90deg ) translateZ( 64px ); -o-transform: rotateY(-90deg) translateZ(64px);
transform: rotateY( -90deg ) translateZ( 64px ); transform: rotateY(-90deg) translateZ(64px); }
}
#logo-cube .side-5 { #logo-cube .side-5 {
-webkit-transform: rotateX( 90deg ) translateZ( 64px ); -webkit-transform: rotateX(90deg) translateZ(64px);
-moz-transform: rotateX( 90deg ) translateZ( 64px ); -moz-transform: rotateX(90deg) translateZ(64px);
-ms-transform: rotateX( 90deg ) translateZ( 64px ); -ms-transform: rotateX(90deg) translateZ(64px);
-o-transform: rotateX( 90deg ) translateZ( 64px ); -o-transform: rotateX(90deg) translateZ(64px);
transform: rotateX( 90deg ) translateZ( 64px ); transform: rotateX(90deg) translateZ(64px); }
}
#logo-cube .side-6 { #logo-cube .side-6 {
-webkit-transform: rotateX( -90deg ) translateZ( 64px ); -webkit-transform: rotateX(-90deg) translateZ(64px);
-moz-transform: rotateX( -90deg ) translateZ( 64px ); -moz-transform: rotateX(-90deg) translateZ(64px);
-ms-transform: rotateX( -90deg ) translateZ( 64px ); -ms-transform: rotateX(-90deg) translateZ(64px);
-o-transform: rotateX( -90deg ) translateZ( 64px ); -o-transform: rotateX(-90deg) translateZ(64px);
transform: rotateX( -90deg ) translateZ( 64px ); transform: rotateX(-90deg) translateZ(64px); }
}
#logo-cube.show-side-1 { #logo-cube.show-side-1 {
-webkit-transform: translateZ( -64px ); -webkit-transform: translateZ(-64px);
-moz-transform: translateZ( -64px ); -moz-transform: translateZ(-64px);
-ms-transform: translateZ( -64px ); -ms-transform: translateZ(-64px);
-o-transform: translateZ( -64px ); -o-transform: translateZ(-64px);
transform: translateZ( -64px ); transform: translateZ(-64px); }
}
#logo-cube.show-side-2 { #logo-cube.show-side-2 {
-webkit-transform: translateZ( -64px ) rotateX( -180deg ); -webkit-transform: translateZ(-64px) rotateX(-180deg);
-moz-transform: translateZ( -64px ) rotateX( -180deg ); -moz-transform: translateZ(-64px) rotateX(-180deg);
-ms-transform: translateZ( -64px ) rotateX( -180deg ); -ms-transform: translateZ(-64px) rotateX(-180deg);
-o-transform: translateZ( -64px ) rotateX( -180deg ); -o-transform: translateZ(-64px) rotateX(-180deg);
transform: translateZ( -64px ) rotateX( -180deg ); transform: translateZ(-64px) rotateX(-180deg); }
}
#logo-cube.show-side-3 { #logo-cube.show-side-3 {
-webkit-transform: translateZ( -64px ) rotateY( -90deg ); -webkit-transform: translateZ(-64px) rotateY(-90deg);
-moz-transform: translateZ( -64px ) rotateY( -90deg ); -moz-transform: translateZ(-64px) rotateY(-90deg);
-ms-transform: translateZ( -64px ) rotateY( -90deg ); -ms-transform: translateZ(-64px) rotateY(-90deg);
-o-transform: translateZ( -64px ) rotateY( -90deg ); -o-transform: translateZ(-64px) rotateY(-90deg);
transform: translateZ( -64px ) rotateY( -90deg ); transform: translateZ(-64px) rotateY(-90deg); }
}
#logo-cube.show-side-4 { #logo-cube.show-side-4 {
-webkit-transform: translateZ( -64px ) rotateY( 90deg ); -webkit-transform: translateZ(-64px) rotateY(90deg);
-moz-transform: translateZ( -64px ) rotateY( 90deg ); -moz-transform: translateZ(-64px) rotateY(90deg);
-ms-transform: translateZ( -64px ) rotateY( 90deg ); -ms-transform: translateZ(-64px) rotateY(90deg);
-o-transform: translateZ( -64px ) rotateY( 90deg ); -o-transform: translateZ(-64px) rotateY(90deg);
transform: translateZ( -64px ) rotateY( 90deg ); transform: translateZ(-64px) rotateY(90deg); }
}
#logo-cube.show-side-5 { #logo-cube.show-side-5 {
-webkit-transform: translateZ( -64px ) rotateX( -90deg ); -webkit-transform: translateZ(-64px) rotateX(-90deg);
-moz-transform: translateZ( -64px ) rotateX( -90deg ); -moz-transform: translateZ(-64px) rotateX(-90deg);
-ms-transform: translateZ( -64px ) rotateX( -90deg ); -ms-transform: translateZ(-64px) rotateX(-90deg);
-o-transform: translateZ( -64px ) rotateX( -90deg ); -o-transform: translateZ(-64px) rotateX(-90deg);
transform: translateZ( -64px ) rotateX( -90deg ); transform: translateZ(-64px) rotateX(-90deg); }
}
#logo-cube.show-side-6 { #logo-cube.show-side-6 {
-webkit-transform: translateZ( -64px ) rotateX( 90deg ); -webkit-transform: translateZ(-64px) rotateX(90deg);
-moz-transform: translateZ( -64px ) rotateX( 90deg ); -moz-transform: translateZ(-64px) rotateX(90deg);
-ms-transform: translateZ( -64px ) rotateX( 90deg ); -ms-transform: translateZ(-64px) rotateX(90deg);
-o-transform: translateZ( -64px ) rotateX( 90deg ); -o-transform: translateZ(-64px) rotateX(90deg);
transform: translateZ( -64px ) rotateX( 90deg ); transform: translateZ(-64px) rotateX(90deg); }
}
View
@@ -0,0 +1,147 @@
/*!
Aaron K. Murray
@aaronkmurray
Blog-related CSS styles for aaronkmurray.com rotating logo
*/
$perspective-size:640px;
$cube-size:128px;
$edge-size:64px;
#wrapper-logo {
float:right;
padding:0;
margin-right:12em;
margin-top:20px;
margin-left:40px;
width: $cube-size;
height: $cube-size;
position: relative;
-webkit-perspective: $perspective-size;
-moz-perspective: $perspective-size;
-o-perspective: $perspective-size;
perspective: $perspective-size;
}
#wrapper-logo .logo {
display: block;
}
#logo-cube {
width: $cube-size;
height: $cube-size;
position: absolute;
margin:0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#logo-cube figure {
display: block;
position: absolute;
width: $cube-size;
height: $cube-size;
}
#logo-cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#logo-cube .side-1 {
-webkit-transform: translateZ( $edge-size );
-moz-transform: translateZ( $edge-size );
-ms-transform: translateZ( $edge-size );
-o-transform: translateZ( $edge-size );
transform: translateZ( $edge-size );
}
#logo-cube .side-2 {
-webkit-transform: rotateX( -180deg ) translateZ( $edge-size );
-moz-transform: rotateX( -180deg ) translateZ( $edge-size );
-ms-transform: rotateX( -180deg ) translateZ( $edge-size );
-o-transform: rotateX( -180deg ) translateZ( $edge-size );
transform: rotateX( -180deg ) translateZ( $edge-size );
}
#logo-cube .side-3 {
-webkit-transform: rotateY( 90deg ) translateZ( $edge-size );
-moz-transform: rotateY( 90deg ) translateZ( $edge-size );
-ms-transform: rotateY( 90deg ) translateZ( $edge-size );
-o-transform: rotateY( 90deg ) translateZ( $edge-size );
transform: rotateY( 90deg ) translateZ( $edge-size );
}
#logo-cube .side-4 {
-webkit-transform: rotateY( -90deg ) translateZ( $edge-size );
-moz-transform: rotateY( -90deg ) translateZ( $edge-size );
-ms-transform: rotateY( -90deg ) translateZ( $edge-size );
-o-transform: rotateY( -90deg ) translateZ( $edge-size );
transform: rotateY( -90deg ) translateZ( $edge-size );
}
#logo-cube .side-5 {
-webkit-transform: rotateX( 90deg ) translateZ( $edge-size );
-moz-transform: rotateX( 90deg ) translateZ( $edge-size );
-ms-transform: rotateX( 90deg ) translateZ( $edge-size );
-o-transform: rotateX( 90deg ) translateZ( $edge-size );
transform: rotateX( 90deg ) translateZ( $edge-size );
}
#logo-cube .side-6 {
-webkit-transform: rotateX( -90deg ) translateZ( $edge-size );
-moz-transform: rotateX( -90deg ) translateZ( $edge-size );
-ms-transform: rotateX( -90deg ) translateZ( $edge-size );
-o-transform: rotateX( -90deg ) translateZ( $edge-size );
transform: rotateX( -90deg ) translateZ( $edge-size );
}
#logo-cube.show-side-1 {
-webkit-transform: translateZ( -$edge-size );
-moz-transform: translateZ( -$edge-size );
-ms-transform: translateZ( -$edge-size );
-o-transform: translateZ( -$edge-size );
transform: translateZ( -$edge-size );
}
#logo-cube.show-side-2 {
-webkit-transform: translateZ( -$edge-size ) rotateX( -180deg );
-moz-transform: translateZ( -$edge-size ) rotateX( -180deg );
-ms-transform: translateZ( -$edge-size ) rotateX( -180deg );
-o-transform: translateZ( -$edge-size ) rotateX( -180deg );
transform: translateZ( -$edge-size ) rotateX( -180deg );
}
#logo-cube.show-side-3 {
-webkit-transform: translateZ( -$edge-size ) rotateY( -90deg );
-moz-transform: translateZ( -$edge-size ) rotateY( -90deg );
-ms-transform: translateZ( -$edge-size ) rotateY( -90deg );
-o-transform: translateZ( -$edge-size ) rotateY( -90deg );
transform: translateZ( -$edge-size ) rotateY( -90deg );
}
#logo-cube.show-side-4 {
-webkit-transform: translateZ( -$edge-size ) rotateY( 90deg );
-moz-transform: translateZ( -$edge-size ) rotateY( 90deg );
-ms-transform: translateZ( -$edge-size ) rotateY( 90deg );
-o-transform: translateZ( -$edge-size ) rotateY( 90deg );
transform: translateZ( -$edge-size ) rotateY( 90deg );
}
#logo-cube.show-side-5 {
-webkit-transform: translateZ( -$edge-size ) rotateX( -90deg );
-moz-transform: translateZ( -$edge-size ) rotateX( -90deg );
-ms-transform: translateZ( -$edge-size ) rotateX( -90deg );
-o-transform: translateZ( -$edge-size ) rotateX( -90deg );
transform: translateZ( -$edge-size ) rotateX( -90deg );
}
#logo-cube.show-side-6 {
-webkit-transform: translateZ( -$edge-size ) rotateX( 90deg );
-moz-transform: translateZ( -$edge-size ) rotateX( 90deg );
-ms-transform: translateZ( -$edge-size ) rotateX( 90deg );
-o-transform: translateZ( -$edge-size ) rotateX( 90deg );
transform: translateZ( -$edge-size ) rotateX( 90deg );
}
View
@@ -1,4 +1,4 @@
/* /*!
Aaron K. Murray Aaron K. Murray
@aaronkmurray @aaronkmurray
Oops, something went wrong.

0 comments on commit be8daa6

Please sign in to comment.