Archive for the 'css and html' Category

RGBa is the new black, with sup­port in most mod­ern Safari 3, Fire­fox 3 and Opera 10, you can have semi trans­par­ent ele­ments. Only there is no sup­port cur­rently in IE for RGBa.

How­ever, you can eas­ily fake it for back­grounds of block ele­ments in IE with
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#aaRRBBGG', EndColorStr='#aaRRBBGG);
The fil­ter gradi­ent places a alpha chan­nel col­our gradi­ent over the back­ground. So as long the back­ground is trans­par­ent, the start and end col­ours the same and the alpha (aa) chan­nel a value greater than 0 (fully trans­par­ent) and FF (fully opaque), you get a block ele­ment in IE with a RGBa back­ground. You can see an example of RGBa in action in IE …

For those who have not seen my Edge of the Web CSS3 demon­stra­tion I used the CSS Zen Garden HTML. Why, because I wanted to use some­body else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be famil­iar with the site.

I will not sub­mit it, because Dave has not accep­ted any new sub­mis­sions almost two year, my demo is far from the visual stand­ard of most other design and I broke one major rule the CSS does not validate.

I really enjoyed devel­op­ing my present­a­tion for Edge of the Web. The research and exper­i­ment­a­tion was a lot of fun. Explore the demo using CSS Zen Garden HTML and ser­i­ously try it in IE6, the Web­Jam present­a­tion with some even more out­rageous trans­itions needs Safari4 or FF3.7 and a little explor­ing with a mouse.

What I learnt is enough from prob­ably a dozen blog posts, so hope­fully I will be writ­ing lot in the next few weeks.

For those who have not seen my Edge of the Web CSS3 demon­stra­tion I used the CSS Zen Garden HTML. Why, because I wanted to use some­body else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be famil­iar with the site.

I will not sub­mit it, because Dave has not accep­ted any new sub­mis­sions almost two year, my demo is far from the visual stand­ard of most other design and I broke one major rule the CSS does not validate.

Well I am speak­ing at the Edge of the Web Con­fer­ence in Perth in Novem­ber. The title Pro­gress­ive Enhance­ment with CSS: Or how I stopped wor­ry­ing about IE6 and start­ing lov­ing CSS3.

The aim is to show how you can use CSS2 and CSS3 to improve the exper­i­ence of vis­it­ors using mod­ern browsers, while not block­ing access to those people still using older browsers like IE6 …

If you are like me, on occa­sions you have people want to paste dir­ectly from Word into CMS or Word­press. I was bemoan­ing the fact, that you either end up with Word HTML or lose all the format­ting, when a col­league of mine, Steven Miles sug­gest I use JavaS­cript to clean up the HTML and provide the some code.

So this is what I cre­ated to clean up Word HTML, you paste the HTML is to the edit­able div, hit the but­ton and if you are using Inter­net Explorer the con­ver­ted HTML is copied to your clip­board. So you can paste the clean HTML (note it is HTML code) straight into the CMS editor in HTML mode …

*** does not cur­rently work in IE8, I need to invest­ig­ate further ***

I have been exper­i­ment­ing with the :first-letter pseudo-element to try and write up a tutorial on using first-letter, adja­cent select­ors and @font-face to pro­duce drop caps and I have run into a prob­lem in the form of Fire­fox. Because you need to apply the prop­erty float: left to stop first-letter being an inline ele­ment and Fire­fox applies dif­fer­ent rules to floated :first-letter pseudo-element than the other browsers, mak­ing it dif­fi­cult to ver­tic­ally align a floated :first-letter pseudo-element and the the remain­ing text.

There are a num­ber of people demon­strat­ing what is pos­sible is pos­sible with CSS3, here are a few of the bet­ter ones I have found.

My wish list of browsers I would like not to sup­port in 2009. One might sur­prise you and top of my list is not IE6

A little exper­i­ment with a two pop­u­lar win­dows fonts and a num­ber of dif­fer­ent browsers, and one pain­ful result