6 CSS Tricks That Will Make You Say WOW

By | July 26, 2013
I Found these tricks on Webcredible, and I am sharing them with you. “Creativity is Intelligence having fun”- I read this status on Facebook today. These made me remember CSS (in which I am most creative). So I thought of sharing about some tricks that’ll make your webpage much more efficient. So, here they are:

Read Also: 3 Useful Tips for Better layouts in Web Design.

1.  Multiple classes combined together

 Just look at this below code, do you find something weird?
Yeah! There’s space between header and menubar. Actually they are both different classes. Yes, in CSS we can use two different class together to assign them same values.This means that the properties in both the classes will be assigned to the span class. If there any similar or same properties than the class with the same property which comes last will be assigned .
css tips

2. Font shorthand rule

You may probably know about this trick. Using the shorthand font rule for fonts instead of coding like this:
font-weight: bold;
 font-variant: small-caps;
 font-style: italic;
 font-height: 1em;
 line-height: 1.5em;
 font-family: Georgia, serif;
You can directly use the shorthand property for fonts like this:
 font: bold italic small-caps 1em/1.5em Georgia,serif;

3. Replacing images with text.

Think of a situation in which you need to add a completely new font to your heading and may be your visitors may not have their browser support that font. You’ll probably use an image and give it alt text related to your heading (for SEO purpose). But don’t forget the search engines are becoming smartet day by day. They give more preference to text rather than alt text. So, what’s the solution? Here it is:
 background-image: url(heading.png) no-repeat;
 height: 100px;
 text-indent: -2000px;
Here we we have used the image and also the text. But the trick done here is- the text will move 2000px left and will not be visible. But, this trick may cause problem to users having images turned off on their browsers (accessibility issue).

4. Border default value

Yeah, there is such type of thing present for CSS Borders. You probably didn’t know it. You may code normally like border: 1px solid #4c4c4c; but you can also directly code like this: border: solid;
The default value of border-width and color will be applied. The default value of width is 3-4px and color will be assigned same as that of text, around which border is surrounded.

5. Box Model trick alternative for IEs

You would be knowing about the pre-IE6 box model problem. In which the width of padding and border is not counted in the total width. The box model trick is like this:
#box-trick div
padding: 20px;
So, here the box model trick works for pre-IE6s and total width will be evaluated to 250px.

6. Vertical Alignment

You would have probably used the property vertical-align: middle while creating tables to center the cell content and text. But, this actually doesn’t work for CSS layouts. Let’s take an example. You’ve created a navigation menu and one of the item in that menu needs its text to be centered (The height of item is 2em). So, you’ll use vertical align property. But this will make the text go right on the top of the item. So, the trick is you need to set the line-height the same as that of the item height. (ie. 2em). This will make the text centered.
Hope these tips and tricks were helpful to you. Will update this article when I learn more tricks. Keep in touch. If any queries, this man is always at your service. And, please do share the article and subscribe to our feeds.

Leave a Reply

Your email address will not be published. Required fields are marked *