Kiwi Farms Awful Community CSS Project - Run this at your own risk

[Temmie]

Let's create a custom CSS style one post at a time.

You'll need something like Stylus to use custom CSS on the site, I won't explain how to set it up because if you understand this thread you should be able to.

Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
Chromium: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Rules:

• You can add one new CSS rule per post
  
  • ...and anything that rule depends on, like keyframes.
• You can alter rules created by other users before you.
• Nothing that fundamentally renders the site unusable. Ugly is fine, difficult to use is fine, but don't like black out the whole page.
• Describe the change/if possible include a screenshot.

I'll start:

.message-avatar-wrapper {
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(359deg);}
}

Now avatars are constantly rotating!

 

[peachlover669]

Convert it all to pure html, as god intended

 

[#FF0000]

Make the highlight color (green in the case of the default theme) random every time you load a page

 

[We Are The Witches]

Someone made a thread for some random things to spin, by using the Font Awesome functionality on this site:
https://kiwifarms.st/threads/since-its-halloween-i-wanted-to-post-a-fun-script-as-a-treat.203537/

---

Incidentally, I made some time ago like a blueprint to make keyframes for transform:translate, so whatever, you can add this to your keyframes, some random pattern I came up with:

@keyframes animation {
    0% {transform:translate(0%, 0%);}
    1.3513513513513513% {transform:translate(25.724787771376324%, -12.862393885688162%);}
    2.7027027027027026% {transform:translate(12.862393885688162%, -38.587181657064484%);}
    4.054054054054054% {transform:translate(-25.724787771376324%, -51.44957554275265%);}
    5.405405405405405% {transform:translate(-38.587181657064484%, -25.724787771376324%);}
    6.756756756756756% {transform:translate(-51.44957554275265%, 0%);}
    8.108108108108107% {transform:translate(-38.587181657064484%, 25.724787771376324%);}
    9.459459459459458% {transform:translate(0%, 38.587181657064484%);}
    10.810810810810809% {transform:translate(51.44957554275265%, 25.724787771376324%);}
    12.16216216216216% {transform:translate(64.3119694284408%, -12.862393885688162%);}
    13.51351351351351% {transform:translate(51.44957554275265%, -51.44957554275265%);}
    14.864864864864861% {transform:translate(12.862393885688162%, -90.03675719981715%);}
    16.216216216216214% {transform:translate(-51.44957554275265%, -102.8991510855053%);}
    17.567567567567565% {transform:translate(-90.03675719981715%, -64.3119694284408%);}
    18.918918918918916% {transform:translate(-141.48633274256977%, -12.862393885688162%);}
    20.270270270270267% {transform:translate(-128.6239388568816%, 51.44957554275265%);}
    21.621621621621617% {transform:translate(12.862393885688162%, 128.6239388568816%);}
    22.97297297297297% {transform:translate(64.3119694284408%, 102.8991510855053%);}
    24.32432432432432% {transform:translate(102.8991510855053%, 64.3119694284408%);}
    25.67567567567567% {transform:translate(115.76154497119344%, 12.862393885688162%);}
    27.02702702702702% {transform:translate(115.76154497119344%, -25.724787771376324%);}
    28.378378378378372% {transform:translate(102.8991510855053%, -64.3119694284408%);}
    29.729729729729723% {transform:translate(77.17436331412897%, -102.8991510855053%);}
    31.081081081081074% {transform:translate(38.587181657064484%, -115.76154497119344%);}
    32.43243243243243% {transform:translate(0%, -115.76154497119344%);}
    33.78378378378378% {transform:translate(-51.44957554275265%, -64.3119694284408%);}
    35.13513513513514% {transform:translate(-77.17436331412897%, -12.862393885688162%);}
    36.48648648648649% {transform:translate(-77.17436331412897%, 38.587181657064484%);}
    37.837837837837846% {transform:translate(-51.44957554275265%, 64.3119694284408%);}
    39.1891891891892% {transform:translate(0%, 64.3119694284408%);}
    40.540540540540555% {transform:translate(25.724787771376324%, 38.587181657064484%);}
    41.89189189189191% {transform:translate(25.724787771376324%, 12.862393885688162%);}
    43.24324324324326% {transform:translate(0%, -12.862393885688162%);}
    44.59459459459462% {transform:translate(-12.862393885688162%, -12.862393885688162%);}
    45.94594594594597% {transform:translate(-64.3119694284408%, -51.44957554275265%);}
    47.29729729729733% {transform:translate(-102.8991510855053%, -38.587181657064484%);}
    48.64864864864868% {transform:translate(-102.8991510855053%, 12.862393885688162%);}
    50.000000000000036% {transform:translate(-38.587181657064484%, 38.587181657064484%);}
    51.35135135135139% {transform:translate(25.724787771376324%, 77.17436331412897%);}
    52.702702702702744% {transform:translate(0%, 102.8991510855053%);}
    54.0540540540541% {transform:translate(-51.44957554275265%, 102.8991510855053%);}
    55.40540540540545% {transform:translate(-90.03675719981715%, 90.03675719981715%);}
    56.75675675675681% {transform:translate(-51.44957554275265%, 25.724787771376324%);}
    58.10810810810816% {transform:translate(-12.862393885688162%, 0%);}
    59.45945945945952% {transform:translate(51.44957554275265%, -25.724787771376324%);}
    60.81081081081087% {transform:translate(90.03675719981715%, -77.17436331412897%);}
    62.162162162162225% {transform:translate(77.17436331412897%, -128.6239388568816%);}
    63.51351351351358% {transform:translate(38.587181657064484%, -141.48633274256977%);}
    64.86486486486493% {transform:translate(-38.587181657064484%, -51.44957554275265%);}
    66.21621621621628% {transform:translate(-51.44957554275265%, -25.724787771376324%);}
    67.56756756756764% {transform:translate(-64.3119694284408%, 25.724787771376324%);}
    68.91891891891899% {transform:translate(-102.8991510855053%, 0%);}
    70.27027027027034% {transform:translate(-115.76154497119344%, -25.724787771376324%);}
    71.6216216216217% {transform:translate(-115.76154497119344%, -64.3119694284408%);}
    72.97297297297305% {transform:translate(-77.17436331412897%, -90.03675719981715%);}
    74.32432432432441% {transform:translate(-25.724787771376324%, -90.03675719981715%);}
    75.67567567567576% {transform:translate(0%, -64.3119694284408%);}
    77.02702702702712% {transform:translate(38.587181657064484%, -12.862393885688162%);}
    78.37837837837847% {transform:translate(64.3119694284408%, 12.862393885688162%);}
    79.72972972972983% {transform:translate(77.17436331412897%, 51.44957554275265%);}
    81.08108108108118% {transform:translate(51.44957554275265%, 77.17436331412897%);}
    82.43243243243253% {transform:translate(12.862393885688162%, 102.8991510855053%);}
    83.78378378378389% {transform:translate(-25.724787771376324%, 90.03675719981715%);}
    85.13513513513524% {transform:translate(-64.3119694284408%, 51.44957554275265%);}
    86.4864864864866% {transform:translate(-64.3119694284408%, 0%);}
    87.83783783783795% {transform:translate(-38.587181657064484%, -12.862393885688162%);}
    89.1891891891893% {transform:translate(38.587181657064484%, -38.587181657064484%);}
    90.54054054054066% {transform:translate(38.587181657064484%, -64.3119694284408%);}
    91.89189189189202% {transform:translate(0%, -102.8991510855053%);}
    93.24324324324337% {transform:translate(-38.587181657064484%, -90.03675719981715%);}
    94.59459459459472% {transform:translate(-64.3119694284408%, -25.724787771376324%);}
    95.94594594594608% {transform:translate(-25.724787771376324%, 25.724787771376324%);}
    97.29729729729743% {transform:translate(0%, 25.724787771376324%);}
    98.64864864864879% {transform:translate(12.862393885688162%, 12.862393885688162%);}
    100% {transform:translate(0%, 0%);}
}

Yeah, those percentages should be rounded at some point, but SCREW IT!
Do the animation for 2 seconds.

 

[Temmie]

a:hover {
  font-size: 1.5rem;
}

 

[Coberald]

@keyframes noglasses {
  from {
    filter: blur(.7px); }
  50% {
    filter:blur(0px)
  }
  55% {
    filter:blur(1px)
  }
  70%{
    filter:blur(0px)
  }
  75% { filter:blur(.6px)}
  82% { filter:blur(0px)}
  to {
    filter: blur(2px);
  }
}

 

[We Are The Witches]

By the way, if you want cool CSS besides from keyframes, you can use "filter": https://www.w3schools.com/cssref/css3_pr_filter.php

Something like filter: invert(100%); or filter: hue-rotate(180deg);

 

[Temmie]

By the way, if you want cool CSS besides from keyframes, you can use "filter": https://www.w3schools.com/cssref/css3_pr_filter.php

Something like filter: invert(100%); or filter: hue-rotate(180deg);

View attachment 6660444View attachment 6660460

I am not a CSS wizard and I did not know this existed. TIL.

.bbImage {
   filter: sepia(65%)
}

 

[Crab Latte]

 

[Pierre D'Olnique]

And here I was thinking this was about Counter-Strike: Source.

 

[Cats]

Now avatars are constantly rotating!

you take that down at once. noone can equip my cat as their own, a normal human wouldnt even be able to lift it, even in its shrunken current state.

 

[Snorky]

Everything is in Comic Sans now.

* {
    font-family: 'Comic Sans MS', 'Comic Sans' !important;
}

 

[#FF0000]

a {
    background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

Graphics design is my passion

 

[Temmie]

Let's pretend we've had a bit to drink.

body {
  overflow-x: hidden;
}

.p-body {
    animation-name: tipsy;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes tipsy {
    from {
        transform: rotate(0.2deg);
    }
    50% {
        transform: rotate(-0.2deg);
    }
    to {
        transform: rotate(0.2deg);
    }
}

 

[Don Yagon]

* {
 display: none !important;
}

 

[QQQ]

.p-pageWrapper {
  min-height:100%;
  background:
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
   0 0/100% 200%;
   animation: a 2s linear infinite;
}

@keyframes a {
  to {background-position:0 -200%}
}

Enjoy

* { display: none !important; }

No.

 

[Temmie]

* {
 display: none !important;
}

Nothing that fundamentally renders the site unusable.

No can do boss.

Enjoy

I love it.

Since I can't edit my OP (thanks mods), here is the current combined community CSS for your Kiwiing pleasure.

* {
    font-family: 'Comic Sans MS', 'Comic Sans' !important;
}

body {
    overflow-x: hidden;
    animation-name: noglasses;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.p-body {
    animation-name: tipsy;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.p-pageWrapper {
    min-height: 100%;
    background: linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) 0 0/100% 200%;
    animation: a 2s linear infinite;
}

.bbImage {
    filter: sepia(65%)
}

.message-avatar-wrapper {
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

a {
    background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

a:hover {
    font-size: 1.5rem;
}

@keyframes a {
    to {
        background-position: 0 -200%
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes tipsy {
    from {
        transform: rotate(0.2deg);
    }
    50% {
        transform: rotate(-0.2deg);
    }
    to {
        transform: rotate(0.2deg);
    }
}

@keyframes noglasses {
    from {
        filter: blur(.7px);
    }
    50% {
        filter: blur(0px)
    }
    55% {
        filter: blur(1px)
    }
    70% {
        filter: blur(0px)
    }
    75% {
        filter: blur(.6px)
    }
    82% {
        filter: blur(0px)
    }
    to {
        filter: blur(2px);
    }
}

 

[Buck Breaker]

This is fucking gay