Skip to content
Browse files

refactored z-index error and tweaked defaults for lifted corner drop …

…shadows
  • Loading branch information...
1 parent 26ed4d9 commit 4d0d3c1985d353344d17273995b50fe403b5884e @michaek michaek committed with Mar 19, 2012
View
6 stylesheets/recipes/shadow/drop/_lifted-corners.scss
@@ -18,18 +18,18 @@
* @thanks Matt Hamm @matthamm
* @link http://matthamm.com/box-shadow-curl.html
*/
-@mixin drop-shadow-lifted-corners($height: 15px, $margin: 10px, $angle: 4deg, $color: rgba(#000, .7))
+@mixin drop-shadow-lifted-corners($height: 15px, $margin: 10px, $angle: 6deg, $color: rgba(#000, .7))
{
position: relative;
z-index: 1;
- @include box-shadow(0 1px $height/2 lighten($color, 40%));
+ @include box-shadow(0 1px $height/4 transparentize($color, 0.6));
&::before,
&::after
{
content:"";
position:absolute;
- z-index: -1;
+ z-index: -2;
bottom: $height+$margin;
View
5 tests/recipes/shadow/drop/curved/s.css
@@ -24,10 +24,15 @@
* @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
*/
/**
+ * Drop shadow w/ lifted corners parent element. Totally optional.
+ */
+/**
* Drop shadow w/ lifted corners
*
* @thanks Nicolas Gallagher @necolas
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ * @thanks Matt Hamm @matthamm
+ * @link http://matthamm.com/box-shadow-curl.html
*/
/**
* Drop shadow w/ perspective
View
38 tests/recipes/shadow/drop/s.css
@@ -24,10 +24,15 @@
* @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
*/
/**
+ * Drop shadow w/ lifted corners parent element. Totally optional.
+ */
+/**
* Drop shadow w/ lifted corners
*
* @thanks Nicolas Gallagher @necolas
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ * @thanks Matt Hamm @matthamm
+ * @link http://matthamm.com/box-shadow-curl.html
*/
/**
* Drop shadow w/ perspective
@@ -167,33 +172,40 @@ a.more {
*/
.drop-shadow-lifted-corners {
position: relative;
+ z-index: 1;
+ -webkit-box-shadow: 0 1px 3.75px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 0 1px 3.75px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 3.75px rgba(0, 0, 0, 0.1);
}
.drop-shadow-lifted-corners::before, .drop-shadow-lifted-corners::after {
content: "";
position: absolute;
z-index: -2;
- bottom: 15px;
- width: 50%;
- height: 20%;
+ bottom: 25px;
+ width: 70%;
+ height: 55%;
+ max-width: 300px;
+ /* avoid rotation causing ugly appearance at large container widths */
+ max-height: 100px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
}
.drop-shadow-lifted-corners::before {
left: 10px;
- -webkit-transform: rotate(-4deg);
- -moz-transform: rotate(-4deg);
- -ms-transform: rotate(-4deg);
- -o-transform: rotate(-4deg);
- transform: rotate(-4deg);
+ -webkit-transform: skew(-12deg) rotate(-6deg);
+ -moz-transform: skew(-12deg) rotate(-6deg);
+ -ms-transform: skew(-12deg) rotate(-6deg);
+ -o-transform: skew(-12deg) rotate(-6deg);
+ transform: skew(-12deg) rotate(-6deg);
}
.drop-shadow-lifted-corners::after {
right: 10px;
- -webkit-transform: rotate(4deg);
- -moz-transform: rotate(4deg);
- -ms-transform: rotate(4deg);
- -o-transform: rotate(4deg);
- transform: rotate(4deg);
+ -webkit-transform: skew(12deg) rotate(6deg);
+ -moz-transform: skew(12deg) rotate(6deg);
+ -ms-transform: skew(12deg) rotate(6deg);
+ -o-transform: skew(12deg) rotate(6deg);
+ transform: skew(12deg) rotate(6deg);
}
.drop-shadow-perspective {

0 comments on commit 4d0d3c1

Please sign in to comment.
Something went wrong with that request. Please try again.