src/resources/themes/vendor/compass-recipes/tests/recipes/effect/bevel/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 .avatar, .avatar1, .avatar2 {
  34   width: 100px;
  35   height: 100px;
  36   background-size: 100px;
  37   -moz-border-radius: 5px;
  38   -webkit-border-radius: 5px;
  39   -o-border-radius: 5px;
  40   -ms-border-radius: 5px;
  41   -khtml-border-radius: 5px;
  42   border-radius: 5px;
  43   display: inline-block;
  44   background: none center center no-repeat;
  45 }
  46
  47 .avatar1 {
  48   background-image: url(http://a3.twimg.com/profile_images/1106236669/twitter_sharp.png);
  49 }
  50
  51 .avatar2 {
  52   background-image: url(https://twimg0-a.akamaihd.net/profile_images/1513955198/IMG_0853-cut.jpg);
  53 }
  54
  55 .bevel-shadow {
  56   -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
  57   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
  58   -o-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
  59   box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
  60 }
  61
  62 .bevel-border {
  63   border: 1px solid rgba(51, 51, 51, 0.5);
  64   border-top-color: rgba(71, 71, 71, 0.5);
  65   border-bottom-color: rgba(31, 31, 31, 0.5);
  66 }
  67
  68 .bevel-shadow-soft {
  69   -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
  70   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
  71   -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
  72   box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
  73 }