5 CSS3/HTML5 tricks to make your website run smoother


5 CSS3 / HTML5 tricks

Ladies and Gents - a geeky post for all those who like to dabble in a bit of code now and again! In this post we give 5 cutting edge CSS3/HTML5  tips that really help to speed up your websites but still enable them to look great!

When you create a site one of the major things which help to make it look modern and give a good user experience is Javascript or jQuery. These languages allow design elements to do things like glow, fade and move. While these languages do make your site look amazing, it does mean that there is one hefty file for each viewer to download. Google now looks at site loading speeds so we should try to find alternative ways in which to make our sites load quicker - but still look as slick.

Below are 5 CSS tricks that cut down loading time, as there is no need for images or javascript libraries-just CSS. These techniques use HTML5/CSS3 which is currently supported only by the most recent releases of most browsers (IE 8, Firefox 3.6, Safari 5 and Chrome 5) the latest versions of these will used by the majority of internet users within a year. Earlier browsers which don't support these techniques will simply not display them and this code degrades gracefully not effecting the user experience. So - lets be forward thinking folks - this is a taste of the future...

Tip 1 / Text Shadow

Some of you may have noticed that the links on Attitude have a faint shadow on them, yet no javascript is needed for this, just a little bit of CSS:

a { text-shadow: 1px 1px 1px #FFF; }

What the above code does is apply some text shadow to the text, here is how it works:
Text Shadow Syntax

Tip 2 / Box Shadows

If you attempted to add a text shadow effect to a box in the way in which we added a shadow to the text in Tip 1, you will find it does not work. But thanks to 'box-shadow' it is possible - meaning no more PNG image shadows, just pure and simple CSS! This is how it works:

.shadow {
-webkit-box-shadow: 2px 2px 3px rgb(255,0,0);
-moz-box-shadow: 2px 2px 3px rgb(255,0,0);
box-shadow: 2px 2px 3px rgb(255,0,0);
}

What the above code would do, is add a shadow on an element with the class shadow. This shadow would be red and 2px by 2px:
CSS Box-Shadow Syntax

Tip 3 / Transitions

It is possible using CSS to create transitions of effects, for example when you hover over a link it changes from blue to red. Wouldn't it be awesome if it faded into red? Well with CSS, that is possible!

a { transition: all 0.15s linear; -webkit-transition: all 0.15s linear; }
a:hover { color: rgb(255,0,0); }

What the above code would do is make the text change to red over a period of 0.15 of a second:
CSS Transition Syntax
That last bit, the linear, could confuse you. Have a look at the W3 specifications page about it. You'll see how you can choose how the element loads in - for example one option is ease-in which means it would start of slow, then get faster until it gets to the end. I have chosen linear meaning it will not change speed throughout, just take the specified period of time.
This would also work for things rotating (see below).


Tip 4 / Rotating

You all know the scenario, you build a website and then you want the images to be slightly be rotated. You also want the images to be in a CMS and give an administrator the ability to be able to change the image. This can be easy for the hardened coder with some ImageMagick/GD skills, but what if you could do it in CSS? Well you can:

.rotated {
transform: rotate(9deg);
-moz-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
}

What the above code would do, is on any element with the class rotated would be rotated clockwise by 9 degrees:
Rotate Syntax
It is a pretty simple syntax, but this, coupled with the transition effect and shadow could be an amazing website, for example see this Demo by the tutorial website 24 Ways. It blows us away!

Tip 5 / Word-Wrap

So you design a perfectly working website, then you find a reallylongwordinyourcontentwhichbreaksyourlayout. Wouldn't it be brilliant if you could somehow separate the words, without some complicated PHP scripting, allowing for font-sizes and types etc. Well thanks to CSS3, it is now possible:

.smallbox { word-wrap: break-word; }

In CSS3 there is a new property, word-wrap which is normally set to normal but can be set to break-word which would make a box separate long words:
Coded HTML/CSS showing the CSS word-wrap working

We hope this list of 5 CSS tricks will help you develop your websites more effectively. Leave a comment or share your own tips below!

Comments

Very good post - I use HTML5 and CSS3 in my work but I find IE is very problematic when using CSS3.

Buenos tips, buen blog, muy buena nota.

Nice post. If you are interested in seeing some more examples of HTML5 at work, we have put together a short list here: http://blogs.highlander.co.uk/2010/07/10/html5css3-experiments/

Awesome features to an already awesome technology!!