src/resources/themes/vendor/compass-recipes/tests/recipes/shape/ellipse/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  * Shape/Ellipse
  35  *
  36  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  37  */
  38 div {
  39   background: #000;
  40   margin: 4em auto;
  41 }
  42
  43 .circle {
  44   width: 10em;
  45   height: 10em;
  46   -moz-border-radius: 5em;
  47   -webkit-border-radius: 5em;
  48   -o-border-radius: 5em;
  49   -ms-border-radius: 5em;
  50   -khtml-border-radius: 5em;
  51   border-radius: 5em;
  52 }
  53
  54 .ellipse-h {
  55   width: 20em;
  56   height: 10em;
  57   -webkit-border-radius: 10em 5em;
  58   -moz-border-radius: 10em / 5em;
  59   -o-border-radius: 10em / 5em;
  60   -ms-border-radius: 10em / 5em;
  61   -khtml-border-radius: 10em / 5em;
  62   border-radius: 10em / 5em;
  63 }
  64
  65 .ellipse-v {
  66   width: 10em;
  67   height: 20em;
  68   -webkit-border-radius: 5em 10em;
  69   -moz-border-radius: 5em / 10em;
  70   -o-border-radius: 5em / 10em;
  71   -ms-border-radius: 5em / 10em;
  72   -khtml-border-radius: 5em / 10em;
  73   border-radius: 5em / 10em;
  74 }
  75
  76 .ellipse-nw {
  77   width: 20em;
  78   height: 10em;
  79   -webkit-border-radius: 10em 5em;
  80   -moz-border-radius: 10em / 5em;
  81   -o-border-radius: 10em / 5em;
  82   -ms-border-radius: 10em / 5em;
  83   -khtml-border-radius: 10em / 5em;
  84   border-radius: 10em / 5em;
  85   -moz-transform: rotate(45deg);
  86   -webkit-transform: rotate(45deg);
  87   -o-transform: rotate(45deg);
  88   -ms-transform: rotate(45deg);
  89   transform: rotate(45deg);
  90 }