9 Amazing CSS Rules that Save Designers and Developers

A web designer certainly has to memorize a lot of stuff related to his work. Talking about CSS, it has many declarations that can enable you to transform the design of your website and open up more possibilities which are harder to take care of while using the conventional techniques.

css rules

Here are some of the tips or in other words declarations available in CSS which all designers must know:

1- Rounded Corners

In today’s web folio, websites are adopting the latest development technologies. HTML5 and CSS are used to build up to dated scripts. border-radius is used to make the borders go round for HTML elements and is supported by latest versions of all browsers.

[code type=css] border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */
[/code]

We can also use the combined version or shorthand of above code like below.

[code type=css]-moz-border-radius: 10px 20px 30px 0;[/code]

To avoid browser compatibility issue, make sure to declare them separately. For getting complete reference on how to make it work in internet explorer read this article.

 

2- Drop Shadow

Another interesting feature that CSS3 offers is the drop shadow features. box-shadow is the property used to give drop shadow effect (inner and outer). All major browsers do support this property. Safari supports an alternative, the -webkit-box-shadow property.

[code type=css]#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

[/code]

The JavaScript syntax for the same property is a as below

[code type=html]

object.style.boxShadow=”20px 10px 7px #ccc”

[/code]

 

3- @media Property

This rule is used for making changes in the style of the web page for different screen sizes remaining in the same style sheet. It also helps one to do styling with the responsive website designs. All you have to do is use the properties by creating media query and then make changes in the design as per required.

[code type=css]@media screen and (max-width: 480px) {

}[/code]

We can even target the print view like below

[code type=css]

@media print
{
p.content { color: #ccc }
}

[/code]

 

4- Adding a Gradient Fill

Gradient effect is another amazing effect in CSS3. It doesn’t have all browser support currently and it’s better not to rely on it for making of any layout for safety. Menu designs can also be stuffed with this stunning effect. See a pure CSS based gradient menus here. Below is how we can use this property.

[code type=css]

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));[/code]

 

5- Background size

It is one of the most useful properties of CSS3 which has attained a lot of browser support. The background-size property specifies the size of the background images. It used to take a lot of effort to make a background scale just about the size of the parent. But with this property, just one line of the code will be enough to make the background image effect that you want.

[code type=css]div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}[/code]

 

6- @font face

@font face is one such property of CSS3 that has proven really useful for transformation.  Because of the font licensing issues, we were not able to use the property that much but now font styles can be formed with the basic @font face code. You can use it with the free fonts available manually or you can Google it through. Below is how to make the fonts family.

[code type=css]@font-face
{
font-family: mySmashingFont;
src: url(‘blitz.ttf’)
,url(‘blitz.eot’); /* IE9 */

}[/code]

and then make the use of mySmashingFont font family at any place like below.

[code type=css]div
{
font-family:mySmashingFont;
}[/code]

 

7- .clearfix

If you think that Overflow: hidden is not enough to manage the floats, then there is an alternative that can make you manage them in a more convenient way. The name of that declaration is clearfix.  It can let you work with any HTML element separately.

[code type=css].clearfix {
display: inline-block;
}[/code]

[code type=css].clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}   [/code]

 

8- Margin: 0 auto;

When you are learning the basics of CSS, Margin: 0 auto; is the property that you will come across with in the very beginning. Though there was no declaration in CSS for making a block element come in the center but still we started to use the auto margin option for this. It sure can let you centralize an element as per your need. Make sure you have specified the width for the div in order to make this property work. The declaration should be made like below.

[code type=css].myDiv {
margin: 0 auto;
width:600px;

}[/code]

 

9- Overflow: hidden

The best property that can enable you to clear up the floats is Overflow: hidden.  Your style sheet will not include any garbage as long as you are using this declaration.  It is quite result oriented.

[code type=css]div
{
overflow:hidden;
}[/code]


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


10 Comments

  1. ilija says:

    This is very helpful and it really saves my time!

  2. Pixleight says:

    The linear gradient syntax in the example is for older webkit browsers (Safari 4-5, Chrome 1-9)

    For modern webkit, it would be:
    background-image: -webkit-linear-gradient(top, darkGray, #7A7A7A);

    You can also define color-stops by pairing up colors with percentages (or pixel values):
    background-image: -webkit-linear-gradient(#F0F 0%, #0FF 33%, #FF0 100%);

  3. Good article. media Property & clearfix are new for me. Thanks for the tips.

  4. nice share mate have to try itzz tnxzz 🙂

  5. Guppu Boss says:

    Nice post. I am learning css helpful post

  6. Sean says:

    I’ve been a web developer for over 6 years. As for the .clearfix I’m not a bit fan of it. I usually create a .clearboth class and just clear floats with an empty div element using that class. This is mainly because in my experience, the clearfix class doesn’t always work. In fact in my experience it rarely works to clear floated elements.

    On another note, the use of the overflow property to clear floats has never ever worked for me. The overflow property has absolutely nothing to do with floated and positioned elements. I had heard about using overflow before for such things and I tried it on several occasions with absolutely no good results whatsoever for clearing floats. In my opinion using overflow to clear floats is completely useless.

    • CiNiTriQs says:

      Overflow: hidden or auto or visible has always had an influence on clearing floats (at least, that is my experience) this is because this tells the browser that within that div, there is content and so it does not collapse on itself (parent element). I have been starting to use it to get rid of the extra empty divs I used to specify (like you are using now). This way it was a bit more semantical. Of course, it might not work for other designs, but I haven’t had any bad experiences with it yet. My preference would go like this: “the overflow method” > “empty div + clear both” > “:after” . (The latter method works well when all browsers (including older ones) would support all pseudo elements, which unfortunately they don’t.) other than that, we should try to indeed avoid certain “hacks” as much as we can.

  7. The only thing i’m not familiar is clearfix. it’s not CLEAR to me what it’s supposed to fix.

    As for the others i’ve been using them even before the html5 thing came.

    All in all this is a good list, specially for beginners.

  8. nomolosvulgaris says:

    My list:

    1. overflow: auto; as an alternative to .clearfix

    2. display: inline-block (as well as zoom: 1; *display: block; for IE)

    3. content: “”; display: block; for pseudo-elements

    4. position: relative; for a parent and position: absolute; for its child.

    5. margin: auto; – no need to use zero!

    6. font: style size/line-height family;

    7. simple rule for CSS developer: use Modernizr!

    Of course, media queries, transitions and other new stuff in CSS3 is usefull.

  9. Bharat says:

    Of these all, I regularly use Rounded Corners and Box Shadow properties. Have to try remaining ones also…