0 Best CSS Time Saving Tools

The Cascading Style Sheets (CSS) is considered as one of the most popular and widely used development language. CSS is quite easy to learn and use, it also offer some really nice features.
Aside from the fact that CSS is quite fun as compared to other languages, but still some of the tasks in it can be quite irksome. For this reason, various CSS tools were created to help you and make your life easier as a programmer.
We are going to present to you a list of the Top 10 Best CSS Tools to save your Time. This kind of tools will definitely help you do your work more quickly and save your precious time. The most important thing is it will enhance your productivity.
Here's the Top 10 Best CSS Tools: Listed in No Particular Order
1. Quick Form Builder
Accessify’s quick form builder merges two older tools (form builder and form element generator).
2. CSS Text Shadow
It is an amazing CSS tool that generates text shadows.
3. Sencha Animator
Sencha Animator is a powerful CSS3 Tool for creating Animations, text, images, buttons with gradients and embed analytics.
4. CSS Menu Maker
CSS Menu Maker is one of the best tool that provides every freelancer to create custom cross browser compatible CSS menus. You do not need any background of programming because it provides source code for all CSS menus.
5. Patternify
Patternify is a CSS pattern generator.
6. CSS Compressor
An amazing CSS Tool to compress CSS code and and help to speed your website loading time. It can save your server bandwidth as well compressed CSS in a good balance.
7. Prefixr
Prefixr provides Cross-Browser CSS in Seconds! it is also helpful for developers in testing their codes.
8. 3D Transforms
CSS 3D Transforms is an online tool that provides various level of Transforms. This tool is on experimental mode and require specific prefixes in all browsers.
9. CSS3 PIE: Decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
10. Layer Style
Layer Style is like graphic editor which creates codes in CSS.

0 radio button,checkbox styling using css3 and HTML5

Fig:check_radio_sheet.png

 

1. <!DOCTYPE html>  
2. <html>  
3. <head> 
4. <link rel="stylesheet" href="gift.css?v=1.0">  
5. <title>radio button,checkbox styling using css3 and HTML5</title>  
6. </head>  
7. <body>  
8. <p> 
9. <input type="radio" id="chkgift-1" value="1">Gift one
   <label for="chkgift-1"></label>
   <input type="radio" id="chkgift-2" value="2">Gift Two 
   <label for="chkgift-2"></label>   
10. <p>  
11. <p>  
12. <p>  
13. </body>  
14. </html>

gift.css

input[type="radio"] {

    display:none;

}
 input[type="radio"] + label span {

    position: absolute;
    top:3px;
    left:3px;
    width:19px;
    height:19px;
    vertical-align:middle;
    background:url("../images/check_radio_sheet.png") -38px top no-repeat;
    cursor:pointer;

}
 input[type="radio"]:checked + label span {

    background:url("../images/check_radio_sheet.png") -57px top no-repeat;

}

0 What does !important mean in CSS?

Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser.The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example
Example:

p { color: #ff0000 !important; }

 p { color: #000000; }

0 We can create Rotating Buttons in html using css.

http://technotipworld.blogspot.in/p/php.html

0 CSSDeck – Collection of CSS Creations

 CSSDeck as a collection or gallery of Items that have been made with Pure HTML and CSS using least to no images. Some of them are awesome but useless, while some are amazing and reusable in real world projects. Some are not supported by Internet explorer 8 and below so it’s up to you to decide.

From the website -

A Collection of Pure CSS Creations! Let’s form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS.

0 Image Caching with CSS

we begin by segregating our strategy to target different media types. For example, for web pages featuring both screen and print stylesheets, we treat each separately by writing this:

@media screen {}
@media print {}

Then, to ensure that the images are preloaded in all browsers, we need to avoid the use of either display:none; or visibility:hidden; in the method. Rather than risking non-caching by hiding or preventing the display of images that need preloaded, we ensure their display and position them far outside of the screen. To do this, we enclose all images that need cached within some specifically identified division like so:

<div id="preloader">
 <img src="http://domain.tld/path/images/01.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/02.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/03.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/04.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/05.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/06.png" width="1" height="1" />
 <img src="http://domain.tld/path/images/07.png" width="1" height="1" />
</div>

Then, with that markup in place, we flesh out the previous media directives with the following CSS:

@media screen {
 div#preloader {
  position: absolute;
  left: -9999px;
  top:  -9999px;
  }
 div#preloader img {
  display: block;
  }
 }
@media print {
 div#preloader, 
 div#preloader img {
  visibility: hidden;
  display: none;
  }
 }

Here, we have the preloader division positioned far to the lower-left outside of the screen, and then redundantly specify block display on the image elements.

Finally, to prevent the unwanted display of these preloaded images via print media, we simply hide the images via display:none; and visibility:hidden; declarations.

When using this method to preload/cache images, remember to call the preloaded images by using the exact same path used for the original preloaded image. For caching to work, the browser must reference an existing resource via the identical path.

This method is designed to enable the caching of specified images in virtually all visual browsing devices.