Paydirt Blog

Top 3 CSS3 features you should be using every day

CSS3 is making web development easier and faster than ever, introducing features like border-radius , box-shadow and text-shadow - effects that used to be really fiddly and annoying to achieve. If you're like me, you probably already use these every day.

But there's a lot more to discover, and once you learn something new you find endless uses for it.

Here are my top 3 CSS3 features you may not use yet, but will soon be using every day.


box-sizing

The CSS box model might have seemed a bit baffling at first, with the width and height of an element rarely relating to its true dimensions on the page - the padding, borders and margins being added in addition. Internet Explorer implemented its own box model, in which the borders and padding were rendered inside the CSS defined width.

CSS3's box-sizing attribute allows you to choose which box model should apply for the specified element.

The W3 box model is called content-box and the quirks mode box model is called border-box .

There are times when this is a lifesaver: Ever need a textarea to be 100% width with padding? It's surprisingly challenging, but box-sizing saves the day!

textarea{
    width: 100%;
    padding: 20px;
    border: 1px solid black;
    box-sizing: content-box;
  }
Below is a textarea with content-box sizing.
textarea{
    width: 100%;
    padding: 20px;
    border: 1px solid black;
    box-sizing: border-box;
  }
Below is a textarea with border-box sizing.

 

Check out browser support for box-sizing. You'll need to use some vendor prefixes.


text-overflow

Handling overflowing text used to be a real pain. Now CSS can do the heavy lifting for you with text-overflow: ellipsis;

p{
    width: 200px;
    padding: 4px;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

This text is too long to fit in the paragraph

p{
    width: 200px;
    padding: 4px;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

This text is too long to fit in the paragraph

A couple of notes: make sure the overflow is set anything other than visible and that the size of the element is constrained. I've used white-space: nowrap; in the example above.

Check out the W3 spec on text-overflow and browser support.


rgba

My eyes welled up when I first learned about rgba coloring in CSS! It allows you to specify the opacity (alpha channel) of a color.

This differs from the opacity attribute because only the color has the transparency, and not the whole element, meaning you can have a semi-transparent element with fully opaque children (more on that here) .

You can also layer up elements for some nice effects.

.red{
  background-color: rgba(255, 0, 0, 0.5);
}
.green{
  background-color: rgba(0, 255, 0, 0.5);
}
.blue{
  background-color: rgba(0, 0, 255, 0.5);
}
 
 
 

Have a look at browser support for rgba coloring.

Want to track your time, send invoices, and get paid? You should take Paydirt for a spin.

Designed from the ground up for smart freelancers and savvy teams.

   or    Find out more