Skip to content

Instantly share code, notes, and snippets.

@jlong

jlong/rainbow.html

Created May 27, 2011 22:10
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jlong/996288 to your computer and use it in GitHub Desktop.
Save jlong/996288 to your computer and use it in GitHub Desktop.
Download ZIP
Double Rainbow with Sass and Compass (requires a modern browser like Safari or Chrome). See also: http://www.flickr.com/photos/johnwlong2000/5766405202
Raw
rainbow.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="/stylesheets/rainbow.css" />
</head>
<body>
<div class="rainbow"></div>
<div class="rainbow"></div>
</body>
</html>
Raw
rainbow.scss
@import "compass";
@include global-reset;
$stripe-width: 40px;
@mixin double-stripe($color-1, $color-2, $width) {
background: $color-2;
border: $stripe-width solid $color-1;
border-bottom: none;
@include border-top-radius($width / 2);
content: "";
display: block;
height: ($width - (2 * $stripe-width)) / 2;
width: $width - (2 * $stripe-width);
}
body {
margin: 25px;
}
.rainbow {
@include double-stripe(red, orange, $stripe-width * 12);
position: relative;
display: inline-block;
@include opacity(0.50);
&:before {
@include double-stripe(yellow, green, $stripe-width * 8);
position: absolute;
top: $stripe-width;
left: $stripe-width;
}
&:after {
@include double-stripe(blue, purple, $stripe-width * 4);
position: absolute;
top: $stripe-width * 3;
left: $stripe-width * 3;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment