Useful CSS Tricks for Better Looking Pages

September 23rd, 2012 Leave a comment
Like the article?
css useful tricks

As a Web developer, you begin to learn many tricks with cascading style sheets (CSS) to help you create the layouts and look that you want. There are many ways to change the look of your pages with CSS that look complex but are easy to achieve. In this article I will show you how to create some great changes you can make with CSS so you can begin to create better Web pages.

Create and IE specific Stylesheet

You can create a stylesheet that is specific to Internet Explorer to try to fix IE related style problems.

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]-->

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 this style:

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

Cross-browser Opacity

Opacity allows you to make an element more transparent and gives a professional look to your pages. Use following stylesheet to make an element transparent by setting the opacity level:

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

Rotate Text

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);
}

Declare a Stylesheet for 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" />

Center a Page in the Browser Window

Most of website uses this technique to center the content in the browser window no matter the screen size:

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

Creating a Text Shadow

Regular text shadow:

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

Multiple shadows:

p { text-shadow: 1px 1px1px #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.

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

I hope you have enjoyed this list of tips and tricks. It is easy to create stylesheets that convey a professional image and polished look to your site. As you begin to use more styles in your pages you will find new techniques to create a unique experience for your visitors. You will also learn how to deal with browser-specific problems and create pages that look great in all environments.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment