Difference between revisions of "MediaWiki:Common.css"

From TwistedMUCK
Jump to: navigation, search
(Replaced content with "CSS placed here will be applied to all skins: ")
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 +
 +
.glitch{
 +
  color:white;
 +
  font-size:100px;
 +
  position:relative;
 +
  width:400px;
 +
  margin:0 auto;
 +
}
 +
@keyframes noise-anim{
 +
  $steps:20;
 +
  @for $i from 0 through $steps{
 +
    #{percentage($i*(1/$steps))}{
 +
      clip:rect(random(100)+px,9999px,random(100)+px,0);
 +
    }
 +
  }
 +
}
 +
.glitch:after{
 +
  content:attr(data-text);
 +
  position:absolute;
 +
  left:2px;
 +
  text-shadow:-1px 0 red;
 +
  top:0;
 +
  color:white;
 +
  background:black;
 +
  overflow:hidden;
 +
  clip:rect(0,900px,0,0);
 +
  animation:noise-anim 2s infinite linear alternate-reverse;
 +
}
 +
 +
@keyframes noise-anim-2{
 +
  $steps:20;
 +
  @for $i from 0 through $steps{
 +
    #{percentage($i*(1/$steps))}{
 +
      clip:rect(random(100)+px,9999px,random(100)+px,0);
 +
    }
 +
  }
 +
}
 +
.glitch:before{
 +
  content:attr(data-text);
 +
  position:absolute;
 +
  left:-2px;
 +
  text-shadow:1px 0 blue;
 +
  top:0;
 +
  color:white;
 +
  background:black;
 +
  overflow:hidden;
 +
  clip:rect(0,900px,0,0);
 +
  animation:noise-anim-2 3s infinite linear alternate-reverse;
 +
}

Revision as of 05:46, 2 January 2016

/* CSS placed here will be applied to all skins */
 
.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}
 
@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}
Personal tools