Monday, November 30, 2009

7 Important Things You Must Know About CSS3

If you are eager to read some unique features of CSS3 properties then this post going to help you.

In this post I'm sharing some important CSS3 properties. These properties includes @font-face, CSS Layout-Grid, Include-Source, HSL and HSLA Property, Size Property and many more.

Embedding a Font Face

The @font-face let you to attach external list of fonts in your CSS. Here's the following CSS code to do that:

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;

You can also apply with CSS3 Shadow effect:

@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
.NewCSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
text-shadow: 3px 3px 7px #111;

CSS Layout-Grid

The ‘layout-grid’ property is a shorthand method used to set the ‘layout-grid-mode’, ‘layout-grid-type’, ‘layout-grid-line’, ‘layout-grid-char’, and ‘layout-grid-char-spacing’ properties using a single property notation.

div.LayoutGrid {layout-grid: both loose 15px 15px 2cm;}

CSS Include-Source

This property gives you a freedom to inserts another document into the current document, replacing the current element’s content.

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url(;

HSL and HSLA Property

The HSL declaration sets color/colour using Hue (H), Saturation (S) and you maybe guessed it, Lightness (L).

Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between.

Saturation is a percentage: 0% being grayscale and 100% in full color.

Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest.

HSL CSS code:

div.L1 { background:hsl(320, 100%, 50%); height:20px; }
div.L2 { background:hsl(320, 50%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }

HSLS CSS code:

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

Text-Autospae Property

This property controls the autospacing and narrow space width adjustment behavior of text.

div { text-autospace: ideograph-numeric; }

Size Property

This property describes the orientation or dimensions of the page box. The ’size’ property classifies a page box so that it is either ‘relative’ or ‘absolute’.

body { size: 8.5in 11in;}

CSS Ruby-Align

This property specifies the horizontal alignment of the Ruby Text (RT) relative to the RUBY element content.

ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

<ruby style=”ruby-align: right; ruby-position: above; ruby-overhang: whitespace”>Ruby base content<rt>Ruby text</rt></ruby>

If you any opinion, please leave a comment.

Related Posts :


Destiny Islands said...

Really nice tips. I have been using CSS2 for years now and I feel like I've mastered the language, but with all of these new rules in CSS3 I'll have to go back and hit the books to learn em!

Brad Frost said...

Any idea what the current support is for the CSS Layout-Grid property and CSS Include-Source property?

Anonymous said...

Just to note, linking directly to fonts in that way violates most font licences

Silver Firefly said...

Thanks for the tips. But it would have been nice to include the current browser support for each property.

Darrell Estabrook said...

Be aware, if your target and primary audience is using IE 6, 7, or 8, then CSS3 and HTML5 will not render (those browsers still have a dominant market-share).

Luke Sheppard said...

True (the font license bit) but you can find lists of fonts that can be used in this way all over the web. I won't post a link on here but there are a LOT that you can use. Obviously not the premium fonts but some are reasonable.

Am I to believe that the "CSS Include-Source" property is a bit similar to using frames?? If so, that'd be sweet. I used to like using frames occasionally, especially on sites where the client had a little html knowledge and wanted to be able to update small sections of the site without messing about with the source code for the entire page.

Sneeky said...

include-source is NOT a css3 thing!! Never gonna happen

Lover of Sadness said...

but is CSS3 supported in all browser??

Josh said...

You've got to be careful with @font-face. It's hard to find fonts that you can use. A couple of things in CSS3 that I've been excited about: gradients and transitions -- individually, not using them together, although you could. I've been using gradients along with border radius to create rounded buttons that actually look like you pressed them. Transitions can be used in all kinds of awesome ways.

Rizwan said...

Hmmmm Usefull!!!

cardeo said...

nice tips - some of that is news to me

Post a Comment


Copyright © 2009 -