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.
Here’s some tags. They stretch to fit the text and change state on hover:
Here’s the code and image:
I’ve created a frame for browser shots – it’s the safari browser. All screenshots have to be 300px wide.
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.
I’ve created a presentation about HTML emails.
Contents:
Wikipedia will tell you that the international symbol for accessibility is the wheelchair symbol. The International Commission on Technology and Accessibility have designated (and copyrighted) this as the International Symbol of Access (ISA).
The symbol is clear, and it denotes wheelchair access. An alternative to stairs or other obstacles which obstruct the access to wheelchairs will not be found where you see this symbol.
Here are a few symbols that could be used as an alternative to a wheelchair:
Here’s a few tips to bear in mind now we have a new range of browsers.
Accessibility needs are becoming more important as a solution to giving cross-browser accessibility to everyone. It’s not just people who have accessibility needs, now it’s devices, or ‘thin clients’ which are having accessibility issues.
There’s some new rules for ensuring your web site works with browser zoom or in the new mobile browsers.
There’s two new browsers in town: Apple IPhone and Opera Mini (testing on version 3.1.2). They shrink full websites down to a small screen size.
1. Css media=”handheld” is ignored by the iPhone and Opera mini browsers. They think they’re real browsers. Any style-sheet with media=”screen” will be rendered by these phone browsers.
2. Zoom isn’t a raster zoom. The text font size is reduced independently to the spacial elements. It should be reduced by exactly the same amount but it doesn’t always work perfectly.
Instructions for creating a batch action (macro) in Photoshop:
Windows -> Actions
> (button in top right corner of actions box)
> New Set (name)
> New Action (name) — recording
Image Size
[] untick resample image – redo resolution – OK
File automate -> Fit image
(keep the x and y the same) OK
File -> Save as -> Place
File close (For save for web must have “No, don’t save original” after close)
Actions -> Stop button
File -> Automate -> Batch
Source -> CHOOSE (button) (supress color profile warnings)
p.s. – open an image before you start this procedure.
Here’s a ‘virtual’ version of a nicely designed clock – created in flash. The location of the site with the original physical clock has been lost – so sorry, no acknowlegement: