Experimenting in ...

CSS3 ... has potential for making lives for desingers/developers so much easier and fun!


Web Fonts

Feeling stuck with just the default fonts on the OS? Want some better fonts on your web page? Well, CSS3 gives you some typographic love with the addition of web fonts. This slightly controversial addition to the spec has already been implemented in the newer versions of webkit, presto and gecko. This is achieved by using the @font-face rule. Check out more about it here.

Basically you use the @font-face rule to load the URL to the font file, and then give it a name. Then you are free to use it just like the regular fonts.

For example...

@font-face {src: url('http://yourwebsitename.com/yourFont.ttf');font-family: 'myFont';}

and then use it something like

#mydiv{font: 2.5em 'myFont';}

I have a demo page which uses Web fonts, as well as other CSS3 awesomeness, check it out.

Web Fonts in Hindi

I wanted to create a demo in a language other than english as well. This is because for many people, fonts just automatically mean english fonts. However, for people in countries where other languages are also spoken, they would like some typographic love in their own languages on the web as well.

So I created this example in Hindi (devanagari script) to give a demo a web fonts being used in another language as well. The actual text is in unicode, and extra styles to the script have been applied using web fonts. The page itself is in HTML5

The actual technique of using web fonts in another language is exactly the same as in english. Just make sure to use Unicode for the actual text. In my opinion, this gives a huge boost to writing in non-english languages the right way, instead of using EOT files, which only work on Internet Explorer. In India for example, there are a few sites which still are using EOT files instead of unicode, which makes their website display improperly on all other browsers.

On a side note, I've found that most Hindi fonts on the web, are not extraordinarily different from each other. They more or less have seemed to be designed for legibility rather than the purpose of style. This is in contrast to english fonts, which have a huge variety and you can find many fonts which focus on being simple and legible, and many on not being that legible, but focussing instead on style and ostentation.

Go ahead and see the demo for for web fonts in hindi


There is nothing much to explain with the opacity property. Hopefully, people will no longer use those IE-only filters to do basic things like these anymore. An opacity of 1 makes it fully opaque and 0 makes it fully transparent.

example for opacity


Check out this article on RGB(a) and HSL(a) by Molly Holzschlag explaining it all. However, some basic info on these things are...

Till CSS 2.1 we could only specify the hex values of a color (or use a name like 'white', etc). With CSS3 you can use directly the RGB and HSL values which gives you more precision in specifying your colors. the 'A' part in RGBA and HSLA stands for 'Alpha' and with that you can control the level of opacity (actually thats wrong as its not opacity....its the alpha channel, but really...) for the color as well.

example for RGB, RGBA, HSL and HSLA


Originally proposed in CSS2 and implemented even earlier in some browser, text-shadow will once again, hopefully, remove the need for images where text is more appropriate. You can make some pretty cool photoshop-like effects with these

It follows the format vertical_offset horizontal offset blur_radius color. For example...

text-shadow: 10px 5px 3px #000 will give the horizontal offset as 10 pixel (towards the right; a negative value would have given an offset towards the left), vertical offset of 5 pixels (downwards; a negative value would have been upwards) and a blur radius of 3 pixels (no negative values allowed here).

example for text-shadows

Multiple column layout

This gives the ability to style text in multiple columns, just like you have in newspapers, print articles or scientific papers.

This has multiple criteria. column-width specifies the width of each the coloumns and column-count specifies the number of columns. All this can be combined in a single column for example column: 12em 2 which is specify a column-width of 12em and a column-count of 2.

Then you have the gaps and lines between the columns and rules to specify them as well. column-gap specifies the gap between the column. column-rule-color the color of the the line between the columns. column-rule-style and column-rule-width work exactly in the same way as border-style and border-width. There are some other stuff regarding multiple columns, but right now I'm just stating these properties.

example for multiple columns

CSS Selectors

To me, the way CSS selects elements always has been one of the reasons I think made learning and implementing CSS in web pages very quick. Nowadays even JavScript libraries are kind of imitating this. However, the selectors in CSS3 takes this further and makes sure some of the stuff that we wish we could have selected using plain CSS 2.1 could be done now in CSS3.

The whole CSS3 Selectors working draft has too many things to list down here, so I'll just talk about the stuff that I'm most excited about, which are the attribute selectors, pseudo elements and structural pseudo classes.

example for selectors in CSS3

Border Radius

Till now, to have rounded corners, we had to resort to ugly hacks which quite typically led to div-soup. The border-radius property is feature of CSS3 which makes doing already commonplace but tedious design taks much easier.

border-radius: 5px will create a round corner of radius 5px on all four corners. If you want to specify the individual radii of the four corners, you can use border-top-right-radius, border-top-left-radius, border-bottom-left-radius and border-bottom-right-radius properties individually.

Right now only webkit and gecko have support for it. Properties are prefixed with the -webkit- and -moz- suffixes respectively. Opera has a gogi build based on their Presto core 2.4 layout engine which supports this, but Opera doesn't have a proper public build yet which supports it.

example for border-radius

Transitions and Transforms

Transitions are used to transition the properties of an element from one state to another....for example color, background color, width, etc...There are various timing functions you apply to them too.

Transforms are more about rotating, scaling and moving the element about a page and not about inheritenly changing the properties of the element as such (though scaling, some would argue does that).

I have a demo page for css3 transitions and transforms, which I used in other parts of the site to demo web fonts, and other stuff too. If you hover over the navigation, then you'll see that the menu appears. This is achieved entirely through css3.

Some other small demos I made: