Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Sunday, February 23, 2014
Cool CSS tricks
CSS to turn everything in website upside down:
body {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
CSS to blur everything in website for every 30 seconds
body {
-webkit-animation: blur 30s infinite;
}
CSS to spin everything in website
body {
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}
CSS to flip all images of website
img {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
CSS to change font of everything of website to Comic Sans
body, p, body p, body div p {
font-family: Comic Sans MS, cursive !important;
}
CSS to spin all images of website
img {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
CSS to hide second paragraph of a website
p:nth-child(2) {
display:none !important;
}
CSS to change cursor of website to wait permanently
html {
cursor:wait !important;
}
CSS to hide the cursor of website permanently
html {
cursor:none !important;
}
CSS to slowly grow all text of a website
p {
-webkit-animation: grow 120s ease-in;
-moz-animation: grow 120s ease-in;
animation: grow 120s ease-in;
}
CSS to make everything in website fall over
html, body {
height: 100%;
}
html {
-webkit-perspective: 1000;
perspective: 1000;
}
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
CSS to insert a word before every paragraph
p:before {
content: "ha ha ha ";
}
/* Animations needed by above tricks*/
/* Add this also to your CSS file
@-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
49% { -webkit-filter: blur(0px); }
50% { -webkit-filter: blur(1px); }
51% { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(0px); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes rainbow {
100% { -webkit-filter: hue-rotate(360deg); }
}
@-webkit-keyframes fall {
0% { -webkit-transform: none; }
100% { -webkit-transform: rotateX(-90deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fall {
0% { transform: none; }
100% { transform: rotateX(-90deg); }
}
@-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-moz-keyframes fall {
0% { transform: none; }
100% { transform: rotateX(-90deg); }
}
@-webkit-keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
@-moz-keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
@keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
Adapted from April fool css prank https://gist.github.com/steveosoule2/5295646
Subscribe to:
Posts (Atom)