{"id":27,"date":"2010-09-02T15:18:02","date_gmt":"2010-09-02T06:18:02","guid":{"rendered":"http:\/\/santoshkori.com\/blog\/?p=27"},"modified":"2012-08-29T20:57:48","modified_gmt":"2012-08-29T11:57:48","slug":"useful-css-snippets-for-developers","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/useful-css-snippets-for-developers\/","title":{"rendered":"Useful CSS Snippets for Developers"},"content":{"rendered":"

CSS is no doubt up there with the most important web languages that we use. While html provides the structure it can be inconsistent and unpredictable across different new and old browsers. Css is where the html is styled though, and where we get creative as well as addressing those\u00a0inconsistencies. Below is a fantastic list of 25 Css snippets that I am sure you will find\u00a0extremely\u00a0useful. Whether you are a veteran web developer, or are just getting your foot in the door of css, they are all well worth checking out.<\/p>\n

Hide text with text indent<\/h2>\n

This is extremely useful for use for things such as your company logo. More often than not, it\u2019s an image, but you\u2019ll want to display it in h1 tags for SEO as well. Here\u2019s the best way to do so. What we basically do is hide the text far away off the screen, and apply a background image instead.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\nh<\/code>1<\/code> {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\ntext-indent<\/code>:<\/code>-9999px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nmargin<\/code>:<\/code>0<\/code> auto<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nwidth<\/code>:<\/code>400px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nheight<\/code>:<\/code>100px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\nbackground<\/code>:<\/code>transparent<\/code> url<\/code>(<\/code>\"images\/logo.jpg\"<\/code>) <\/code>no-repeat<\/code> scroll<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Style links depending on file format<\/h2>\n

This snippet is aimed at user experience. Often on the internet we find ourself clicking on links knowing nothing about where we are heading. This snippet can be used and expanded to show small icons next to your links telling the user if it is an external link, an email, a pdf, an image, and so much more.<\/p>\n

\n
\n
\n\n\n\n
01<\/code><\/td>\n\/* external links *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\na[href^=<\/code>\"http:\/\/<\/a>\"<\/code>]{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\npadding-right<\/code>: <\/code>20px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\nbackground<\/code>: <\/code>url<\/code>(external.gif) <\/code>no-repeat<\/code> center<\/code> right<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n\/* emails *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\na[href^=<\/code>\"mailto:\"<\/code>]{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\npadding-right<\/code>: <\/code>20px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\nbackground<\/code>: <\/code>url<\/code>(email.png) <\/code>no-repeat<\/code> center<\/code> right<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n\/* pdfs *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\na[href$=<\/code>\".pdf\"<\/code>]{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\npadding-right<\/code>: <\/code>20px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\nbackground<\/code>: <\/code>url<\/code>(pdf.png) <\/code>no-repeat<\/code> center<\/code> right<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Remove textarea scrollbar in IE<\/h2>\n

Internet Explorer has an annoying habit of adding scrollbars to textarea\u2019s even when the textarea\u2019s content is not overflowing. You can rectify this flaw with this easy to use snippet.<\/p>\n

\n
\n
view source<\/a><\/div>\n
\u00a0<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\ntextarea{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\noverflow<\/code>:<\/code>auto<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Drop cap<\/h2>\n

Commonplace these days in blogs and news sites is the dropcap. You\u2019d be surprised at how easy it is to implement, and how well it degrades for older browsers.<\/p>\n

\n
\n
view source<\/a><\/div>\n
\u00a0<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\np:first-letter{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\ndisplay<\/code>:<\/code>block<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nmargin<\/code>:<\/code>5px<\/code> 0<\/code> 0<\/code> 5px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nfloat<\/code>:<\/code>left<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\ncolor<\/code>:<\/code>#FF3366<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\nfont-size<\/code>:<\/code>60px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\nfont-family<\/code>:Georgia;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Css Transparency<\/h2>\n

Transparency is something that isn\u2019t done the same way across browsers which can be annoying. Here\u2019s how you can target transparency in multiple browsers.<\/p>\n

\n
\n
view source<\/a><\/div>\n
\u00a0<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.<\/code>transparent<\/code> {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfilter:alpha(opacity=<\/code>50<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n-moz-opacity:<\/code>0.5<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n-khtml-opacity: <\/code>0.5<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nopacity: <\/code>0.5<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Css Reset by Eric Meyer<\/h2>\n

Eric Meyer\u2019s css reset has become almost standard now days for use at the start of your stylesheet. Having been adopted by some of the most influential designers, you can be sure of its quality.<\/p>\n

\n
\n
view source<\/a><\/div>\n
\u00a0<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
01<\/code><\/td>\nhtml, body, div, span, applet, object, iframe,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\nh<\/code>1<\/code>, h<\/code>2<\/code>, h<\/code>3<\/code>, h<\/code>4<\/code>, h<\/code>5<\/code>, h<\/code>6<\/code>, p, blockquote, <\/code>pre<\/code>,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\na, abbr, acronym, address, big, cite, <\/code>code<\/code>,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\ndel, dfn, em, font, img, ins, kbd, q, s, samp,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\nsmall<\/code>, strike, strong, <\/code>sub<\/code>, sup, tt, var,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\nb, u, i, <\/code>center<\/code>,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\ndl, dt, dd, ol, ul, li,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\nfieldset, form, label, legend,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\ntable, <\/code>caption<\/code>, tbody, tfoot, thead, tr, th, td {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\nmargin<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\npadding<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\nborder<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\noutline<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\nfont-size<\/code>: <\/code>100%<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\nvertical-align<\/code>: <\/code>baseline<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\nbackground<\/code>: <\/code>transparent<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\nbody {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\nline-height<\/code>: <\/code>1<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\nol, ul {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\nlist-style<\/code>: <\/code>none<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\nblockquote, q {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\nquotes<\/code>: <\/code>none<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
29<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
30<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
31<\/code><\/td>\nblockquote:before, blockquote:after,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
32<\/code><\/td>\nq:before, q:after {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
33<\/code><\/td>\ncontent<\/code>: <\/code>''<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
34<\/code><\/td>\ncontent<\/code>: <\/code>none<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
35<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
36<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
37<\/code><\/td>\n\/* remember to define focus styles! *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
38<\/code><\/td>\n:focus {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
39<\/code><\/td>\noutline<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
40<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
41<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
42<\/code><\/td>\n\/* remember to highlight inserts somehow! *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
43<\/code><\/td>\nins {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
44<\/code><\/td>\ntext-decoration<\/code>: <\/code>none<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
45<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
46<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
47<\/code><\/td>\ndel {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
48<\/code><\/td>\ntext-decoration<\/code>: <\/code>line-through<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
49<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
50<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
51<\/code><\/td>\n\/* tables still need 'cellspacing=\"0\"' in the markup *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
52<\/code><\/td>\ntable {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
53<\/code><\/td>\nborder-collapse<\/code>: <\/code>collapse<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
54<\/code><\/td>\nborder-spacing<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
55<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Image preloader<\/h2>\n

Sometimes it is useful to pre-load your images so that when a certain element is needed, they\u2019ll already be loaded for you and there wont be any delay or flickering.<\/p>\n

\n
\n
view source<\/a><\/div>\n
\u00a0<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\ndiv.loader{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nbackground<\/code>:<\/code>url<\/code>(images\/hover.gif) <\/code>no-repeat<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nbackground<\/code>:<\/code>url<\/code>(images\/hover<\/code>2<\/code>.gif) <\/code>no-repeat<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nbackground<\/code>:<\/code>url<\/code>(images\/hover<\/code>3<\/code>.gif) <\/code>no-repeat<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nmargin-left<\/code>:<\/code>-10000px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Basic css sprite button<\/h2>\n

Having a button or link with a background image is fairly normal, and nowadays, we require further effects to enhance the user experience. Once of this is an indicator to the user that they are hovering over a button. Using a sprite, we can create this effect by changing the position of the background image down a certain height to show the background to the button on hover. A simple yet effective technique.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
01<\/code><\/td>\na {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\ndisplay<\/code>: <\/code>block<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\nbackground<\/code>: <\/code>url<\/code>(sprite.png) <\/code>no-repeat<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\nheight<\/code>: <\/code>30px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\nwidth<\/code>: <\/code>250px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\na:hover {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\nbackground-position<\/code>: <\/code>0<\/code> -30px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Google Font API<\/h2>\n

Google recently released a fantastic resource for web designers allowing them to load new fonts from google for use in our web pages. We can even load different variants of fonts such as bold, italic and so on. While the library of fonts available from google is limited, there is still plenty to use. First include the dynamically written stylesheet by naming the fonts and variants you want, and then use the font names in your css as you normally would! For further info on Google Font API, read here.<\/a><\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n<<\/code>head<\/code>><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nInconsolata:italic|Droid+Sans\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n<\/<\/code>head<\/code>><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\nbody {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfont-family<\/code>: <\/code>'Tangerine'<\/code>, <\/code>'Inconsolata'<\/code>, <\/code>'Droid Sans'<\/code>, <\/code>serif<\/code>; <\/code>font-size<\/code>: <\/code>48px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Browser specific hacks<\/h2>\n

Sometimes it\u2019s useful to target specific browsers to fix their inconsistencies and conditional comments aren\u2019t always the best way to do so. This list of css browser hacks by Chris Coyier is a top-notch list of ways to target browsers with simple css.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
01<\/code><\/td>\n\/* IE 6 *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\n* html .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\n\/* IE 7 *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n*+html .yourclass{ }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n\/* IE 7 and modern browsers *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\nhtml>body .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\/* Modern browsers (not IE 7) *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\nhtml><\/code>\/**\/<\/code>body .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n\/* Opera 9.27 and below *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\nhtml:first-child .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n\/* Safari *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\nhtml[xmlns*=<\/code>\"\"<\/code>] body:last-child .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n\/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\nbody:nth-of-type(<\/code>1<\/code>) .yourclass { }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n\/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\nbody:first-of-type .yourclass {\u00a0 }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n\/* Safari 3+, Chrome 1+ *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\n@media <\/code>screen<\/code> and (-webkit-min-device-pixel-ratio:<\/code>0<\/code>) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\n.yourclass\u00a0 {\u00a0 }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Fixed Footer<\/h2>\n

You would think creating a footer that sticks to the bottom of the screen would be rather hard, but surprisingly it isn\u2019t if you want to start with a basic footer. There is an IE6 hack we have to use, but apart from that, it\u2019s easy!<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
01<\/code><\/td>\n#footer {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\nposition<\/code>:<\/code>fixed<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\nleft<\/code>:<\/code>0px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\nbottom<\/code>:<\/code>0px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\nheight<\/code>:<\/code>30px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\nwidth<\/code>:<\/code>100%<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\nbackground<\/code>:<\/code>#999<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\/* IE 6 *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n* html #footer {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\nposition<\/code>:<\/code>absolute<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\ntop<\/code>:expression((<\/code>0<\/code>-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+<\/code>'px'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Flip an image<\/h2>\n

Flipping an image rather than just loading a new image that is already reversed can be rather useful. Say you want to use only one image for an arrow, but have several on the page going in different directions. Here\u2019s your problem solved.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\nimg.flip {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n-moz-transform: scaleX(<\/code>-1<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n-o-transform: scaleX(<\/code>-1<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n-webkit-transform: scaleX(<\/code>-1<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\ntransform: scaleX(<\/code>-1<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\nfilter: FlipH;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n-ms-filter: <\/code>\"FlipH\"<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Clearfix<\/h2>\n

A while back, someone decided it was time to clear floated elements without adding any extra markup to the document. They did this by creating a class that can be applied to the container of floated children to clear it. A fantastic way to do so, and something that is nowadays, widely used.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
01<\/code><\/td>\n.clearfix:after {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\nvisibility<\/code>: <\/code>hidden<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\ndisplay<\/code>: <\/code>block<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\nfont-size<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\ncontent<\/code>: <\/code>\" \"<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\nclear<\/code>: <\/code>both<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\nheight<\/code>: <\/code>0<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n.clearfix { <\/code>display<\/code>: inline-<\/code>block<\/code>; }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n\/* start commented backslash hack *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n* html .clearfix { <\/code>height<\/code>: <\/code>1%<\/code>; }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n.clearfix { <\/code>display<\/code>: <\/code>block<\/code>; }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n\/* close commented backslash hack *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Rounded Corners<\/h2>\n

With the slow introduction of css3, rounded corners have been made easily possibly in modern browsers. Sadly we still don\u2019t have css3 support for IE, but it will be available in IE9 whenever that is released.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.round{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n-moz-border-radius: <\/code>10px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n-webkit-border-radius: <\/code>10px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nborder-radius: <\/code>10px<\/code>; <\/code>\/* future proofing *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n-khtml-border-radius: <\/code>10px<\/code>; <\/code>\/* for old Konqueror browsers *\/<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Style Overriding<\/h2>\n

It still surprises me that some people don\u2019t know about !important in css, because it is such a powerful and useful tool to have. Basically, any rule with !important at the end, will override any of the same rule that is applied to that element wherever it appears in the css file, or in-line html.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\np{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfont-size<\/code>:<\/code>20px<\/code> !important<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Font face<\/h2>\n

Font-face didn\u2019t really break through until late last year, but has been around since the days of IE6 being a modern browser! It\u2019s picked up in support a lot now though, and offers a great way to use non web safe fonts in your web projects. While this snippet works, you might as well save your time by using the Font Squirrel Font Face Generator.<\/a><\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n@font-face {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfont-family<\/code>: <\/code>'Graublau Web'<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nsrc<\/code>: <\/code>url<\/code>(<\/code>'GraublauWeb.eot'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nsrc<\/code>: <\/code>local<\/code>(<\/code>'\u263a'<\/code>),<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nurl<\/code>(<\/code>'GraublauWeb.woff'<\/code>) <\/code>format<\/code>(<\/code>'woff'<\/code>), <\/code>url<\/code>(<\/code>'GraublauWeb.ttf'<\/code>) <\/code>format<\/code>(<\/code>'truetype'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Center a website<\/h2>\n

A common design trend these days is for your website to center itself in the middle of browser\u2019s viewport horizontally. This is an easily achievable thing to do.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.wrapper {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nwidth<\/code>:<\/code>960px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nmargin<\/code>:<\/code>0<\/code> auto<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Min-height in IE<\/h2>\n

This comes down to fixing a simple, yet annoying bug in IE\u2019s capability of handling min-height. In essence, IE interprets height as min-height, so since IE wont implement the auto height, this snippet will fix all this for us.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.box {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nmin-height<\/code>:<\/code>500px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nheight<\/code>:<\/code>auto<\/code> !important<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nheight<\/code>:<\/code>500px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Image loading<\/h2>\n

This image loading effects mimics that of an ajax loader, where a loading circle is displayed while content loads. This works especially well for larger, slower loading images, and is css only!<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\nimg {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nbackground<\/code>: <\/code>url<\/code>(loader.gif) no\u2212<\/code>repeat<\/code> 50%<\/code> 50%<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Vertical Center<\/h2>\n

This short snippet allows you to vertically center the contents of a container without any extra markup by simply displaying it as a table cell which then allows you to use the vertical-align attribute.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.container {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nmin-height<\/code>: <\/code>10em<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\ndisplay<\/code>: <\/code>table-cell<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nvertical-align<\/code>: <\/code>middle<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Create pullquotes<\/h2>\n

Firstly, what is a pullquote? Well in news and magazine style websites, you\u2019ll often notice small quotes added within the article, not as full blockquotes, but as small quotes that sit within the article but to the side, sometimes adding things such as people\u2019s opinions or quotes. They are extremely easy to create you\u2019ll be glad to know, and when used properly, can add greatly to the user experience when reading an article.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.pullquote {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nwidth<\/code>: <\/code>300px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nfloat<\/code>: <\/code>right<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nmargin<\/code>: <\/code>5px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nfont-family<\/code>: Georgia, <\/code>\"Times New Roman\"<\/code>, Times, <\/code>serif<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\nfont<\/code>: <\/code>italic<\/code> bold<\/code> #ff0000<\/code> ;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Text Selection<\/h2>\n

Some people are unaware that it is possible to change the color when you highlight text in your browser. It is so easy to with two selectors; just be careful you don\u2019t ruin your site with it.<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n::selection {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\ncolor<\/code>: <\/code>#000000<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nbackground-color<\/code>: <\/code>#FF0000<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n::-moz-selection {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\ncolor<\/code>: <\/code>#000000<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\nbackground<\/code>: <\/code>#FF0000<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Print page breaks<\/h2>\n

This add\u2019s again to the user experience when printing. For example, when printing an article, it may be useful for a user to have the comments on a new page from the article itself. by adding this class to the comments area, a page break will appear when printing. It can be used anywhere else on your site as well!<\/p>\n

\n
\n
view source<\/a><\/div>\n
<\/embed><\/object><\/div>\n

print<\/a>?<\/a><\/p>\n<\/div>\n

\n
\n\n\n\n
1<\/code><\/td>\n.page-break{<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\npage-break-before<\/code>:<\/code>always<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

CSS is no doubt up there with the most important web languages that we use. While html provides the structure it can be inconsistent and unpredictable across different new and old browsers. Css is where the html is styled though, and where we get creative as well as addressing those\u00a0inconsistencies. Below is a fantastic list […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,14,5,4],"tags":[379,378,738,737,333],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-cross-browser-compatibility","category-web-development","category-wordpress","category-xhtml-coding","tag-mumbai-web-developer","tag-mumbai-website-designer","tag-web-designer","tag-web-developer","tag-website-development"],"_links":{"self":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":4,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}