Archive for July, 2008

Unit PNG Fix Enables Transparent PNG Support in IE6

Wednesday, July 30th, 2008

I just stumbled upon Unit PNG Fix by Unit Interactive. It is one among the many JavaScript based PNG transparency solution for IE6, and is inspired by the SuperSleight solution. What’s good about it though is that it is fully DOM based and automatic. There is no need to assign any additional classes (such is the case with TwinHelix IE PNG Fix) or rename any files (refer to Dean Edwards IE7 fix).

The official website lists the following features:

  • Very compact javascript: Under 1kb!
  • Fixes some interactivity problems caused by IE’s filter attribute.
  • Works on img objects and background-image attributes.
  • Runs automatically. You don’t have to define classes or call functions.
  • Allows for auto width and auto height elements.
  • Super simple to deploy.

Impressed, I gave it a spin. I took one of my projects and replaced the existing TwinHelix PNG Fix code with Unit PNG Fix. It seems to work a charm in all areas except for one: elements with absolute positioning and / or z-index gets screwed up, as can be seen in the following screenshots:

Correct layout using TwinHelix PNG Fix:

This time using Unit PNG Fix:

Here’s the actual CSS code:

h1 a { background: url(images/logo.png) no-repeat; display: block; width: 256px; height: 128px; position: absolute; top: 15px; left: 472px; z-index: 99; }

Other than that, for “normal uses”, Unit is the easiest way to go. The project is only two weeks old, and I have high hopes that bugs like these will eventually be fixed to provide a truly plug and play IE7 PNG transparency solution.

On the same note, the PNG8 format may actually be preferable for low color, non-gradient alpha transparency requirements.

Posted in Automation, Browser, CSS, Hacks, IE, JavaScript, Tricks | 5 Comments »

Build Better Websites With Opera’s Free Online Web Standards Course

Monday, July 21st, 2008

The Opera Web Standards Curriculum is a set of articles published by Opera in cooperation with the Yahoo! Developer Network in an attempt to build a better web. There are currently 23 articles available, but more is promised to be released in the coming weeks.

Taken from the site:

Learning Web Standards just got easier. Opera’s new Web Standards Curriculum, released in association with the Yahoo! Developer Network, is a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities. The first 23 articles are currently available, with about 30 more to be published between now and late September.

Below are the currently published articles:

The beginning

  1. Introductory material, by Chris Mills.

Introduction to the world of web standards

  1. The history of the Internet and the web, and the evolution of web standards, by Mark Norman Francis.
  2. How does the Internet work?, by Jonathan Lane.
  3. The Web standards model—HTML, CSS and JavaScript, by Jonathan Lane
  4. Beautiful dream, but what’s the reality?, by Jonathan Lane.

Web Design Concepts

This section won’t go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.

  1. Information Architecture—planning out a web site, by Jonathan Lane.
  2. What does a good web page need?, by Mark Norman Francis.
  3. Colour Theory, by Linda Goin.
  4. Building up a site wireframe, by Linda Goin.
  5. Colour schemes and design mockups, by Linda Goin.
  6. Typography on the web, by Paul Haine.

HTML basics

  1. The basics of HTML, by Mark Norman Francis.
  2. The HTML <head> element, by Christian Heilmann.
  3. Choosing the right doctype for your HTML documents, by Roger Johansson.

The HTML body

  1. Marking up textual content in HTML, by Mark Norman Francis.
  2. HTML Lists, by Ben Buchanan.
  3. Images in HTML, by Christian Heilmann.
  4. HTML links—let’s build a web! by Christian Heilmann.
  5. HTML Tables, by Jen Hanen.
  6. HTML Forms—the basics, by Jen Hanen.
  7. Lesser–known semantic elements, by Mark Norman Francis.
  8. More HTML articles to follow…

Supplementary articles

Posted in Code, Development, Opera, Tutorial | 1 Comment »

Interview with TemplateMonster.com

Wednesday, July 16th, 2008

Every designer knows about Template Monster. You know, that website many a designer look at in order to draw inspiration? Sometimes to the point where the design actually gets ripped (we’ve had our fair share of gallery submissions that turn out to be Template Monster rips). So anyway there’s an interesting interview at InsideTheSites with David Braun, founder of Template Monster. It covers the short and humble history from its small beginnings as your typical web development company, and their strict standards in monitoring and approving submissions, to their future plans and Site2You.com.

Posted in Design, Inspiration | 2 Comments »

Peek-a-boo Sliding Animation Done in CSS

Wednesday, July 9th, 2008

It has been a while since I’ve seen something extraordinary in CSS that made me smile — the last one being CSS Homer. Today, I had another one of those delightful moments. Does anyone remember having one of those cardboard animation boxes as a child? You know, that thing where you had two pieces of cardboard one on top of the other. The top cardboard had vertical strips cut out from it, while the bottom cardboard would contain two pictures, overlapping one another at points where the image would peek through the vertical cut outs of the top cardboard. So that when you moved placed them on top of one another and move the bottom cardboard left and right, by viewing the changing image from the cut outs would give the illusion that the image is animating. At a whopping 2 frames!

Do you remember how amazing you thought it was back then? If not, then you are probably too young and never had the chance to experience that kind of toy — but fear not, for Alex Walker has successfully this sliding animation through CSS. The Peekabo Animation technique is a bit complicated to explain, so I leave it up to you to follow the link to the original article where there are some nice screenshots explaining how it is done.

The gist of it though, is creating the background image (or the “bottom cardboard” in real life) and placing a repeating black and transparent mesh on top of it. Both are done by assigning the background property of two nested elements (DIVs).

The result is an amazing image that animates when the user resizes the browser window. Check out the demonstration page and have fun!

While this makes for a neat demo, the downside to this, aside from having an obviously darkened image resulting from the black-and-transparent mesh, is that the user needs to resize the browser to actually see animation. So unless you plan to inform the visitor about your cool website feature, it’s pretty much left up to chance that a visitor might actually see the trick. Which, given the fact that majority of users rarely resize their browser, pretty much results in a miss.

But still, I am left impressed. I love it! :)

Posted in Animation, CSS, Design, Tricks | 2 Comments »