WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on LinkedIn0

chickenstrip

Today, I have compiled a set of 10 CSS snippets that can save you a lot of time and effort. These codes are needed frequently when developing CSS-based websites or themes. Just bookmark these codes (Ctrl + D) so that you don’t have to look for them on the Internet every time.

1. CSS Tooltips

Through this code, you can have your own tooltips using just CSS. This is the CSS code :-

[css]
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
[/css]

Now, use the tooltips like this :-

[html]
Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
[/html]

2. Eric Meyer’s Reset Code

HTML tags on different browsers have their own formatting and styling. To reset all that and bring everything to ground zero before starting to code, just add these lines at the beginning of your CSS file.

[css]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing="0"’ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}[/css]

3. Handy CSS Debugger

This code will add different color borders around your assets depending on its level. At each level in the hierarchy the color changes so you can see when “depth” changes. You can comment it out if you don’t need it.

[css]
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
[/css]

4. Centering a DIV of Unknown Width

You can easily center a DIV by using margin:auto; property when you have mentioned its width in your CSS. But in case you wanted to center a DIV with unknown width, here is the code to do so :-

[css]
.content {
margin: 0 auto 8px;
display: table;
}

.content div {
display: table-cell;
}

<!–[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]–>
[/css]

5. Adding AJAX style Loading Icon to Large Images

Instead of using any kind of JavaScript to add a loading icon before your large image is loaded, you can use this simple CSS technique. Just use the following class in the same DIV where you are calling the large image. Make sure the path to the small loading.gif is correct.

[css]
.loading { background: url(loading.gif) no-repeat center center; }
[/css]

6. CSS Image Preloader

In case you need to preload images before the loading of your page completes, use the following technique. Just add the images’ paths to the DIV class, and call the DIV in your HTML. The DIV will not be visible but the images will preload nicely.

[css]
div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
margin-left:-10000px;
}
[/css]

7. CSS Opacity Hack

You can set opacity of any asset by using the following codes (to achieve transparency) :-

[css]
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
[/css]

8. Min-Height for IE and all other browsers

Since min-height doesn’t work in IE, this code makes up for IE’s shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.

[css]
/* for browsers that don’t suck */
.container {
min-height:8em;
height:auto !important;
}

/* for Internet Explorer – which of course sucks */
/*\*/
* html .container {
height: 8em;
}
/**/
[/css]

9. Styling Links by File Type

You can easily style specific URLs by using icons. This works only with CSS3 compatible browsers and degrades nicely with non-compatible browsers. Make sure to change the icon image paths.

[css]
/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}
[/css]

10. Remove Textarea Scrollbar in IE

IE has this nasty habit of showing a scrollbar in the textarea even when the content is inside the textarea. To avoid this, use the following code :-

[css]
textarea{
overflow:auto;
}
[/css]

