How to make your Web Page Sizzle with CSS3

CSS3 has come out with new features that make it easier for you to create designs to make your websites look cooler much faster. It boasts of features like drop shadows, gradients, animations, opacity and rounder corners among others. CSS3 has a host of new features from which only the most popular ones will be discussed in this article. Here we are going to learnh How to make your Web Page Sizzle with CSS3.

Web fonts:

The first step is to find a font that you like and looks fairly nice on your webpage. Then a generator is used to create a cross-browser code, this makes your font work across any browser.

Drop shadows and rounded corners:

Text shadows can be added to give it a nice 3D effect. Paragraphs can also have text shadows in case you plan on using a dark background shade. This enhances visibility. Boxes can be given rounded corners and shadows to make it look more natural.

Linear gradients:

With vendor prefixes, linear gradients are presently supposed across most new browsers. A few lines need to be added to get these gradients working across browsers.

Opacity:

Colors can be shined through from the background to the front. Web browsers that don’t support linear gradients still display the background color; this can be varied to get numerous color schemes. Background colors are essential for readability.

Fixing browser problems:

Webpages face problems when browsers are not regularly updated; internet explorer is one such example. This problem can be solved by using JavaScript as a backup. This article will talk about cross browser issues relating to internet explorer as an example to demonstrate how CSS3 can be used. CSS3 pie is a JavaScript library that lends support for gradients, RGBs colors, border-radius and box shadow. CSS3 pie can be used by first downloading and unzipping it. Upload the CSS3 pie to your web server and then add “behavior: url(path/to/PIE.htc); ” . It should also be kept in mind that a unique pie-prefixed background image property will be required. This property will have to be changed to read background instead of background-image. This is because CSS3 Pie supports only shorthand values and not longhand.

For the background color, CSS3 Pie permits internet explorer to show RGBa colors, it does not should the alpha value instead it gives the RGB channels as entirely opaque. To figure out which colors to use a color picker can be used, Opera Dragonfly color picker for instance, which works out the colors that were used in the gradient. This eliminates some of the flexibility given by the opacity feature of CSS3, but the output in internet explorer is much better. CSS3 pie does not support text shadows and box shadows but the other features give results that are better than what older internet explorer versions displayed.

This example is for making your webpage work on old versions of internet explorer. The background color, text shadow and boxes with then have to be reworked with according to the browser. Cross-browser support can also be achieved by using jQuery. This does require skills for writing the Javascript. It can be a little harder than using CSS3 pie, which needs modified Javascript and CSS links.