src/resources/themes/vendor/compass-recipes/tests/recipes/effect/glass/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  * Glass effect
  35  * Use this on image for better effect render
  36  *
  37  * Inspired from Simurai's IMDB redisign
  38  *
  39  * @link http://lab.simurai.com/redesign/imdb
  40  * @thanks Simurai @simurai
  41  */
  42 /**
  43  * Note IE7/6 doesn't understand pseudo element as ::before and ::after
  44  * IE8 need to have :before and not ::before
  45  * So use only : and not :: if you want to support IE8
  46  * IE9 Webkit Firefox Opera understand ::
  47  */
  48 .glass,
  49 .glass-blue {
  50   width: 400px;
  51   height: 400px;
  52   margin: 20px auto;
  53   background: #000;
  54 }
  55
  56 .glass {
  57   position: relative;
  58   -moz-border-radius: 4px;
  59   -webkit-border-radius: 4px;
  60   -o-border-radius: 4px;
  61   -ms-border-radius: 4px;
  62   -khtml-border-radius: 4px;
  63   border-radius: 4px;
  64 }
  65 .glass:after {
  66   content: "";
  67   position: asolute;
  68   display: block;
  69   overflow: hidden;
  70   top: 0;
  71   right: 0;
  72   bottom: 0;
  73   left: 0;
  74   border: transparent solid 1px;
  75   -moz-border-radius: 4px;
  76   -webkit-border-radius: 4px;
  77   -o-border-radius: 4px;
  78   -ms-border-radius: 4px;
  79   -khtml-border-radius: 4px;
  80   border-radius: 4px;
  81   -moz-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
  82   -webkit-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
  83   -o-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
  84   box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
  85   background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, rgba(255, 255, 255, 0.12)), color-stop(50.5%, rgba(255, 255, 255, 0)));
  86   background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
  87   background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
  88   background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
  89   background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
  90   background: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
  91 }
  92
  93 .glass-blue {
  94   position: relative;
  95   -moz-border-radius: 1em;
  96   -webkit-border-radius: 1em;
  97   -o-border-radius: 1em;
  98   -ms-border-radius: 1em;
  99   -khtml-border-radius: 1em;
 100   border-radius: 1em;
 101 }
 102 .glass-blue:after {
 103   content: "";
 104   position: asolute;
 105   display: block;
 106   overflow: hidden;
 107   top: 0;
 108   right: 0;
 109   bottom: 0;
 110   left: 0;
 111   border: transparent solid 1px;
 112   -moz-border-radius: 1em;
 113   -webkit-border-radius: 1em;
 114   -o-border-radius: 1em;
 115   -ms-border-radius: 1em;
 116   -khtml-border-radius: 1em;
 117   border-radius: 1em;
 118   -moz-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
 119   -webkit-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
 120   -o-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
 121   box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
 122   background: -webkit-gradient(linear, -20deg, -20deg, color-stop(50%, rgba(221, 221, 255, 0.12)), color-stop(50.5%, rgba(221, 221, 255, 0)));
 123   background: -webkit-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
 124   background: -moz-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
 125   background: -o-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
 126   background: -ms-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
 127   background: linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
 128 }