Skip to content

Instantly share code, notes, and snippets.

@kaelig
Created March 1, 2012 11:36
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save kaelig/1949202 to your computer and use it in GitHub Desktop.
Save kaelig/1949202 to your computer and use it in GitHub Desktop.
Different Shades of transparent colors with Sass
// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8
// Extend this class to save bytes
.transparent-background {
background-color: transparent;
zoom: 1;
}
// The mixin
@mixin transparent($color, $alpha) {
$rgba: rgba($color, $alpha);
$ie-hex-str: ie-hex-str($rgba);
@extend .transparent-background;
background-color: $rgba;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}
// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
@each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
.#{$name}-#{$alpha} {
@include transparent($color, $alpha / 100);
}
}
}
// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);
.transparent-background, .dark-90, .dark-80, .dark-70, .dark-60, .dark-50, .dark-40, .dark-30, .dark-20, .dark-10, .light-90, .light-80, .light-70, .light-60, .light-50, .light-40, .light-30, .light-20, .light-10 {
background-color: transparent;
zoom: 1;
}
.dark-90 {
background-color: rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6000000,endColorstr=#E6000000);
}
.dark-80 {
background-color: rgba(0, 0, 0, 0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
}
.dark-70 {
background-color: rgba(0, 0, 0, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000);
}
.dark-60 {
background-color: rgba(0, 0, 0, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
.dark-50 {
background-color: rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
}
.dark-40 {
background-color: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.dark-30 {
background-color: rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4D000000,endColorstr=#4D000000);
}
.dark-20 {
background-color: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
}
.dark-10 {
background-color: rgba(0, 0, 0, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000,endColorstr=#1A000000);
}
.light-90 {
background-color: rgba(255, 255, 255, 0.9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF,endColorstr=#E6FFFFFF);
}
.light-80 {
background-color: rgba(255, 255, 255, 0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
}
.light-70 {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF,endColorstr=#B3FFFFFF);
}
.light-60 {
background-color: rgba(255, 255, 255, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF,endColorstr=#99FFFFFF);
}
.light-50 {
background-color: rgba(255, 255, 255, 0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);
}
.light-40 {
background-color: rgba(255, 255, 255, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);
}
.light-30 {
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4DFFFFFF,endColorstr=#4DFFFFFF);
}
.light-20 {
background-color: rgba(255, 255, 255, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF);
}
.light-10 {
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1AFFFFFF,endColorstr=#1AFFFFFF);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment