Here are 10 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know.
1. Change Text Highlight Color
You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers like Safari or Firefox.
::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}
2. Prevent Firefox Scrollbar Jump
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
html{ overflow-y:scroll; }
3. Print Page Breaks
While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page.
.page-break{ page-break-before:always; }
4. Using !important
Experienced CSS programmers are usually aware of this but beginners do miss out on this
!important CSS rule. By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.
.page { background-color:blue !important; background-color:red;}
5. Replace Text With Image
This is a nice SEO trick that lets you show a nice fancy image instead of simple boring text to your visitors but search engines will see only the text.
.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}
6. Cross Browser Minimum Height
Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7. Highlight links that open in a new window
This piece of CSS code will highlight links that open in a new window so that user knows before hand that link will pop open in a new tab or window.
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
8. Style Your Ordered List
Style numbers of an ordered list in different way than the content of each list item.
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
9. Drop Caps Using CSS
You can create a drop caps effect like those in newspapers or magazines using the :first-letterpseudo element.
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
10. Cross Browser Opacity
Though CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
