286 lines
4.7 KiB
CSS
286 lines
4.7 KiB
CSS
/*
|
|
aprilFools.css
|
|
Written by Wes Bos
|
|
Modified by Nick Karamoff
|
|
I assume no responsibility for angry co-workers or lost productivity
|
|
Put these CSS definitons into your co-workers Custom.css file.
|
|
|
|
They will be applied to every website they visit as well as their developer tools.
|
|
|
|
|
|
|
|
/*
|
|
Turn every website upside down
|
|
|
|
body {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
blur every website for a split second every 30 seconds
|
|
|
|
body {
|
|
animation: blur 30s infinite;
|
|
}
|
|
|
|
/*
|
|
Spin every Website
|
|
|
|
body {
|
|
animation: spin 5s linear infinite;
|
|
}
|
|
|
|
/*
|
|
Flip all images upside down
|
|
|
|
img {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
COMIC SANS EVERYTHING
|
|
|
|
|
|
body, p, body p, body div p {
|
|
font-family: 'Comic Sans MS', cursive !important;
|
|
}
|
|
|
|
/*
|
|
Spin all images
|
|
|
|
img {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/*
|
|
Hide every 2nd paragraph element on a page
|
|
|
|
p:nth-child(2) {
|
|
display:none !important;
|
|
}
|
|
|
|
/*
|
|
Permanent cursor wait
|
|
|
|
html {
|
|
cursor:wait !important;
|
|
}
|
|
|
|
/*
|
|
hide the cursor all together
|
|
|
|
html {
|
|
cursor:none !important;
|
|
}
|
|
|
|
/*
|
|
slowly grow text
|
|
|
|
p {
|
|
animation: grow 120s ease-in;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
Spin dev tools round and round
|
|
|
|
#-webkit-web-inspector {
|
|
-webkit-animation: spin 1s linear infinite;
|
|
}
|
|
|
|
|
|
/*
|
|
Flip dev tools upside down
|
|
|
|
#-webkit-web-inspector {
|
|
-webkit-transform:rotate(180deg);
|
|
}
|
|
|
|
|
|
/* Hide the close button
|
|
#-webkit-web-inspector .toolbar-item.close-left {
|
|
display:none !important;
|
|
}
|
|
|
|
|
|
/* Make console text all blurry
|
|
#-webkit-web-inspector .console-group-messages {
|
|
text-shadow: 0 0 3px rgba(0,0,0,.5) !important;
|
|
}
|
|
|
|
#-webkit-web-inspector .console-error-level .console-message-text,
|
|
#-webkit-web-inspector .console-error-level .section .header .title {
|
|
text-shadow: 0 0 3px rgba(255,0,0,.5) !important;
|
|
}
|
|
|
|
#-webkit-web-inspector .console-user-command > .console-message-text {
|
|
text-shadow: 0 0 3px rgba(0,128,255,.5) !important;
|
|
}
|
|
|
|
#-webkit-web-inspector .console-group-messages,
|
|
#-webkit-web-inspector .console-user-command > .console-message-text,
|
|
#-webkit-web-inspector .console-formatted-null,
|
|
#-webkit-web-inspector .console-formatted-undefined,
|
|
#-webkit-web-inspector .console-debug-level .console-message-text,
|
|
#-webkit-web-inspector .console-error-level .console-message-text,
|
|
#-webkit-web-inspector .console-error-level .section .header .title,
|
|
#-webkit-web-inspector .console-group-messages .section .header .title,
|
|
#-webkit-web-inspector .console-formatted-object,
|
|
#-webkit-web-inspector .console-formatted-node,
|
|
#-webkit-web-inspector .console-formatted-array,
|
|
#-webkit-web-inspector .section .properties .name,
|
|
#-webkit-web-inspector .event-properties .name,
|
|
#-webkit-web-inspector .console-formatted-object .name,
|
|
#-webkit-web-inspector .console-formatted-number,
|
|
#-webkit-web-inspector .console-formatted-string,
|
|
#-webkit-web-inspector #console-messages a {
|
|
color: transparent !important;
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
animation: rainbow 8s infinite;
|
|
}
|
|
|
|
|
|
/*
|
|
Make every website fall over!
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
perspective: 1000;
|
|
}
|
|
|
|
body {
|
|
transform-origin: bottom center;
|
|
transform: rotateX(-90deg);
|
|
animation: fall 1.5s ease-in;
|
|
}
|
|
|
|
|
|
/*
|
|
Insert a phrase every paragraph
|
|
|
|
p:before {
|
|
content: "YOLO ";
|
|
}
|
|
|
|
|
|
/* New tricks by Nick Karamoff */
|
|
|
|
/*
|
|
Flip every paragraph upside down
|
|
|
|
p {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
|
|
/*
|
|
Flip every header upside down
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
|
|
/*
|
|
Mirror the whole webpage
|
|
|
|
body {
|
|
transform: scale(-1, 1);
|
|
}
|
|
|
|
/*
|
|
Transparent paragraphs
|
|
|
|
p {
|
|
color: transparent;
|
|
}
|
|
|
|
/*
|
|
"Very good design" combo (blue bg, red text, Comic Sans)
|
|
|
|
body, p, h1, h2, h3, h4, h5, h6 {
|
|
color: red;
|
|
background-color: blue;
|
|
font-family: "Comic Sans", cursive;
|
|
}
|
|
|
|
/*
|
|
Deactivate all the links
|
|
|
|
a {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/*
|
|
Unlinkify links (standart formatting, but still clickable)
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: default;
|
|
}
|
|
|
|
/*
|
|
Links not allowed
|
|
|
|
a {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/*
|
|
Everything's a link!
|
|
|
|
body {
|
|
cursor: pointer;
|
|
}
|
|
*/
|
|
|
|
|
|
/* Animations */
|
|
|
|
/*
|
|
Everything that is moving is powered from here, so just copy this whole chunk
|
|
*/
|
|
|
|
@keyframes blur {
|
|
0% { filter: blur(0px); }
|
|
49% { filter: blur(0px); }
|
|
50% { filter: blur(1px); }
|
|
51% { filter: blur(0px); }
|
|
100% { filter: blur(0px); }
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
100% { filter: hue-rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes fall {
|
|
0% { transform: none; }
|
|
100% { transform: rotateX(-90deg); }
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% { font-size: none; }
|
|
100% { font-size: 80pt; }
|
|
}
|