A Complete Guide to CSS3

CSS3 is a very hot topic at the moment and probably my favourite code at the moment, as W3 Mozilla and Webkit are releasing new features all the time. Although it is only compatible with modern browsers such and Safari, Mozilla and Chrome, and only partially compatible with IE, It’s still an incredible useful to be using especially as when used by incompatible browsers, it’s just ignored so unless you’re using it for key features of your blog, you should be able to add it and forget about backwards compatibility.

With most of the CSS3 styles you’ll need to write them out several times to account for all three browser styles. This is done by adding either ‘-moz-‘ or ‘-webkit-‘ to the beginning of each of the styles. Anyway lets begin!

Columns

Column-count – the number of columns that you want. Column-gap – the size of the gap between the columns. Column-rule — the border between each of the columns. Just the same as a normal border style width colour. Column-width – fairly self-explanatory, normally not needed.

As with usual to get this to work with webkit and Mozilla browsers you just need to add -moz- or -webkit- to the front (-moz-column-count:2;).

Text Effects

Text-overflow – removes text overflow: ellipsis – finishes the text with …, clip – cuts off at last full work, Word-wrap – It enable you to break reallylongwords up in to nice short ones. This helps to keep your layout smooth and unbroken with no nasty over laps. Resize – used for text-areas this allows you to restrict in which direction a text-area can be expanded. Either vertical, horizontal or both. Text-shadow – For adding a shadow to text. X-axis, Y-axis, Blur distance and colour. Mask-image – Only available with webkit at the moment, needs to be teamed up with another style.

@font-face – Used for adding custom fonts into your css, first you need to give it a name which is the font-family, you then need to tell the computer where your font is which is the src bit. There some really nice to tools to help you do this. Font squirrel not only a wide a variety of fonts to download there is also a simple tool for generating the various font types and code needed to incorporate a custom font. The other tool is google web fonts. Just include one line of code in your markup and you can use all of their custom fonts.

Transform

Translate – Used to move elements around the page. translate(x-axis, y-axis) Rotate – Rotate element. Skew – Used to rotate elements on any axis, so skewx, skewy or skewzScale – Used to scale elements 2.2 = 220%.

Conclusion

So that’s your complete guide to css3, if there’s any I’ve missed just leave a comment and I’ll add them to this list.