7 New Essential CSS 3 Techniques Revealed

May 19, 2013 · 58 comments

by Lars

There are several new and exciting functions and features being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc…

This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3. In some cases other techniques are available making our life easier while waiting for CSS3 to break through and these will be briefly covered as well.


ElegantThemes
ThemeForest

Advertisement

Be aware that CSS3 features are not yet accessed directly in most browsers and in some it is not even implemented at all, ex. Internet Explorer. Firefox use a prefixed with -moz-, resulting in fx. -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing. Coding CSS3 is therefore currently a bit irritating as you have to write the same code multiple times with different prefixes. Anyway playing with and understanding the opportunities that new features in CSS3 will offer is is worth investing a bit of your time for.

Border Radius: Create rounded corners

There are many ways to create rounded corners on boxes. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While most of these techniques are interesting to investigate, they are not really elegant. The strength and main goal of CSS is to separate content from presentation, yet using these techniques we are adding “unnecessary” mark-up to our code in order to create a visual effect. The reason that all these creative techniques have been invented is simple. With CSS2.1 we can only assing a single background image per element.

The good news is that W3C has offered some new options in CSS3. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements. CSS3 is also adding border-radius that may eliminate the need for images to create rounded corners in most cases. Both Mozila/Firefox and Safari have implemented this new function, it’s not supported in any IE yet. Below you will see an example:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

css3 techniques

See working example here.

Anti-aliased Rounded corners with JQuery

The “Curvy corners” script was originally developed by Cameron Cooke, I (Mike Jolley) have since modified it for use in JQuery. The end result is a JQuery optimised file, much smaller in size, and working perfectly. Packed it is just 9kb in size!

css3 techniques

jQuery Canvas Rounded Corners

jQuery Plug-in to make rounded corners on your DOM objects using <canvas> element. Tested in IE7 and FF3

css3 techniques

jQuery Corners

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

css3 techniques

Tutorials:Rounded Corners

This is a really good tutorial showing you how to add rounded corners to an element, using no extra markup.

css3 techniques

Border Image

The new CSS3 property border-image is also worth investigating. It is not supported in all browsers yet but it can be used to create really cool visual effects. Border-image, allows an image to be used as the border of an element. Each side of the image corresponds to a side of the HTML object. Supported browsers are currently Firefox3.1 and recent releases of Safari and Chrome. The imag below illustrates the concept:

css3 techniques

Here is an example of code that generates the first box in the image below.

<p style="margin: 0 30px; width: 227px; padding: 14px;
-o-border-image: url('image-border.png')29 29 29 29 round round;
-icab-border-image: url('image-border.png')29 29 29 29 round round;
-khtml-border-image: url('image-border.png')29 29 29 29 round round;
-moz-border-image: url(image-border.png')29 29 29 29 round round;
-webkit-border-image: url('image-border.png')29 29 29 29 round round;
border-image: url('image-border.png')29 29 29 29 round round; border:
double orange 1em;">Lorem ipsum dolor sit amet.</p>

See working example here looking like below if you have one of the supported browsers. As you can see it is not that easy to make it nicely with width and height.

css3 techniques

Text-shadow

If the design you are implementing requires fancy effects on text like fx. drop shadow this is likely to be done as images fx. created in photoshop. In CSS3 the need for Photoshop to create simple shadow has been eliminated. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

css3 techniques

See working example here looking like above if you have one of the supported browsers (I have used Chrome to create the image above). Opera, Konqueror, iCab and Firefox 3.1a should also be supported.

jQuery DropShadow

You can also use this jQuery pluginto create good looking drop shadows – even on images (see the cog wheel below)

css3 techniques

Tutorials:Wrapping Images With A Drop Shadow

The design method works its magic by nesting divs that have no semantic or structural value. If that bothers you (and there are good reasons why it might), this is not the tutorial for you.

Some CSS techniques require “extraneous” markup because currently only one background image can be assigned per element. Here’s how jQuery attacks the problem.

 $(document).ready(function(){
   $("img.dropshadow").wrap("<div class='wrap1'><div class='wrap2'>" +
     "<div class='wrap3'></div></div></div>");
 });

css3 techniques

box-sizing

The old problem of having to use the conventional Level 2.1 box model in conjunction with padding and/or border values is solved using CSS3. Up until now, this problem was a major stumbling block for developers, particularly in the instance of specifying a border/padding value in relation to a fluid length element, but the new ‘box-sizing’ property answers this problem.

There are currently two values in the official spec- ‘content-box’ and ‘border-box’ so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width.

  • ‘content-box’ – “This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.”
  • ‘border-box’ – “The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.”

Example code, see working example here looking like below if you have one of the supported browsers (I have used Chrome to create the image below).

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

css3 techniques

CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value. This provides powerful new ways to style elements automatically that match very specific criteria. One example could be using CSS to add an image to all links having file type .pdf. This can be achieved with this simple code:

a[href$='.pdf'] {
 padding-right: 20px;
 background: url(pdf.png) no-repeat right;
}

css3 techniques

Other relevant uses could be mailto, rss or .mov for links or it could be interesting to test on the title value and apply specific formatting if the value is “home”. As you can imagine the possible use cases are nearly endless.

a[href ^="mailto:"] {...
a[href$='.rss'], a[href$='.atom'] {...
a[href$='.mov'] {...
p[title^="home"] {background: green;}

Example code, see working example here looking like below if you have one of the supported browsers (I have used Chrome to create the image below).

Transparency & Opacity

The most widely implemented feature of CSS3 up till now is opacity. ‘opacity’ sets the value to how opaque an elements. An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value in between will determine how opaque (or transparent) the element is.

<img src="opacity.png" style="margin: 10px; opacity:0.25; width:179px; height:76px;"/>
<img src="opacity.png" style="margin: 10px; opacity:0.50; width:179px; height:76px;"/>
<img src="opacity.png" style="margin: 10px; opacity:0.75; width:179px; height:76px;"/>
<img src="opacity.png" style="margin: 10px; width:179px; height:76px;"/>

css3 techniques

Gradient jQuery plugin

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

css3 techniques

Multiple Backgrounds

CSS3 allows for multiple background images on one element. This feature is not implemented in all browsers yet but once it is it will be a real time saver. This means that you will be able to make effects much easier. Effects that requires 4 elements with CSS2.1 now will only require one element. You can separate backgrounds by commas, like this:

div.multiback {
 height: 200px;
 width: 720px;
 padding: 150px 20px 20px 20px;
 background: url(top.png) top left no-repeat,
 url(banner.png) 11px 11px no-repeat,
 url(bottom.png) bottom left no-repeat,
 url(middle.png) left repeat-y;
 }

This CSS code will generate the following effect. See working example here looking like below if you have one of the supported browsers (I have used Chrome to create the image below).

css3 techniques

CSS Multiple, Layed Backgrounds with jQuery

The Background Layers plugin reduces the amount XHTML you need to write simply by adding a few lines of JavaScript, making your code much less cumbersome. The concept is similar to the use of layers in Photoshop, one background image on top of another.

<script type="text/javascript">
  $(function(){
    $('.outerBox').add_layer("#679cc6");
    $('.outerBox').add_layer("url('/images/l.png') left repeat-y");
    ...
<div style="height: 100px; width: 100px;">Test 1</div>
<div style="height: 200px; width: 400px;">Test 2</div>

css3 techniques

word-wrap

The word-wrap property was invented by Microsoft and added to CSS3 and it is really essential. There is nothing as long words that can make web design break. The CSS3 word-wrap property will change this as it allows long words to be able to be broken and wrapped onto the next line. It takes in two values; normal or break-word.

In the first paragraph below, normal is used. This is the same as if the property wasn’t used, i.e. the long word breaks out of the box as there isn’t enough width for it to be fully contained in the box. In the second paragraph, break-word is used and the long word is broken into two pieces, so that the second part wraps onto the next line.

<p style="word-wrap: break-word;...

This CSS code will generate the following effect. See working example here looking like below if you have one of the supported browsers (I have used Chrome to create the image below).

css3 techniques

This is currently supported in IE, Safari, and Firefox 3.1 (Alpha).

{ 12 comments… read them below or add one }

????? ?? ???? April 2, 2011 at 10:20 pm

thank you very much for your share, very useful

Reply

Brett Widmann October 24, 2010 at 9:22 pm

Great techniques and list of tutorials. Thanks for sharing!

Reply

????? ???? June 15, 2010 at 9:10 am

thanks,
very useful.bokmarked!

Reply

Josh December 4, 2009 at 4:29 am

The really awesome thing about border-radius is that if you round the corners enough, it almost makes a rectangle appear as an ellipse, thus creating the ability to make some really awesome buttons when combined with gradients.

Reply

webchester November 20, 2009 at 12:05 pm

Very nice article :)

Reply

Joseph September 14, 2009 at 11:00 pm

Hey Just used the rounded corners tip. Works great in firefox and safari, very handy! keep up the great work!!!

Reply

Flex developer June 30, 2009 at 9:15 am

Great post… good suggestions…thanks!

Reply

Kristin June 29, 2009 at 3:00 pm

Nice article, thanks! Sorry to be a nit-picker, but there are some serious spelling and grammatical errors in this piece. Maybe I’m old school (yes, indeed I am) but professional writing is deteriorating in almost every web-design article I read. It’s like Lolcats started blogging about design everywhere.

Reply

tripwiremag June 29, 2009 at 3:18 pm

Don’t be sorry – your feedback is really appreciated. You’re right it wasn’t good at all. Found and corrected some – hope it’s better now.

Reply

AREA 1 June 29, 2009 at 6:18 am

Nice post, thanks!

Reply

Rob June 29, 2009 at 12:04 am

Jason,
Please don’t tell me you are looking at the examples above and think that’s how those CSS properties work, colors, images and all.

Reply

Jason Grant June 28, 2009 at 10:10 pm

Cannot help but observe (like many others so far) that most of these look somewhat tacky and are most likely not to be used much in the future for professionally designed web sites.

Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 46 trackbacks }

Previous post:

Next post:


Web Analytics