Share on Facebook0Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on LinkedIn0
  1. sky left a comment on March 23, 2016 at 12:42 am |

    A. Foaming technique may reduce energy consumption resulted from air circulation of barrier-strip heat insulation molding. Non-foamed K-value is 2.3 to 3.5, and the K-value of foamed profile can be lowered to 1.5 to 2.
    B. Preventing siphonage effect: PA66GF25 heat insulating strip has certain water absorption. In winter, steam generated from air circulation inside profile cavity is absorbed by heat insulating strip, and brittle rupture will occur when coefficient of linear expansion reaches 30%. This will not happen to the profile after foaming, and PU foaming absorbs no water.
    1?Stopping convection phenomenon in barrier-strip cavity, and improving heat-insulating performance of doors and windows.
    Foaming technique may reduce energy consumption resulted from air circulation of barrier-strip heat insulation molding. Non-foamed K-value is 2.3 to 3.5, and the K-value of foamed profile can be lowered to 1.5 to 2.
    2? Preventing siphonage effect and seepage phenomenon resulted from the physical connection part between heat-insulating strip and metal.
    PA66GF25 heat insulating strip has certain water absorption. In winter, steam generated from air circulation inside profile cavity is absorbed by heat insulating strip, and brittle rupture will occur when coefficient of linear expansion reaches 30%. This will not happen to the profile after foaming, and PU foaming absorbs no water.
    3?Preventing shrinkage of heat-insulating strip that will break away from connection due to freeze expansion after hydrops inside thermal-insulation cavity.

    4?Help to improve profile’s integral rigidity.
    Effectively making up for the insufficient press-in in profile’s insertion process that leads to defective goods.
    http://www.hgcx.cn/en/index.php?p=product_show&id=330&c_id=57&o_id=&lanmu=12

  2. Yüz Esteti?i Ankara left a comment on May 9, 2015 at 12:15 pm |

    sharing really good congrats 🙂 he he

  3. sohbet left a comment on February 22, 2015 at 6:12 am |

    thank you for sharing

  4. Ammy left a comment on March 25, 2013 at 8:40 am |

    These CSS snippets are very useful. Thaks for your tutorial. We are the best web design cambridge company.

  5. ???????? dreamweaver left a comment on July 29, 2012 at 8:22 am |

    Great informations ! Thanks for sharing

  6. Dvdrip Telecharger left a comment on June 20, 2012 at 7:10 pm |

    Very useful bookmarked !

  7. Telecharger dvdrip left a comment on June 3, 2012 at 6:30 am |

    Css a big way this information in the pages of our decorations’m sure will work.

  8. Telecharger Megaupload left a comment on December 16, 2011 at 12:55 pm |

    Thanks for the snippets!!!

  9. Ahnaf left a comment on December 5, 2011 at 12:22 pm |

    Thanks you for nice trick, It really Helps.

  10. check up left a comment on June 5, 2010 at 1:37 pm |

    Thank you. Very useful bookmarked ! succesful article

  11. music left a comment on April 7, 2010 at 9:15 pm |

    Thank you. Very useful bookmarked !

  12. Naseer left a comment on March 30, 2010 at 9:46 am |

    very informative…
    Thanks for share ….

  13. BlogSDN left a comment on March 27, 2010 at 10:59 pm |

    Gr8 tutorial i really liked it.

  14. irika left a comment on February 8, 2010 at 11:33 am |

    Great list. I particularly like Eric Meyer’s Reset Code, which as you say brings everything back to ground zero. I plan to use this code regularly from now on.

  15. estetik left a comment on January 31, 2010 at 6:54 am |

    Css a big way this information in the pages of our decorations’m sure will work.

  16. Rodrio Gregorio left a comment on January 25, 2010 at 8:54 pm |

    very nice usefull tip’s

    obrigado pelas dicas…

  17. IhateDesign left a comment on January 14, 2010 at 10:34 am |

    Thanks for the snippets!!!

  18. Rick left a comment on January 11, 2010 at 12:07 pm |

    Love the cartoon too, by the way.

  19. denbagus left a comment on January 6, 2010 at 11:47 pm |

    nice css tutorial .thank you

  20. Helen Dangote left a comment on January 6, 2010 at 7:01 am |

    Nice list you have here. I particularly like the tooltip example – it makes creating your own fancy tooltip simpler.

    Thanks for sharing them

  21. Rick left a comment on December 30, 2009 at 5:21 am |

    Great list. I particularly like Eric Meyer’s Reset Code, which as you say brings everything back to ground zero. I plan to use this code regularly from now on.

  22. Destiny Islands left a comment on December 14, 2009 at 7:31 pm |

    I have to admit that a lot of these I didn’t even know about, but they are really great! I have always had trouble centering div’s and being able to change links based on their type of connection (http, ftp, mailto, etc) is really useful.

  23. Muhammad Panji left a comment on December 14, 2009 at 4:56 pm |

    Nice tips. will try the tips and of course bookmark it 🙂

  24. Stephanie @ Geezees left a comment on December 14, 2009 at 2:19 pm |

    Thanks for sharing this!

  25. Jason left a comment on December 14, 2009 at 1:05 pm |

    Number nine is a good one. Thanks for sharing.

  26. Kubuntufrust left a comment on December 14, 2009 at 12:03 pm |

    Great. That are clear and easy to understand snippets. Good work.

  27. Chris left a comment on December 13, 2009 at 7:33 pm |

    Bookmarked the post as a reference. The comic was a scream! Thanks for sharing!

  28. Maicon Sobczak left a comment on December 13, 2009 at 3:57 pm |

    Great snippets! I like the one about debugger.

  29. Positron left a comment on December 12, 2009 at 3:26 pm |

    Thanks for the tips. I used the ajax style loading image (5) It’s nice 🙂

  30. Aziz Light left a comment on December 12, 2009 at 12:44 pm |

    As a “list-style posts” hater, I have to say: this list is really, really cool. For the first time I actually learned a lot from a list-style post.

    Great job and thanks a lot.

  31. Kawsar Ali left a comment on December 12, 2009 at 11:09 am |

    Very useful bookmarked !

  32. Jbcarey left a comment on December 12, 2009 at 8:44 am |

    This is indeed very nice list. Good job.

  33. Syuxx left a comment on December 12, 2009 at 7:40 am |

    Nice sharing there! Thanks for helping most of newbies coder to save their time. Haha
    🙂

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project