Archive for the 'progressive enhancement' Category

RGBa backgrounds in IE

Sunday, November 8th, 2009

RGBa is the new black, with support in most modern Safari 3, Firefox 3 and Opera 10, you can have semi transparent elements. Only there is no support currently in IE for RGBa.

However, you can easily fake it for backgrounds of block elements in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The filter gradient places a alpha channel colour gradient over the background. So as long the background is transparent, the start and end colours the same and the alpha (aa) channel a value greater than 0 (fully transparent) and FF (fully opaque), you get a block element in IE with a RGBa background. You can see an example of RGBa in action in IE

Why use CSS Zen Garden for CSS3 demo

Friday, November 6th, 2009

For those who have not seen my Edge of the Web CSS3 demonstration I used the CSS Zen Garden HTML. Why, because I wanted to use somebody else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be familiar with the site.

I will not submit it, because Dave has not accepted any new submissions almost two year, my demo is far from the visual standard of most other design and I broke one major rule the CSS does not validate.

CSS3 presentations at EOTW09 and WebJam11

Thursday, November 5th, 2009

I really enjoyed developing my presentation for Edge of the Web. The research and experimentation was a lot of fun. Explore the demo using CSS Zen Garden HTML and seriously try it in IE6, the WebJam presentation with some even more outrageous transitions needs Safari4 or FF3.7 and a little exploring with a mouse.

What I learnt is enough from probably a dozen blog posts, so hopefully I will be writing lot in the next few weeks.

The League of Moveable Type

Saturday, September 12th, 2009

I just admire The League of Moveable Type. While a lot of font foundries are still working on licensing issues with embedding fonts in PDFs. here a couple of font designers discovered @font-face and went lets make the world a better place. By creating The League of Moveable Type, convincing a few fellow font designers to join them in releasing fonts with an open source licence suitable for embedding with @font-face.

I am on the Edge of the Web

Tuesday, September 8th, 2009

Well I am speaking at the Edge of the Web Conference in Perth in November. The title Progressive Enhancement with CSS: Or how I stopped worrying about IE6 and starting loving CSS3.

The aim is to show how you can use CSS2 and CSS3 to improve the experience of visitors using modern browsers, while not blocking access to those people still using older browsers like IE6 …

I am not the only one playing with CSS3

Tuesday, January 13th, 2009

There are a number of people demonstrating what is possible is possible with CSS3, here are a few of the better ones I have found.

first-letter pseudo element

Sunday, December 28th, 2008

I adore the printed page and those little refinements such as Initial Caps, that use to only be possible in print. Here is an explanation of the first-letter pseudo element which allows you to replicate that using HTML and CSS.

@font-face

Thursday, December 25th, 2008

My first experiment / tutorial in the progressive enhancement series is with the @font-face property, so enjoy and please do not litter the web with ugly sites that over use fancy type, moderation please.

Lessons in Progressive Enhancement with CSS2 and CSS3

Thursday, December 25th, 2008

I have start experimenting with CSS2 and CSS3 properties to see what I can use now for progressive enhancement. And by progressive enhancement I do not mean Hey we are so f&#8230ing cool and if you are not cool enough to use the latest bleeding edge browser you can go and read our RSS feed. It is more great your are using a good browser, lets make your experience better by providing a design closer to what I would of liked to use if it was not for the limitations of other browsers.