hello.markdown

codl's css disaster: the cheat sheet

;:spin

:;spin the other way

comic sans

#brands

the four above work anywhere on the line, others only work at the beginning

>rainbow text

~swingy text

}}big shakey text

+green

-red

make this small please: small text

LTRhLTReLTRlLTRlLTRo

also links to images get embedded automatically

thanks for reading have a nice day

the css and filters are below if you'd like this mess in your own channel

the good shit.js

// paste this in your chat filters and click import

[{"name":"comic sans","source":"(cos?m(ic|o) sand?s)","flags":"gi","replace":"<span style=\"font-size: 1.1em; font-family:'comic sans', 'comic sans ms';\">\\1</span>","active":true,"filterlinks":true},{"name":"images","source":"(http[^ ]+\\.(gif|jpeg|jpg|png))","flags":"g","replace":"<a target=\"blank\" href=\"\\1\"><img src=\"\\1\" /></a>","active":true,"filterlinks":true},{"name":"~ wow","source":"^~(.*)$","flags":"","replace":"<h1><span class=\"wow\">\\1</span></h1>","active":true,"filterlinks":false},{"name":"}} big trembl","source":"^}}(.*)$","flags":"","replace":"<h1 class=\"trembl\">\\1</h1>","active":true,"filterlinks":false},{"name":"} trembl","source":"^}(.*)$","flags":"g","replace":"<span class=\"trembl\">\\1</span>","active":true,"filterlinks":false},{"name":"\"green\"text inside things","source":">(&gt;.*)</","flags":"","replace":"><span class=\"greentext\">\\1</span></","active":true,"filterlinks":false},{"name":";:twist","source":";:(.*)$","flags":"g","replace":"<span class=\"twist\">\\1</span>","active":true,"filterlinks":false},{"name":":;reverse","source":":;(.*)$","flags":"g","replace":"<span class=\"twist reverse\">\\1</span>","active":true,"filterlinks":false},{"name":"diff +","source":"^\\+(.*)$","flags":"g","replace":"<span class=\"diff plus\">+\\1</span>","active":true,"filterlinks":false},{"name":"diff -","source":"^\\-(.*)$","flags":"g","replace":"<span class=\"diff minus\">-\\1</span>","active":true,"filterlinks":false},{"name":"small","source":"^make this small please:(.*)$","flags":"g","replace":"<span class=\"smol\">\\1</span>","active":true,"filterlinks":false},{"name":"hashtag","source":"(^|\\s|>)#([^\\s]*)","flags":"g","replace":"\\1<a class=\"hashtag\">#\\2</a>","active":true,"filterlinks":false},{"name":"dancing letter","source":"LTR([a-z0-9])","flags":"g","replace":"<img src=\"http://toons.artie.com/alphabet/ralph/color_cycling/arg-\\1-50-transa.gif\" />","active":true,"filterlinks":false}]

tthe good shit.css

/* paste this in your channel CSS */

#messagebuffer img {
max-width: 75%;
max-height: 250px;
}

#messagebuffer h1 {
  perspective: 6em;
  display: inline-block;
  margin: 0;
}

#messagebuffer h1 span.wow {
  display: inline-block;
  animation: 2s wowow infinite ease-in-out alternate;
  transform-origin: top center;
  will-change: transform;
}

@keyframes wowow {
  from {
    transform: rotateX(-40deg);
  }
  to {
    transform: rotateX(+40deg);
  }
}

.trembl {
  animation: .4s trembl 50 linear ;
  will-change: transform;
}

.trembl:hover {
  animation-play-state: paused;
}

h1.trembl {
  color: red;
  margin: 0;
}

@keyframes trembl {
  10% { transform: translate(-.6em, .6em); }
  20% { transform: translate(0em, -.6em); }
  30% { transform: translate(.6em, .6em); }
  40% { transform: translate(0, 0); }
  50% { transform: translate(.6em, -.6em); }
  60% { transform: translate(.6em, 0em); }
  70% { transform: translate(-.6em, -.6em); }
  80% { transform: translate(-.6em, .6em); }
  90% { transform: translate(.6em, 0px); }
}

.greentext {
  animation: .2s colours infinite linear;
  color: red;
}

@keyframes colours {
  from {
    filter: hue-rotate(0deg);
    -webkit-filter: hue-rotate(0deg);
    -moz-filter: hue-rotate(0deg);
    -o-filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -o-filter: hue-rotate(360deg);
  }
}

div.flashr {
  content: "fhfdkjlshfk";
  animation: .6s flashr 1 ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  pointer-events: none;
  z-index: 100000;
  text-align: center;
  font-size: 10em;
  opacity: 0;
  color: white;
  background: black;
  padding: 10vw;
}

@keyframes flashr {
  from {
    opacity: 1;
  }
}

.twist {
  animation: 1s twist infinite linear;
  display: inline-block;
}

.reverse {
  animation-direction: reverse;
}

@keyframes twist {
  to {
    transform: rotate(360deg);
  }
}



.twist:hover {
  animation-play-state: paused;
}

.diff.plus {
  color: #67af33;
}

.diff.minus {
  color: #c93658;
}

.smol {
  font-size: 0.65em;
}

a.hashtag::before {
  content: "viral +1";
  display: inline-block;
  width: 0;
  white-space: nowrap;
  color: green;
  text-shadow: 0 0 1px black;
  font-size: 0.9em;
  animation: float-up .9s linear;
  animation-fill-mode: forwards;
  opacity: 0;
}

a.hashtag:nth-child(4n+1)::before {
  content: "brand engagement +1";
  animation-delay: 0.5s;
}

a.hashtag:nth-child(4n+2)::before {
  content: "growth hacking +1";
  animation-delay: 0.7s;
}

a.hashtag:nth-child(4n+3)::before {
  content: "search engine optimization +1";
  animation-delay: 0.2s;
}

@keyframes float-up {
  from {
    transform: translatey(-5px);
    opacity: 1;
  }
  to {
    transform: translatey(-60px);
    opacity: 0;
  }
}