/**
* CSS Isometric Layer Display
* written by Akoi Meexx - June 14th, 2011
*
* Source obvs. free for all. If you use this and like it, just hit me up on
* twitter @akoimeexx. Everyone can always use a little ego boost.
*/
/**
* CHANGELOG
*
* August 4th, 2011
* Added fallback colors for browsers w/o rgba() support.
* Sorted transform rules to apply non-prefixed last.
* Removed overflow: hidden from the body class.
* Renamed the class to iso-metrics for the lulz.
* Added this changelog.
*
* June 14th, 2011
* Initial project creation.
*/
/**
* Apply our iso-metrics class to the body element to show a rough layout of our
* DOM layers in isometric view. Float the body left to constrain the body
* contents. Then rock it like it's hawt, rock it like it's hawt...
*/
body.iso-metrics {
float: left !important;
-moz-transform-origin: top right !important;
-ms-transform-origin: top right !important;
-o-transform-origin: top right !important;
-webkit-transform-origin: top right !important;
transform-origin: top right !important;
-moz-transform: rotate(-45deg) skew(15deg, 15deg) !important;
-ms-transform: rotate(-45deg) skew(15deg, 15deg) !important;
-o-transform: rotate(-45deg) skew(15deg, 15deg) !important;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg) !important;
transform: rotate(-45deg) skew(15deg, 15deg) !important;
}
/**
* Set up us the borders, margins, padding, and take off every text to stay
* inside their containers for great justice.
*/
.iso-metrics address, .iso-metrics article, .iso-metrics aside, .iso-metrics blockquote,
.iso-metrics canvas, .iso-metrics dl, .iso-metrics div, .iso-metrics embed,
.iso-metrics fieldset, .iso-metrics figure, .iso-metrics footer, .iso-metrics form,
.iso-metrics header, .iso-metrics map, .iso-metrics object, .iso-metrics ol,
.iso-metrics output, .iso-metrics p, .iso-metrics pre, .iso-metrics section,
.iso-metrics table, .iso-metrics ul, .iso-metrics video {
border-bottom: 12px solid #c0c0c0 !important;
border-left: 12px solid #d0d0d0 !important;
border-right: 1px solid #a0a0a0 !important;
border-top: 1px solid #b0b0b0 !important;
border-bottom: 12px solid rgba(0, 0, 0, 0.10) !important;
border-left: 12px solid rgba(0, 0, 0, 0.05) !important;
border-right: 1px solid rgba(0, 0, 0, 0.20) !important;
border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
margin-bottom: 8px !important;
margin-left: 8px !important;
margin-right: 2px !important;
margin-top: 2px !important;
padding: 2px !important;
word-wrap: break-word !important;
}
/**
* Give our block-level elements basic rgb(a) coloring (red, green, blue)
*/
/* Red */
.iso-metrics address:nth-child(3n+1), .iso-metrics article:nth-child(3n+1),
.iso-metrics aside:nth-child(3n+1), .iso-metrics blockquote:nth-child(3n+1),
.iso-metrics canvas:nth-child(3n+1), .iso-metrics dl:nth-child(3n+1),
.iso-metrics div:nth-child(3n+1), .iso-metrics embed:nth-child(3n+1),
.iso-metrics fieldset:nth-child(3n+1), .iso-metrics figure:nth-child(3n+1),
.iso-metrics footer:nth-child(3n+1), .iso-metrics form:nth-child(3n+1),
.iso-metrics header:nth-child(3n+1), .iso-metrics map:nth-child(3n+1),
.iso-metrics object:nth-child(3n+1), .iso-metrics ol:nth-child(3n+1),
.iso-metrics output:nth-child(3n+1), .iso-metrics p:nth-child(3n+1),
.iso-metrics pre:nth-child(3n+1), .iso-metrics section:nth-child(3n+1),
.iso-metrics table:nth-child(3n+1), .iso-metrics ul:nth-child(3n+1),
.iso-metrics video:nth-child(3n+1) {
background-color: #ffd0d0 !important;
background-color: rgba(255, 0, 0, 0.05) !important;
}
/* Green */
.iso-metrics address:nth-child(3n+2), .iso-metrics article:nth-child(3n+2),
.iso-metrics aside:nth-child(3n+2), .iso-metrics blockquote:nth-child(3n+2),
.iso-metrics canvas:nth-child(3n+2), .iso-metrics dl:nth-child(3n+2),
.iso-metrics div:nth-child(3n+2), .iso-metrics embed:nth-child(3n+2),
.iso-metrics fieldset:nth-child(3n+2), .iso-metrics figure:nth-child(3n+2),
.iso-metrics footer:nth-child(3n+2), .iso-metrics form:nth-child(3n+2),
.iso-metrics header:nth-child(3n+2), .iso-metrics map:nth-child(3n+2),
.iso-metrics object:nth-child(3n+2), .iso-metrics ol:nth-child(3n+2),
.iso-metrics output:nth-child(3n+2), .iso-metrics p:nth-child(3n+2),
.iso-metrics pre:nth-child(3n+2), .iso-metrics section:nth-child(3n+2),
.iso-metrics table:nth-child(3n+2), .iso-metrics ul:nth-child(3n+2),
.iso-metrics video:nth-child(3n+2) {
background-color: #d0ffd0 !important;
background-color: rgba(0, 255, 0, 0.05) !important;
}
/* Blue */
.iso-metrics address:nth-child(3n+3), .iso-metrics article:nth-child(3n+3),
.iso-metrics aside:nth-child(3n+3), .iso-metrics blockquote:nth-child(3n+3),
.iso-metrics canvas:nth-child(3n+3), .iso-metrics dl:nth-child(3n+3),
.iso-metrics div:nth-child(3n+3), .iso-metrics embed:nth-child(3n+3),
.iso-metrics fieldset:nth-child(3n+3), .iso-metrics figure:nth-child(3n+3),
.iso-metrics footer:nth-child(3n+3), .iso-metrics form:nth-child(3n+3),
.iso-metrics header:nth-child(3n+3), .iso-metrics map:nth-child(3n+3),
.iso-metrics object:nth-child(3n+3), .iso-metrics ol:nth-child(3n+3),
.iso-metrics output:nth-child(3n+3), .iso-metrics p:nth-child(3n+3),
.iso-metrics pre:nth-child(3n+3), .iso-metrics section:nth-child(3n+3),
.iso-metrics table:nth-child(3n+3), .iso-metrics ul:nth-child(3n+3),
.iso-metrics video:nth-child(3n+3) {
background-color: #d0d0ff !important;
background-color: rgba(0, 0, 255, 0.05) !important;
}
Comments