CSS tips and tricks - Must go through

We all know that cascading style sheets (CSS) are determines the look and format of a web page. Though there are many facilities in using the CSS, still we face some problems in some application of it. That is the reason we can find in the internet – designers and developers are providing so many CSS tips and tricks.
Now the question is why writing this article? Am I going to give you some new CSS tips and tricks? No, I am not going to stuff internet with some same CSS tips and tricks as if presenting new wine in an old bottle! So here is for you some must go through CSS tips and tricks that come in consideration while using CSS effectively and successfully.

• In particular cases inline elements have to be started in new line like block elements or vise-versa, in controlling height and width of inline elements and spreading background color to match text of block elements without specifying width. Here applies ‘display inline’ or ‘display block’ codes.
• In IE 6 browser sometimes rendering problem comes in setting width of any element against border and padding has already provided. It is known as box model hack alternative. To solve this problem a code comes in great use and that is "padding: 2em; border: 1em solid green; width: 20em;width/**/:/**/ 14em;".
  
• Sometimes we face problem in making web pages cross browser compatible. It is because different browsers have different CSS properties. So it is not possible to code for individual browsers. Here one of best CSS tips and tricks is CSS reset that makes pages compatible to all browsers.
• Many a times 3D buttons are in needed to match the layout of web pages. But we can not go for expensive 3D development. We can easily get this effect with a code like the one given below. We will see that a button will be created with raised 3 dimensional effects. The is like " div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }"
• When CSS code is not working properly up to your expectations and you want you debug it but can not decide how much space it has occupied in the html code the following code comes in help. But remember a careful handling of the extra pixel in the border is needed otherwise situation will remain the same. "element {border:1px solid red}".
• I have got immense help when finding CSS tips and tricks for removing vertical scrollbar in IE browser. My code was not befitting and the page was looking odd with the scrollbar I used the code below and got the solution. "text area { overflow: auto; }"

There are so many CSS tips and tricks available online to resolve you problems in the use of the CSS. But I only mentioned the few of them. When people hire a freelance graphic designer or hire website designer for website development they do not know the things really. But I have faced this situation many a times and the available CSS tips and tricks have helped me a lot. But with my research on the internet I have solved many problems that are common like the above ones. So you need not to care a lot about the situations. There are lots of CSS tips and tricks available. You just need to see which are of your use. Find the solution and customize the code in your way.

CSS sprites - mystery unfolded

CSS spirits, sorry it should be CSS sprites actually, are the small images that play a sweet role to provide some nice styles to the overall appearance of a web page. Yes, it is true that “Sprites” are considered as spirits that appear and vanish within fraction of seconds in a webpage. These CSS sprites are intended to catch attention of the visitors, sometimes with mouse hover or odd shapes of menu and navigation buttons; even spirit effects on positioning of links.

The mystery about the CSS sprites is nothing but sudden appearance of those on web pages. It is nothing but the intellectual play of web or graphic designers to present so many graphics in a grid or master image without sending the web server too many ‘http’ requests. In fact, sprites provide an opportunity to the graphic designers or the web designers to keep a visitor stuck to a page, instead of showing static images.

Whatever the case may be, it is true that the concept of sprites originated from the video games. How can I forget that I used to get extra points or the ‘stars’ for hitting some blocks or bricks on the path to reach the destination as a Mario Game player? Forget about it. This is a small example against the presence of sprites in the games.

Let us now see how in CSS sprites are doing little wonders. I mean to say why these are used for web pages. We are not going by the codes; rather we will talk the things in plain.

• To create catchy menus, CSS sprite comes in use. Designers create small images (sprites) for curvy corners to avoid simple edge and gather the small pieces to make master image.
• In the creation of mouse hover effects CSS sprites is used in the best way. Graphic designers create small images for structuring a back ground image and a foreground image. Then both the images are placed on each other. The movement of mouse calls one image before other.
• Anywhere in a web page small buttons or graphics may be used with 2D or 3D effects. We designers are asked to represent some special attractions on the pages. So we again create sprites that easily grab attraction of the visitors.
• To provide any web page background effect, small images are used. Instead of using larger images in a web page as background, small image slice are cut and rendered through ‘x’ axis or ‘y’ axis. This effort easily shows backgrounds quickly without causing delay in page load.
• To stop the unnecessary use of javascripts for giving scroll or little dynamic effect, sprites are used. Javascripts take time to be called on the page or sometimes go missing. Dazzling effects can be given to links with CSS sprites.
• CSS sprites make use of single file to minimize overall page load time for images. If you carefully read the points, I have mentioned ‘master image’. It is the CSS sprite that create bundle of small images and use them in a master image file which loads fast with single http request.

In short these are the main use of sprites, rather for these main reasons CSS sprites are still used in the web page design with graphical effects. Now the URI (Uniform Resource Identifier) has come and is making the use CSS sprites less only for page load timings. Whatever the case may be, sprites will remain to give little yet catchy effects to the web pages.

At least I, as a freelance graphic designer, love to use them, in my designs. All designs in my template shop have the potential to use the small image effects. So any time you want to hire website designer, ask him if he can give you some the spritely effects. Believe me those small images just pour dazzling effects to a webpage.