Archive for the 'css and html' Category

Mashing it up

Tuesday, April 12th, 2011

Krantz and Sheldon architectural images meets Google StreetView

With LibraryHack and the State Library of WA day of hack approaching, I needed a demo, a quick look at the datasets that the State Library of WA made available. I settled on the Krantz and Sheldon architectural photographs. As this was a small set of photos, I did not have to search through a whole collection of 50,000 images looking for a suitable theme, as this dataset already had a theme, the work of Krantz and Sheldon in Perth in the 1960s and 1970s. Fortunately most had some basic geolocation data, such as addresses.

The original concept was to produce an animation, using CSS3, HTML5 and javascript, showing the Krantz and Sheldon photographs alongside the current Google Streetview. I have not had the chance to animate the sequence yet …

Overflow: hidden and border-radius

Monday, April 11th, 2011

aka a square peg in a round hole

When I was creating the Krantz and Sheldon architectural photographs meets Google Streetview mashup, (more posts to follow on that). I decided that as the Krantz and Sheldon archive was from the sixties that instead of rectangular images, the images should be circular, which should of been a piece of cake using border-radius CSS3 property. As the dimensions …


Sunday, August 15th, 2010

Sometimes you look at other people’s code and go why didn’t I think of that. Which is exactly what I thought when I saw Paul Irish’s elgant solution to the old conditional comments vs CSS hacks dilema. The HTML5Boilerplate by Paul Irish and Divya Manian is a collection of elgant solutions to common problems in web coding.

Boilerplate is not a template or framework, just a set of tools to get that site developed quickly. I know I will be making use of most of it in the near future.

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 …

Cleaning up Word HTML

Monday, September 7th, 2009

If you are like me, on occasions you have people want to paste directly from Word into CMS or Wordpress. I was bemoaning the fact, that you either end up with Word HTML or lose all the formatting, when a colleague of mine, Steven Miles suggest I use JavaScript to clean up the HTML and provide the some code.

So this is what I created to clean up Word HTML, you paste the HTML is to the editable div, hit the button and if you are using Internet Explorer the converted HTML is copied to your clipboard. So you can paste the clean HTML (note it is HTML code) straight into the CMS editor in HTML mode …

*** does not currently work in IE8, I need to investigate further ***

Drop caps, first-letter and Firefox

Monday, January 19th, 2009

I have been experimenting with the :first-letter pseudo-element to try and write up a tutorial on using first-letter, adjacent selectors and @font-face to produce drop caps and I have run into a problem in the form of Firefox. Because you need to apply the property float: left to stop first-letter being an inline element and Firefox applies different rules to floated :first-letter pseudo-element than the other browsers, making it difficult to vertically align a floated :first-letter pseudo-element and the the remaining text.