Cool CSS tricks

Roshan Karki Unknown
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

Comments

Post a Comment

Comments are moderated. No spam please.

Popular posts from this blog

Perm Root HTC Desire Gingerbread 2.3.3

Roshan Karki Anonymous
This guide is for permanently rooting HTC Desire running stock Android Gingerbread 2.3.3 . If you want to temp root then you can follow this guide. Before starting please be aware that problems while rooting can brick your phone. While the process in this guide is relatively simple and easy, I can't be held responsible for whatever happens. Enable USB debugging in your phone by going to  Settings  ->  Applications  ->  Development . Plug in your phone to the computer. Go to Revolutionary website  http://revolutionary.io/  . From there download revolutionary software. Leave this browser tab opened. We need to generate Serial key later. Extract the downloaded software on your computer and run the software with root permission. $sudo ./revolutionary It will tell you your serial number and ask for the beta key. Copy the serial number and go to the browser tab we left open while downloading the software. Put the serial key there...
Read more

Increase Free Space On HTC Desire Android Phones

Roshan Karki Anonymous
Are you running out of free space on phones like HTC Desire and variants? It only has about 150MB of free space and after official Gingerbread 2.3.3 update the free space has decreased. Its really frustrating seeing all those apps with 20MB+ size eating up valuable space on Android phones. Even with App2SD I had very very difficult time maintaining free space. Installing apps like Facebook, Google Plus, Google Reader would eat up all the space. Today I used link2sd to increase free space on my Android phone and now I've more than 1GB of free space for installing apps. I've been installed so so many apps now. link2sd can move your application apk, dex and lib files to second partition of your SD card and creates a symlink where necessary. Even when you mount your SD card in computer the apps in SD card will work as only the first partition will be mounted in computer. Requirements : Root MicroSD card Clockworkmod recovery to partitoin the SD ca...
Read more

Logging Handler With Buffering And Uses Amazon SES For Python

Roshan Karki Unknown
This Python logging handler can be used to combine multiple log message in one email message and send the log email using Amazon SES . Boto is used to send email using Amazon SES. Email will be send once the buffer reaches the capacity you've specified. To force send the email before it reaches the buffer capacity you can shutdown the logger by calling its shutdown method.You can simultaneously keep logging in file or other places by adding more handler.
Read more