Jun 11

Here’s some CSS buttons.

These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Continue reading »

Jun 07

Here’s how to load images from any server using a simple XML files. Useful for giving clients or affiliates access to updating sites without changing the main code.

See it in action at: Loading images with XML & jQuery
Continue reading »

Apr 27

I’ve created a frame for browser shots – it’s the safari browser. All screenshots have to be 300px wide.

Eklog

Here’s a link to the pre-sliced Photoshop image: mac_browser_sml.psd

Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.

Here’s the CSS

Continue reading »

Jan 28

swfobject is a great tool for serving flash in a standards-based, accessible way.

Version 2.1 is available at google code – here’s the link: code.google.com/p/swfobject/

Main Advantages:

  • It’s more optimized and flexible than any other Flash Player embed method around.
  • It uses unobtrusive JavaScript.
  • It offers a standards-based, accessible way to serve flash.
  • It allows you to avoid click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

There are two publishing methods: static publishing method & dynamic publishing method.
Continue reading »

Mar 26

HTML Markup:

  • XHTML Strict 1.0 W3C valid markup.
  • Semantically correct markup – e.g. use <ul> unordered lists for any list of items.
  • Common identifiers should be used based on potential HTML classes and hCard microformat.

Cross Browser Valid:

  • Identical (and fully functional) user experience across browsers. (note: browser differences for font anti-aliasing are expected) – Internet Explorer 6, 7 & 8 + Safari 2 & 3 + Firefox 2 & 3 + Google Chrome + Opera 9 for Windows XP | Firefox 2 & 3 + Safari 2 & 3 for Mac OSX.

CSS Styling:

  • CSS styles must be completely unobtrusive with no inline styles.
  • Elements should not be positioned absolutely unless necessary – All main element blocks should normally be positioned relatively so if new content is added the existing elements would automatically reposition in the flow. Also wherever font-size is increased the layout integrity remains.

Continue reading »

Mar 26

Image Toolbar

If you add the following meta tag:
<meta http-equiv="imagetoolbar" content="no">
Then you won't see the following for IE image hover:
IE image toolbar effect

Skype Toolbar

If you add the following meta tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Then ONLY phone numbers within the following tags will be highlighted:
<!-- sphoneid telnr="+15551234456" fileas="John Smith" -->(555) 1234 456<!-- sphoneid -->
IE image toolbar effect

Useful meta tag link: More information on meta tags