Tags

Following are few CSS Tips and Tricks that I think every web developer should be aware of. You may already know many of these tricks.
Disclaimer: Not all from the below CSS tricks are written by me. Some of them are taken from different sources on internet.

1. Round Corners without images

Here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

div {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

To round a specific corner (top-left or bottom-right) use below stylesheet.

div {
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}

Further Reading: Rounded Corner Stylesheet without images

2. Create an IE Specific Stylesheet

Create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.
IE Only

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

IE 7 Only

<!--[if IE 7]>
    <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

Further Reading: IE Specific Stylesheet

3. Background Image of Textbox

Have you seen textboxes with background images like Search magnify glass or other images? Simply use following stylesheet to add background image to any input box.

input#sometextbox {
    background-image:url('back-image.gif');
    background-repeat:no-repeat;
    padding-left:20px;
}

Further Reading: Background Image for Textbox

4. Setting Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container {
    min-width: 600px;
    width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

5. Cross Browser Opacity

Use following stylesheet to make an element transperant by setting the opacity level.

.transparent_class {
    filter:alpha(opacity=50); 
    -moz-opacity:0.5
    -khtml-opacity: 0.5
    opacity: 0.5

6. Prevent Firefox Scrollbar Jump

Firefox does not display scroll bar if the content of page is fitting with browser height. But if the content grows, Firefox display a scroll bar their by making a scroll jump. The content of screen will be pushed left. To avoid this we can tell firefox to add scroll bar by default.

html        { overflow-y:scroll; }

7. Rotate Text using CSS

This example rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

.rotate-style {
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

8. CSS for Handheld/Mobile devices

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

9. Change Text Selection Color

By default, browsers uses blue color as the text selection. You can change this color to match your website theme.

/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}
/* Works in Safari */
::selection {
       background-color: #FFA;
       color: #000;
}

10. Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
    outline: none;
}

11. Centering a Website

Most of website uses this technique to center the content.

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

12. CSS Drop Caps

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p:first-letter {
       font-size : 300%;
       font-weight : bold;
       float : left;
       width : 1em;
}

13. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$='.doc'] { 
    padding:0 20px 0 0
    background:transparent url(/graphics/icons/doc.gif) no-repeat center rightright; 

14. Capitalize Text

This trick is especially useful for displaying title of an article on a web page with all its words starting with capital letter.

text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
  • none: No capitalization. The text renders as it is. This is default
  • capitalize: Transforms the first character of each word to uppercase
  • uppercase: Transforms all characters to uppercase
  • lowercase: Transforms all characters to lowercase
  • inherit: Specifies that the value of the text-transform property should be inherited from the parent element

15. CSS Text Shadow

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; }

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

16. 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; } 

17. 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; } 

18. CSS Pointer Cursors

This trend has caught up lately. All user interface elements on a web page that can be clicked by user have their cursor similar to that of hyperlink. Here’s the CSS trick to do that.

input[type=submit],label,select,.pointer { cursor:pointer; } 

19. Set a Consistent Base Font Size

Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; } 

20. Perfect Page-Printing with CSS

An overlooked feature on the website is the “print this article” link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

@media all
       .page-break    { display:none; } 
  
@media print
       .page-break    { display:block; page-break-before:always; } 

Good Luck…!!!

Advertisements