diff --git a/aprilFools.css b/aprilFools.css index 91fd8c5..a3b4e85 100644 --- a/aprilFools.css +++ b/aprilFools.css @@ -57,6 +57,36 @@ img { animation: spin 1s linear infinite;*/ } +/* + Invert all image colors +*/ +/* +img { + -webkit-filter: invert(1); + filter: invert(1); +} +*/ + +/* + Blurs all images. + You can change the number inside blur(...) for more or less blur. +*/ +/* +img { + -webkit-filter: blur(5px); + filter: blur(5px); +} +*/ +/* + B/W every image +*/ +/* +img { + -webkit-filter: grayscale(1); + filter: grayscale(1); +} +*/ + /* Hide every 2nd paragraph element on a page */ @@ -166,6 +196,66 @@ body { } */ +/* + Webpage shakes uncontrollably +*/ +/* +html { + -webkit-animation: shake 0.1s infinite; + -moz-animation: shake 0.1s infinite; + -ms-animation: shake 0.1s infinite; + -o-animation: shake 0.1s infinite; + animation: shake 0.1s infinite; + position: relative; + overflow-x: hidden; + top: 0; left: 0; +} +*/ +/* + Webpage slooowly crawls away +*/ +/* +html { + -webkit-animation: sayonara 30s; + -moz-animation: sayonara 30s; + -ms-animation: sayonara 30s; + -o-animation: sayonara 30s; + -animation: sayonara 30s; + position: relative; + overflow-x: hidden; + left: 0; +} +*/ +/* + Animated rainbow background on webpage +*/ +/* +html, body { + background-image: none !important; + background-clip: initial !important; + background-size: initial !important; + background-position: initial !important; + -webkit-animation: rainbow 3s linear 0 infinite normal; + -moz-animation: rainbow 3s linear 0 infinite normal; + -ms-animation: rainbow 3s linear 0 infinite normal; + -o-animation: rainbow 3s linear 0 infinite normal; + animation: rainbow 3s linear 0 infinite normal; +} +*/ + + +/* + Make every website super small by default. + You can change the numbers inside scale(...). 1 = default "zoom" +*/ +/* +body { + -webkit-transform: scale(0.2); + -ms-transform: scale(0.2); + transform: scale(0.2); +} +*/ + /* Insert a phrase every paragraph */ @@ -175,6 +265,40 @@ p:before { } */ +/* + All paragraphs/text upside down +*/ +/* +p, span, a { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +*/ +/* + Rainbow paragraphs and text + Courtesy of http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/ +*/ +/* +p, span, a { + background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); + background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); + color: transparent; + -webkit-background-clip: text; + background-clip: text; +} +*/ +/* + Make EVERYTHING UPPERCASE!!! + (you can change "uppercase" to "lowercase" to achieve the opposite effect) +*/ +/* +* { + text-transform: uppercase; +} +*/ + + /* Animations */ @-webkit-keyframes blur { @@ -232,3 +356,118 @@ p:before { 0% { font-size: none; } 100% { font-size: 80pt; } } + +@-webkit-keyframes shake { + 0% { top: -1px; left: 0; } + 25% { top: 0; left: -1px; } + 50% { top: 1px; left: 0; } + 75% { top: 0; left: 1px; } + 100% { top: -1px; left: 0; } +} + +@-moz-keyframes shake { + 0% { top: -1px; left: 0; } + 25% { top: 0; left: -1px; } + 50% { top: 1px; left: 0; } + 75% { top: 0; left: 1px; } + 100% { top: -1px; left: 0; } +} + +@-ms-keyframes shake { + 0% { top: -1px; left: 0; } + 25% { top: 0; left: -1px; } + 50% { top: 1px; left: 0; } + 75% { top: 0; left: 1px; } + 100% { top: -1px; left: 0; } +} + +@-o-keyframes shake { + 0% { top: -1px; left: 0; } + 25% { top: 0; left: -1px; } + 50% { top: 1px; left: 0; } + 75% { top: 0; left: 1px; } + 100% { top: -1px; left: 0; } +} + +@-keyframes shake { + 0% { top: -1px; left: 0; } + 25% { top: 0; left: -1px; } + 50% { top: 1px; left: 0; } + 75% { top: 0; left: 1px; } + 100% { top: -1px; left: 0; } +} + +@-webkit-keyframes sayonara { + from { left: 0; } + to { left: 110%; } +} + +@-moz-keyframes sayonara { + from { left: 0; } + to { left: 110%; } +} + +@-ms-keyframes sayonara { + from { left: 0; } + to { left: 110%; } +} + +@-o-keyframes sayonara { + from { left: 0; } + to { left: 110%; } +} + +@keyframes sayonara { + from { left: 0; } + to { left: 110%; } +} + +@-webkit-keyframes rainbow { + 0% { background-color: red; } + 16.6% { background-color: orange; } + 33.3% { background-color: yellow; } + 50% { background-color: green; } + 66.6% { background-color: blue; } + 83.3% { background-color: violet; } + 100% { background-color: red; } +} + +@-moz-keyframes rainbow { + 0% { background-color: red; } + 16.6% { background-color: orange; } + 33.3% { background-color: yellow; } + 50% { background-color: green; } + 66.6% { background-color: blue; } + 83.3% { background-color: violet; } + 100% { background-color: red; } +} + +@-ms-keyframes rainbow { + 0% { background-color: red; } + 16.6% { background-color: orange; } + 33.3% { background-color: yellow; } + 50% { background-color: green; } + 66.6% { background-color: blue; } + 83.3% { background-color: violet; } + 100% { background-color: red; } +} + +@-o-keyframes rainbow { + 0% { background-color: red; } + 16.6% { background-color: orange; } + 33.3% { background-color: yellow; } + 50% { background-color: green; } + 66.6% { background-color: blue; } + 83.3% { background-color: violet; } + 100% { background-color: red; } +} + +@keyframes rainbow { + 0% { background-color: red; } + 16.6% { background-color: orange; } + 33.3% { background-color: yellow; } + 50% { background-color: green; } + 66.6% { background-color: blue; } + 83.3% { background-color: violet; } + 100% { background-color: red; } +}