{ Snipperize } /CSS

CSS snippets

Relevent Tags

CSS Sticky Footer

must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser HTML ========================================================================== <div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>

CSS / sticky, footer / by ThePeppersStudio (53 days, 10.09 hours ago)

CSS Image Hover

CSS image hover with fade in-out effect.

CSS / image, hover, fade, transition / by ThePeppersStudio (53 days, 10.16 hours ago)

Cross Browser Opacity

Includes ie8, ie5, ie6, ie7, netscape, safari, etc.

CSS / ie, safari, opacity, transparent / by ThePeppersStudio (146 days, 13.92 hours ago)

Cross Browser Hr Styling

Here’s a way to get cross-browser hr tags with some progressive-enhancement niceties. Note the use of page-break-after for printing purposes, as well as the line-height and margin to position the :after content (which are section symbols). you set both the color and background-color since different browsers render hrs differently. The goal here is to make the line look like a line of the color you intended, not necessarily to make it look exactly the same in all browsers. hr { background-color:#444; border-width:0; color:#444; height:2px; line-height:0; margin:-.5em 10px 1.8571em 10px; page-break-after:always; text-align:center; width:80%; } hr:after { content:"\a7\a7"; font-size:1.25em; }

CSS / hr, ie / by ThePeppersStudio (146 days, 13.95 hours ago)

常用CSS字体列表

CSS / font, font stack / by ThePeppersStudio (180 days, 16.42 hours ago)

Master CSS Template (Including Eric Meyers CSS Reset)

CSS / reset, template / by ThePeppersStudio (196 days, 22.68 hours ago)

Pixels to Ems Conversion Table for CSS

The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%. Formula to calculate em equivalent for any pixel value required 1 ÷ parent font size (px) × required pixels = em equivalent

CSS / convert, em, px / by ThePeppersStudio (197 days, 10.77 hours ago)

Reset CSS Plus clearfix

This is Eric Meyer's (meyerweb.com/eric/) CSS Reset with the "clearfix" class added in for forcing containers to wrap floats. Also, uses the uncommon "zoom" property to achieve the same effect in IE6/7. I like "zoom:1;" for this purpose because as an invalid CSS property, it stands a much better chance of not influencing other/good browsers' rendering.

CSS / reset, clearfix, zoom / by ThePeppersStudio (201 days, 15.27 hours ago)

Text Rotate For All Browsers

Text rotate in css implementation

CSS / rotate, -webkit-transform, -moz-transform, DXImageTransform / by ThePeppersStudio (209 days, 13.19 hours ago)

Preload Images Use CSS

This is a really useful techniques for preloading images on your website. Just place this code after the body tag in the CSS file. Everytime you refer to this image in your CSS file the image will be loaded from cache.

CSS / image, preload, cache / by ThePeppersStudio (222 days, 13.37 hours ago)