Thursday, March 10, 2011

9:47 AM


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 */
::-moz-selection{ /* Firefox */

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


.page-break{ page-break-before:always; }

4. Using !important


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.

background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/

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.

height:auto !important;/*all browsers except ie6 will respect the !important flag*/
height:500px;/*Should have the same value as the min height above*/

7. Highlight links that open in a new window


a[target="new"]:before {
margin:0 5px 0 0;
outline:1px solid #333;
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 {
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.

margin:5px 0 0 5px;

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 {  
    -khtml-opacity: 0.5;  
    opacity: 0.5;  


truffo said...

Why do you not use a alt attribute instead of CSS tricks ?