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
download
alternative link download
Posted by at
Labels: , ,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)