src/resources/themes/vendor/compass-recipes/tests/recipes/shadow/drop/s.css

   1 html {
   2   padding: 1em;
   3   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
   4   background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
   5   background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
   6   background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
   7   background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
   8   background: linear-gradient(#dddddd, #ffffff) no-repeat;
   9 }
  10
  11 h1 {
  12   font-size: 2em;
  13   margin-bottom: 1em;
  14 }
  15
  16 h2 {
  17   font-size: 1.4em;
  18   margin-bottom: .6em;
  19 }
  20
  21 .doc {
  22   background: #fff;
  23   border: #ddd;
  24   padding: 1em;
  25   color: #aaa;
  26   margin: 1em;
  27   font-style: italic;
  28 }
  29 .doc a {
  30   color: #999;
  31 }
  32
  33 /**
  34  * Drop shadow mixins from Nicolas Gallagher demo
  35  *
  36  * @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
  37  *
  38  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  39  */
  40 /**
  41  * Drop shadow curled
  42  *
  43  * @thanks Nicolas Gallagher @necolas
  44  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  45  */
  46 /**
  47  * Drop shadow curved
  48  *
  49  * @thanks Nicolas Gallagher @necolas
  50  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  51  */
  52 /**
  53  * Drop shadow flying
  54  *
  55  * @thanks Geoffrey Crofte @geoffrey_crofte
  56  * @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
  57  */
  58 /**
  59  * Drop shadow w/ lifted corners
  60  *
  61  * @thanks Nicolas Gallagher @necolas
  62  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  63  */
  64 /**
  65  * Drop shadow w/ perspective
  66  *
  67  * @thanks Nicolas Gallagher @necolas
  68  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  69  */
  70 /**
  71  * Drop shadow raised
  72  *
  73  * @thanks Nicolas Gallagher @necolas
  74  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  75  */
  76 /**
  77  * Drop shadow rules required for transform on drop shadow
  78  *
  79  * /!\ This is required if you want to apply some transform on the element using drop shadow
  80  *
  81  * @thanks Nicolas Gallagher @necolas
  82  * @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  83  */
  84 /**
  85  * Shadow along the top edge of the browser viewport
  86  *
  87  * @link http://playground.genelocklin.com/depth/
  88  */
  89 div {
  90   width: 18em;
  91   height: 10em;
  92   margin: 5em auto;
  93   background: #eeeeee;
  94   border: 1px solid #ccc;
  95 }
  96 div p {
  97   padding: 3em 0;
  98   text-align: center;
  99 }
 100
 101 a.more {
 102   display: block;
 103   width: 100px;
 104   margin: -50px auto 0;
 105 }
 106
 107 /*
 108  * This is required is you want to apply some transform on the element using drop shadow
 109  */
 110 .drop-shadow-curved-vt,
 111 .drop-shadow-lifted-corners,
 112 .drop-shadow-perspective {
 113   position: relative;
 114 }
 115 .drop-shadow-curved-vt > :last-child::before,
 116 .drop-shadow-lifted-corners > :last-child::before,
 117 .drop-shadow-perspective > :last-child::before {
 118   content: "";
 119   position: absolute;
 120   z-index: -1;
 121   top: 0;
 122   bottom: 0;
 123   left: 0;
 124   right: 0;
 125   background: #eeeeee;
 126 }
 127 .drop-shadow-curved-vt:hover,
 128 .drop-shadow-lifted-corners:hover,
 129 .drop-shadow-perspective:hover {
 130   -moz-transform: rotate(3deg);
 131   -webkit-transform: rotate(3deg);
 132   -o-transform: rotate(3deg);
 133   -ms-transform: rotate(3deg);
 134   transform: rotate(3deg);
 135 }
 136
 137 .drop-shadow-curled-corners {
 138   position: relative;
 139   -moz-border-radius: 0 0 120px 120px/0 0 6px 6px;
 140   -webkit-border-radius: 0 0 120px 120px/0 0 6px 6px;
 141   -o-border-radius: 0 0 120px 120px/0 0 6px 6px;
 142   -ms-border-radius: 0 0 120px 120px/0 0 6px 6px;
 143   -khtml-border-radius: 0 0 120px 120px/0 0 6px 6px;
 144   border-radius: 0 0 120px 120px/0 0 6px 6px;
 145 }
 146 .drop-shadow-curled-corners:before, .drop-shadow-curled-corners:after {
 147   content: "";
 148   position: absolute;
 149   z-index: -2;
 150   bottom: 12px;
 151   width: 50%;
 152   height: 55%;
 153   -moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
 154   -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
 155   -o-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
 156   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
 157 }
 158 .drop-shadow-curled-corners:before {
 159   left: 10px;
 160   -moz-transform: skew(-8deg) rotate(-3deg);
 161   -webkit-transform: skew(-8deg) rotate(-3deg);
 162   -o-transform: skew(-8deg) rotate(-3deg);
 163   -ms-transform: skew(-8deg) rotate(-3deg);
 164   transform: skew(-8deg) rotate(-3deg);
 165 }
 166 .drop-shadow-curled-corners:after {
 167   right: 10px;
 168   -moz-transform: skew(8deg) rotate(3deg);
 169   -webkit-transform: skew(8deg) rotate(3deg);
 170   -o-transform: skew(8deg) rotate(3deg);
 171   -ms-transform: skew(8deg) rotate(3deg);
 172   transform: skew(8deg) rotate(3deg);
 173 }
 174
 175 .drop-shadow-curved-vt {
 176   position: relative;
 177 }
 178 .drop-shadow-curved-vt:before {
 179   content: "";
 180   position: absolute;
 181   z-index: -1;
 182   top: 10px;
 183   bottom: 10px;
 184   left: 0;
 185   right: 0;
 186   -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
 187   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
 188   -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
 189   box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
 190   -moz-border-radius: 0.1;
 191   -webkit-border-radius: 0.1;
 192   -o-border-radius: 0.1;
 193   -ms-border-radius: 0.1;
 194   -khtml-border-radius: 0.1;
 195   border-radius: 0.1;
 196 }
 197
 198 /*
 199 .drop-shadow-flying
 200 {
 201     @include drop-shadow-flying;
 202 }
 203 */
 204 .drop-shadow-lifted-corners {
 205   position: relative;
 206 }
 207 .drop-shadow-lifted-corners::before, .drop-shadow-lifted-corners::after {
 208   content: "";
 209   position: absolute;
 210   z-index: -2;
 211   bottom: 15px;
 212   width: 50%;
 213   height: 20%;
 214   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 215   -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 216   -o-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 217   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 218 }
 219 .drop-shadow-lifted-corners::before {
 220   left: 10px;
 221   -moz-transform: rotate(-4deg);
 222   -webkit-transform: rotate(-4deg);
 223   -o-transform: rotate(-4deg);
 224   -ms-transform: rotate(-4deg);
 225   transform: rotate(-4deg);
 226 }
 227 .drop-shadow-lifted-corners::after {
 228   right: 10px;
 229   -moz-transform: rotate(4deg);
 230   -webkit-transform: rotate(4deg);
 231   -o-transform: rotate(4deg);
 232   -ms-transform: rotate(4deg);
 233   transform: rotate(4deg);
 234 }
 235
 236 .drop-shadow-perspective {
 237   position: relative;
 238 }
 239 .drop-shadow-perspective:before {
 240   content: "";
 241   position: absolute;
 242   z-index: -2;
 243   left: 80px;
 244   bottom: 5px;
 245   width: 50%;
 246   height: 35%;
 247   -moz-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
 248   -webkit-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
 249   -o-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
 250   box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
 251   -moz-transform: skew(50deg);
 252   -webkit-transform: skew(50deg);
 253   -o-transform: skew(50deg);
 254   -ms-transform: skew(50deg);
 255   transform: skew(50deg);
 256   -moz-transform-origin: 0 100% 50%;
 257   -webkit-transform-origin: 0 100% 50%;
 258   -o-transform-origin: 0 100% 50%;
 259   -ms-transform-origin: 0 100% 50%;
 260   transform-origin: 0 100% 50%;
 261 }
 262
 263 .drop-shadow-raised {
 264   -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
 265   -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
 266   -o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
 267   box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
 268 }