Template:CSS/javascript

From 2014.igem.org

Revision as of 06:40, 24 March 2015 by Shashank dbeb iitd (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

</html> <style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300);

$strength : 180; $shade : 40%; $letters : 13; $size : 14vw; $background : desaturate(navy, 80%);

html, body { height: 100%; } body {

 display: flex;
 justify-content: center;
 align-items: center;
 background: 
   radial-gradient(
     $background,
     shade($background, 40%)
   );
 overflow: hidden;
 cursor: -webkit-grab;
 font: 900 $size Open Sans;
 line-height: $strength * 1vh;
 letter-spacing: -$size*.15;
 text-transform: uppercase;
 text-shadow: 0 2px 15px $background;

}

span {

 display: inline-block;
 position: relative;
 
 @for $i from 1 through ceil($letters/2) {
  &:nth-child(#{$i}) {
    $z : ceil($letters/2) - $i;
    z-index: $z;
  } 
 }
 
 @for $i from 1 through ceil($letters/2) {
   &:nth-child(#{$i}),
   &:nth-last-child(#{$i}) {
     $color : adjust-hue(red, 31% * $i);
     $shade : shade($color, 30%);
     transform: 
       rotateX($i*8deg);
     color: $color;
     
   }
 }

} </style> </html>