Permalink
Browse files

Update glass effect

  • Loading branch information...
1 parent e885319 commit eedd10cfbf3bbd1f441e7f4ae5ed5eee0991bc1d @MoOx committed Mar 22, 2012
Showing with 68 additions and 66 deletions.
  1. +19 −16 stylesheets/recipes/effect/_glass.scss
  2. +42 −49 tests/recipes/effect/glass/s.css
  3. +7 −1 tests/recipes/effect/glass/s.scss
@@ -1,19 +1,22 @@
-/**
- * Glass effect
- * Use this on image for better effect render
- *
- * Inspired from Simurai's IMDB redisign
- *
- * @link http://lab.simurai.com/redesign/imdb
- * @thanks Simurai @simurai
- */
+//
+// Glass effect
+// Use this on image for better effect render
+//
+// Inspired from Simurai's IMDB redisign
+//
+// @link http://archive.simurai.com/lab/imdb/
+// @thanks Simurai @simurai
+//
@import '../shared/pseudo-element';
@mixin effect-glass(
- $color: #fff,
+ $color: rgba(#fff, .12),
$reflectDegree: -45deg,
- $border-radius: 4px
+ $border-radius: .2em,
+ $border-color: rgba(#000, .2),
+ $size: 50%,
+ $size-fadeout: .5%
)
{
position: relative;
@@ -27,13 +30,13 @@
right: 0;
bottom: 0;
left: 0;
- border: transparent solid 1px;
+ border: 1px solid transparent; // transparent fallback
+ border-color: $border-color;
@include border-radius($border-radius);
@include box-shadow(
- inset $color 0 0 2px,
- inset rgba($color,.4) 0 5px 10px
+ inset opacify($color, .6) 0 0 2px, // inner glow
+ inset rgba($color, .4) 0 0 10px // inner glow
);
- @include background(
- linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
+ @include background(linear-gradient($reflectDegree, $color, transparentize($color, .06) $size, transparentize($color, 1) $size + $size-fadeout));
}
}
@@ -1,13 +1,4 @@
/**
- * Glass effect
- * Use this on image for better effect render
- *
- * Inspired from Simurai's IMDB redisign
- *
- * @link http://lab.simurai.com/redesign/imdb
- * @thanks Simurai @simurai
- */
-/**
* Note IE7/6 doesn't understand pseudo element as ::before and ::after
* IE8 need to have :before and not ::before
* So use only : and not :: if you want to support IE8
@@ -20,11 +11,11 @@
.glass {
position: relative;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- -ms-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ -ms-border-radius: 0.2em;
+ -o-border-radius: 0.2em;
+ border-radius: 0.2em;
background: #000;
width: 400px;
height: 400px;
@@ -38,32 +29,33 @@
right: 0;
bottom: 0;
left: 0;
- border: transparent solid 1px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- -ms-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- -moz-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, rgba(255, 255, 255, 0.12)), color-stop(50.5%, rgba(255, 255, 255, 0)));
- background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
+ border: 1px solid transparent;
+ border-color: rgba(0, 0, 0, 0.2);
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ -ms-border-radius: 0.2em;
+ -o-border-radius: 0.2em;
+ border-radius: 0.2em;
+ -webkit-box-shadow: inset rgba(255, 255, 255, 0.72) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ -moz-box-shadow: inset rgba(255, 255, 255, 0.72) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ box-shadow: inset rgba(255, 255, 255, 0.72) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ background: -webkit-gradient(linear, -45deg, -45deg, color-stop(0%, rgba(255, 255, 255, 0.12)), color-stop(50%, rgba(255, 255, 255, 0.06)), color-stop(50.5%, rgba(255, 255, 255, 0)));
+ background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50.5%);
+ background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50.5%);
+ background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50.5%);
+ background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50.5%);
+ background: linear-gradient(-45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50.5%);
}
.glass-blue {
width: 100px;
height: 100px;
position: relative;
- -webkit-border-radius: 0.6em;
- -moz-border-radius: 0.6em;
- -ms-border-radius: 0.6em;
- -o-border-radius: 0.6em;
- border-radius: 0.6em;
+ -webkit-border-radius: 0.3em;
+ -moz-border-radius: 0.3em;
+ -ms-border-radius: 0.3em;
+ -o-border-radius: 0.3em;
+ border-radius: 0.3em;
background: black url(http://lorempixel.com/100/100/) no-repeat;
}
.glass-blue:after {
@@ -75,19 +67,20 @@
right: 0;
bottom: 0;
left: 0;
- border: transparent solid 1px;
- -webkit-border-radius: 0.6em;
- -moz-border-radius: 0.6em;
- -ms-border-radius: 0.6em;
- -o-border-radius: 0.6em;
- border-radius: 0.6em;
- -webkit-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- -moz-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
- background: -webkit-gradient(linear, -20deg, -20deg, color-stop(50%, rgba(255, 255, 255, 0.12)), color-stop(50.5%, rgba(255, 255, 255, 0)));
- background: -webkit-linear-gradient(-20deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -moz-linear-gradient(-20deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -o-linear-gradient(-20deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: -ms-linear-gradient(-20deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
- background: linear-gradient(-20deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
+ border: 1px solid transparent;
+ border-color: rgba(0, 0, 0, 0.2);
+ -webkit-border-radius: 0.3em;
+ -moz-border-radius: 0.3em;
+ -ms-border-radius: 0.3em;
+ -o-border-radius: 0.3em;
+ border-radius: 0.3em;
+ -webkit-box-shadow: inset rgba(255, 255, 255, 0.85) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ -moz-box-shadow: inset rgba(255, 255, 255, 0.85) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ box-shadow: inset rgba(255, 255, 255, 0.85) 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 0 10px;
+ background: -webkit-gradient(linear, -60deg, -60deg, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(40%, rgba(255, 255, 255, 0.19)), color-stop(41%, rgba(255, 255, 255, 0)));
+ background: -webkit-linear-gradient(-60deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0) 41%);
+ background: -moz-linear-gradient(-60deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0) 41%);
+ background: -o-linear-gradient(-60deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0) 41%);
+ background: -ms-linear-gradient(-60deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0) 41%);
+ background: linear-gradient(-60deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0) 41%);
}
@@ -19,6 +19,12 @@
{
width: 100px;
height: 100px;
- @include effect-glass(#fff, -20deg, .6em);
+ @include effect-glass(
+ $color: rgba(#fff, .25),
+ $reflectDegree: -60deg,
+ $border-radius: .3em,
+ $size: 40%,
+ $size-fadeout: 1%
+ );
background: #000 url(http://lorempixel.com/100/100/) no-repeat;
}

0 comments on commit eedd10c

Please sign in to comment.