Animated Recycle with Open Close Style using CSS3

CSS3 has some awesome techniques, let have do some form using transition property.

Have a look

Mouse hover on Recile Bin

Another example in table format mouse hover on last bin icon to see the cool animated effect

Language Name	How to say hello	Delete
Assamese	নমস্কাৰ (nomoskaar)
Bengali	নমস্কার (nômoshkar)
Gujarati	નમસ્તે (namaste)
Hindi	नमस्ते (namaste) नमस्कार (namaskār)
Kannada	ನಮಸ್ತೆ (namaste)
Malayalam	നമസ്തെ (namaste)
Oriya	ନମସ୍କର (namascara)
Punjabi	ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ। / ست سِری اَکال (sat srī akāl)
Tamil	வணக்கம் (vaṇakkam)

How it works:

Basically there are 3 div tag, A parent div tag will hold 2 child div.

1. Parent div for trash holder
2. Can div
3. Lid div

See the below to check with with border style, you can get more idea by this

So lets create CSS3 to get the animated recile bin icon.
See the Below Code :

<div class="trash" title="Remove"><span class="lid"></span><span class="can"></span></div>

You can see that there is a div tag with "trash", and two child div tag one with has "lid" class and second has "can" class
Now apply below CSS3 code to make it animated

.trash{transition:opacity 200ms;width:128px;height:128px;opacity:0.8;position:relative;right:0;top:3px;vertical-align:middle;cursor:pointer;margin:50px auto 10px}  
 .trash > .lid{transform-origin:19% 100%;transition:transform 150ms;height:28px;width:128px;-webkit-transform-origin:-7% 100%}  
 .trash > .can{background-position:0 -30px!important;width:128px;height:97px;margin:30px 0 0;padding:0!important}  
 .trash > .can,.trash > .lid{background:url(img/RecycleBin.png) 0 0 no-repeat;position:absolute;right:8px;top:2px;-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 250ms}  
 .trash > .can:hover{border:none!important;box-shadow:none!important}  
 .trash > span{display:inline-block}  
 .trash:focus > .lid,.trash:hover > .lid{transform:rotate(-45deg);transition:transform 250ms;-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 250ms}  

I have tested with Chrome, Firefox, Internet Explorer 11

Click here to download source file from GitHub.

enjoy!
saAction

Read More

IIS Performance Improvement using IIS Add-On

We always care about performance in our application development, specially for web applications.
.Net Framework 4.5 has many features available for it, But as Web Server we always dependable on IIS.

Internet Information Services is an extensible web server for all .Net web application. So its handling all web sites and web services in Hosting Server.

IIS.net is Official Microsoft IIS Site, There are many downloads available to apply add-on functionalities for IIS in IIS Community Contributed Downloads

Download categories are deploy-and-migrate, develop, handle-requests, improve-performance, Manage, Secure, etc

I like to introduce Improve Performance, its a very unique add-ons available to IIS, here is some list which have experience:

1) Google Page Speed optimization for Microsoft IIS 7 and up
Speed up your website and drive conversions by automatically apply best practices, without affecting your workflow. Use more then 40 filters to optimize your html and resources, including mobile specific optimizations. Now also includes "In Place Resource Optimization" - a new optimization mode designed for shared hosters and forward proxy setups. IISpeed has a free mode which inserts a small banner at the bottom of optimized webpages, which can be removed by buying a license. Powered by Google PageSpeed. Works with any content, including static content, ASP.NET, PHP, ColdFusion, and Application Request Routing.

2) Aptimize Website Accelerator
The world’s biggest companies trust Aptimize to accelerate their websites and intranets. Aptimize Website Accelerator is an ISAPI filter for Microsoft IIS that automates performance tuning by dynamically optimizing web pages for high performance at runtime – just before a page is sent from web server to browser. Aptimize helps you reduce page load times by up to 75%.

3) httpZip HTTP Compression for IIS
HTTP compression accelerates page loads, speeds up web apps, and reduces bandwidth costs dramatically. HttpZip transparently compresses webpages to reduce file sizes to as little as 2% of their original size (that's 98% smaller!). Safe defaults make httpZip an excellent choice for hosting providers or any site/app with complex code. With MIME type, file, and directory exclusions, browser compatibility checking delivers granular control over safe file compression.

4) IIS Traffic Monitor
While trying to work out which users on a server were consuming the most resources, I realised there was no easy way to see how much bandwidth an IIS website has used for a given period in time. A quick search showed plenty of commercial products that could be installed as filters to keep track of this kind of thing, but there didn't appear to be anything quick, simple and importantly, free. So I found some source code that uses Microsoft Log Parser (also free) to interrogate the log files for each site, and come up with a number to show how much traffic has gone through a website. I packaged it up into a nice little application and that's what you see here.

5) Web Performance Monitor
Web Performance Monitor is an easy to use web-based performance monitoring application. It allows you to monitor performance counters from your local or remote computer, in real time. It supports all major browsers, supports running over SSL and uses Ajax for smooth updates.

All above tools are not developed by Microsoft, so it is recommended to take backup before any installation. also read documentation to get guidance.

To download can directly install on IIS Server, but it is also available from Web Platform Installer.

Read More