I'm pretty sure a CSS project is what most of you wanted for Christmas, right? Well, maybe not, but that's what you're getting from me. I've been meaning to give CSS a real workout so I finally got round to making a website that fully uses CSS for layout as well as easy re-styles.

I'd been asked a few times recently for some recipes I'd cooked up, and I have to rely on the original html file I created years ago that's no longer online. So, I thought I could spruce up this page and make a CSS site for my recipes:


A 'snazzy overview' of the site. © Beats! Design (2009)

The site was to rely on:

- Divs defined for every separate part of the page.
- A variety of CSS styles to give variety and print options.
- PNGs with invisibility, so they suit every style.
- Backgrounds with opacity for the recipe title.
- A stylised form menu to suit each page.
- CSS corrections for major browsers.


Various design elements across the site. © Beats! Design (2009)

Although some of these requirements were just for design purposes, the CSS coding was designed to allow major re-styles of the page just using a new CSS file. This would give each page a print version (few graphics, black and white) and two design versions (one white on black, one black on white).

Anyway, the best thing to do is check it out. I've only got 3 recipes up for now (I'll add some others as time passes) but do check out the Christmas recipe as it's one of my favourites and then it makes this post seasonal :)


The Christmas recipe in all its glory. © Beats! Design (2009)

This site (and plenty of others) shows that CSS can be used very effectively to re-design a page with the same HTML content. I don't think it's that important to give users many re-styled versions of a page, but a simple print version is one way to aid the user. It also shows a sleek design can be achieved without relying too heavily on graphics.

Beats! Design - Recipes
Recipe: Christmas Pudding Sauce
 

Flash can be a useful tool to jazz up a website, but is often used pretty inappropriately. One rule I always abide by is: 'Never make a large flash intro sequence, especially if it involves a fair amount of loading time, silly animations and ridiculous sound effects'. The flash developer at Hema (a Dutch department store) took this mantra and threw it out the window, doing everything wrong...


Looks like a normal product page to me... © Hema (2009)

...except the result is BRILLIANT. It makes their product list come to life and actually serves a useful function, guiding people around their products, keeping them entertained and leaving a sizable impression on them for next time.

Hema Product Page - wait until it loads.


...but it's much more fun than that © Hema (2009)

Normally these animation things only serve to boost the developer's ego, but I think in this case, he or she should be praised - it's silly, but great too :)
 

I don't always get asked to build completed sites: in the case of 10 Clarendon Crescent - residential apartments for visitors - I was asked to build a site-shell that can be added to easily over time.

Part of the reason for this was the ongoing development of the apartments themselves (being converted from an old hotel) but also the marketing was already beginning and a web address / site needed to be set up to supply more information at this early stage.

Therefore the site needed to be easily updated, simple to use and also easy to edit repeatedly as content may well change as the development entered different stages. So, it may be a shell, but feel free to check out the design - what was required was a striking, classy and informative site, with clearly defined sections and big buttons to make each page obvious.

The page also needed to incorporate a nice hand-drawn picture of the building (a remnant of the old hotel's design work), as well as a new logo for the establishment, all blending in to a high-contrast look.


The homepage of the 10 Clarendon Crescent website

One aspect of the site that I was asked to build was the mapping elements. In the end we went with a simple locational map, with a smaller inset-map on the homepage, leading to the map / address details. In time, a directions box will be added, but as the apartments aren't ready yet, we felt this could wait a while.


Detail of the maps on the 10 Clarendon Crescent website

So that's a bit of detail on a (relatively) recent project - I've been working away on a major project that is nearing its release date, but I can't give any more information out until that point - but I'll be sure to do a profile of it once it's done. Due to the reduced amount of time I have on design work, it makes it easier taking on one-off large projects than multiple small ones as I did before.

Beats! Design Project: 10 Clarendon Crescent
 

 

I'm currently in the mood for sharing - It's so easy to do the same old things on the internet and never really explore for anything new. But the best way to find new content is to ask others for their recommendations, so I thought it was time I reversed the process and gave some tips of my own.
 
My last post centred on computer and web browser modifications, so this time I'm moving on to web content and offering up the 9 blogs I visit most (and would thoroughly recommend). There's a nice range here - not all will be to everyone's tastes, but I'm sure some will, and I've tried to avoid any hugely popular sites that most will know of already. The rest should be self-explanatory, so sit back and enjoy. Oh, but don't forget to keep visiting this site too! :)
 
 

Category: Language Update Freq: ~25x per week URL: click here | RSS: here   The BBC Magazine Monitor blog has features such as Web Monitor, Paper Monitor, daily letters and a quote of the day.		Category: Comedy Update Freq: ~5x per week URL: click here | RSS: here   Emails from Crazy People is a pretty self-explanatory blog, and a very funny one at that.		Category: Comedy Update Freq: ~30x per week URL: click here | RSS: here   Failblog posts pictures and videos of people failing, and has a unique user community, often more baffling than the content!
Category: Image Design Update Freq: ~1x per week URL: click here | RSS: here   Tutorial9 is a website that provides really good quality Photoshop tutorials, with free PSDs available to download.		Category: Maps, History Update Freq: ~1x per week URL: click here | RSS: here   Strange Maps does what it says on the tin, but has suprisingly thought-provoking posts with some really interesting maps.		Category: Image Design Update Freq: ~7x per week URL: click here | RSS: here   Photoshop Disasters highlights awful image editing in the world of visual media, naming and shaming culprits!
Category: Video Update Freq: ~15x per week URL: click here | RSS: here   The Best of Youtube posts a wide-range of videos, most of which are certainly worth a watch - a good 'youtube guide'.		Category: Video Update Freq: ~1x per week URL: click here | RSS: N/A   Another 'best of youtube' site, canada.com posts the most talked-about videos of each week.		Category: Video, Sport Update Freq: ~1x per week URL: click here | RSS: here   The Guardian Youtube Sport Archive posts a group of videos based on that week's sporting events.

 

Whenever I install a new OS (thanks to XP, it's been a while), I always install a few applications / modifications to make everything run more smoothly and look a bit better. So this post is really just a list of 7 simple changes you can make to your (XP) computer / Firefox browser to bring it up-to-date and add some useful features:


1. Get the Image Resizer PowerToy
This is really simple, but also really useful - A tool that lets you right-click on any image and resize it, making a copy or changing the original. You can also select multiple images and change them all at once. It's perfect for quickly reducing image size to email, or resizing a batch of photos from a digital camera to upload to a photo-sharing website, for example - for every fresh OS install, this gets put back straight away. Clicking the 'more info' link below will take you to a page with all the PowerToys on - another I find useful is the RAW Image Viewer (link), but this is only likely to be useful for D-SLR users.


Image Resizer in action © Microsoft (2002)

More Info: Microsoft XP PowerToys
File Link: Download Image Resizer PowerToy



2. PowerOff Auto-Shutdown Software
I'm sure I'm not the only one who occasionally falls asleep with my computer on (mostly as it acts as my TV) so installing this simple piece of software can save you electricity and therefore money! I tend to just install it and set it to auto-shutdown at 3am every day, just in case - if you're still up, it warns you and you can cancel the action, so you've nothing to lose really. I wouldn't recommend leaving unsaved files open, but then that's never a good idea anyway :)

More Info: PowerOff Auto-Shutdown Software
File Link: Download PowerOff



3. Foxdie Graphite Firefox Theme
After trying out a considerable amount of Firefox themes, I came to the conclusion that all of them are rubbish and sticking to the default is the way to go. Then I was using a friends Mac and liked the brushed metal effect that the Mac Firefox has, so thought I'd see if anyone has replicated it for Windows. Well, they haven't exactly, but it did lead me to a theme that is similar and usable too - It's now my default theme. So, if you're going to try any Firefox theme, try this one! NB This theme works with Firefox 3.0, but no later (beta) versions as yet.


Foxdie vs Default Firefox Theme - with Web Developer Toolbar on display too   © Firefox (2009)

More Info: Foxdie Graphite Firefox Theme
File Link: Install Foxdie Graphite to Firefox



4. Image Tweak Firefox Add-on
When you look at image files using a web browser, the default white background of the browser and the fact that pixels set to invisible are shown as white means that you can't tell if you have a picture with any invisible sections or not. Say you wanted a PNG / GIF of the Firefox logo, so you could drop it into some design work without having to clip round it first. You might do an image search for 'Firefox logo png' but you can't tell if any of them are cropped or have white backgrounds. That's where ImageTweak comes in as it puts a dark grey background behind all image files when viewed directly (therefore not affecting images within webpages). Now it's simple to see if you have a PNG/GIF with invisible sections or not:


ImageTweak in action, displaying a PNG   © ImageTweak, Firefox (2009)

NB This add-on now also has some extra features, enabling image zoom and scrolling.

More Info: ImageTweak Add-On for Firefox
File Link: Install ImageTweak to Firefox



5. Web Developer ToolBar
For anyone who develops websites, or even anyone who wants to find out more info about a webpage, this tool really is a must. It's been a staple of Firefox for many years and it remains the best way to get underneath pages you are viewing as well as offering a huge variety of tools to help test, develop and debug websites and web apps. There are similar add-ons out there that may do individual tasks, but this really has them all. Once installed, it can easily be turned off and on (right click on top-menu and de-select), meaning you can query pages when you like.

More Info: Web Devloper Add-On for Firefox
File Link: Install Web Developer to Firefox



6. Spaz & Abode AIR
Adobe Air is a nice runtime environment that combines the worlds of web and software development by allowing you to build desktop software apps using HTML, CSS, Flash, AJAX and JavaScript. These "apps" are a huge growth market and products like the iPhone have shown how popular they can be, when you can download them to a hardware device, rather than just locate them online.


Spaz & Adobe AIR   © Spaz, Adobe (2009)

So I thought I'd explore some of the programs currently built on Adobe AIR and found something I'd been looking for for ages: A great, customisable desktop twitter app, called Spaz (not a UK name!). You simply get it installed (after installing AIR) and then log in and everything's pretty self-explanatory. It sits on your desktop (can be minimised to the system tray) and gently alerts you of any updates on your twitter account, whilst letting you easily reply, forward and send messages. Before Spaz, my twitter usage was minimal and I was struggling to see the point of it, but now it makes much more sense!

More Info (Adobe AIR): Abobe AIR
Download Link (Adobe AIR): Download Adobe AIR

More Info (Spaz): Spaz Twitter Application
File Link (Spaz): Download Spaz



7. Textpad
Textpad is a simple text editor, with none of the whiz-bang of word, but has most of its useful functions and plenty additional ones. This isn't a program to make fancy documents on, but more for simple text editing and coding.

If you do any programming whatsoever, Textpad is a god-send. Even if you don't, I regularly use it just to open documents in their simplest form and if they are text-based, it always seems to display them as they were intended.

One of its best features is the macro creation tool, whereby tasks can be recorded and replayed across a large file. Equally, regular expressions are accepted so complicated editing tasks can be performed automatically.

More Info: Textpad Text Editor
File Link: Download Textpad
 

The code below shows how you can redirect users of Internet Explorer to a different page when they enter your site. Two key points (and pros and cons) to bear in mind:

1. This is a JavaScript solution
2. It works irrespective of your page content (meta-refresh is more buggy in this respect)

If you research this problem, you'll find a lot of forum responses saying 'you don't want to do that' (which REALLY annoys me...they wouldn't ask if they didn't want to!) and a lot of suggestions that simply don't work or are too buggy. And of course you'll also get lots of people suggesting the standard meta-refresh technique.

My problem was as follows: When you load this blog via the blog homepage, it runs a perl script to pull the content out of my database and passes a few variables along the way, making the URL look a bit messy. So a year or so ago I decided to but the blog in a 100% iframe and load it from there. This works fine in Firefox and everything works as normal, but in IE, it won't show anything on the page until the iframe is fully loaded - meaning loading times can be up to a minute.


Diagram showing the redirect system for this blog

This is obviously a major issue, so to get round it, I decided it was best to send IE users to the perl script directly, but leave others with the slightly nicer iframe system. Any permalink / individual story will use its proper url and all page titles are migrated back to the source frame, meaning the system is relatively problem-free on non-IE browsers.

So, here's my foolproof* way of redirecting IE users only - just bung this code within your tag and you're in business:

 <script type="text/javascript">
  if(navigator.userAgent.indexOf('MSIE') > -1){
  window.location = "REDIRECT_URL_HERE"}
 </script>
 

*I haven't tested it fully, but everything I've thrown at it works fine.

Oh and one more thing - in the second sentence of this post I used the phrase "bear in mind", which I rarely do. I usually refrain from writing it as I can never work out whether it is "bear" or "bare" - but I finally looked it up...let's hope I remember the answer!

That's An Idea: Bear / Bare in Mind
 

It's always worth keeping an eye on the Google Labs website, as that's where you get to find out about any potential new Google services. They might not all be particularly useful, but the latest edition is a service I've been waiting for for ages.

It's called Similar Images and simply allows you to search for images as normal, but when you get the results, you can select an item you like and ask for similar results. This is particularly useful for searches that are skewed by more popular results (e.g. when searching for 'wallpaper' (as in the stuff you paste on your wall), most results will be computer wallpaper images and therefor not quite what you were looking for).


Google Labs - Similar Images

To show it's power, I'll show you an example that I used today for some design work. Often I need to send screenshots of development work to client and like to show what is being clicked on by adding the hand icon used in windows. However, when searching for this 'hand icon', you don't get very useful results:


Standard Image Results For "Hand Icon"

As you can see, not many of the results are what I was after. The fourth one is sort of right, but it's not quite the angle I was looking for. So I can click on the "similar images" link below it to be taken to a new results page:


Similar Image Results For Chosen Image

As you can see, I now have a number of choices that fit the bill and my image search is completed in two steps.

I'll be even more interested in this service if it allows you to import your image to search for similar images, as this would bring image recognition services to the masses - not long now, I imagine (and hope)!

Google Labs Homepage
Google Labs - Similar Images

UPDATE: I've written a more recent post on this topic, see it here: More Similar-Image Search Engines
 

Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.

Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.

So, firstly we need to link to these JavaScript files in the <head> of our HTML document:

 <SCRIPT LANGUAGE=JavaScript SRC="JSFX_FadingRollovers.js"
  TYPE="text/javascript"></SCRIPT>

 <SCRIPT LANGUAGE=JavaScript SRC="showHide.js"
 TYPE="text/javascript"></SCRIPT>
 

Secondly, we need to set up two CSS classes to style the document:

 <style type="text/css">
  .bodylinks {text-decoration: none; color:#333232;
              font-family:Verdana; font-size:13px;}
  .versiondata {padding: 15px;}
 </style>
 

Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).

Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:

 <SCRIPT LANGUAGE="JavaScript"> 
  FadeInStep=10; FadeOutStep=5;
  JSFX.Rollover("img1", "1_over.jpg");
  JSFX.Rollover("img2", "2_over.jpg");
 </script>
 

We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.

Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:

 <tr id="trOne" onClick="FuncShowHideOne()">
 

Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:

 <td background="1.jpg" height="34">
  <a href="#null" onMouseOver="JSFX.fadeIn('img1')"
   onMouseOut="JSFX.fadeOut('img1')">
  <img src="1.jpg" width="400" height="34"
   name="img1" class="imgFader" border="0"/></a>
  </td></tr>
 

Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:

 <tr id="hideShowOne" style="display:none">
  <td class="bodylinks"
  background="version_data.jpg">
  <img src="dark_line.gif" width="400" height="1"/>
  <div class="versiondata">DATA</div></td></tr>
 

So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:



All files for ShowHide system (ZIP)

 

I thought it was about time for a new mini-project so I got to work on an easy-to-use quiz applet. The idea was to set a quiz out on one page, but use JavaScript to bring each question in one at-a-time, rolling in and replacing the previous. The JavaScript / Ajax would carry and process the form data, bringing the result back at the end of the questions.

JQuery handled the form data and a separate JS file was used to animated the text movement. What results should be a nice and easy-to-use quiz, but see for yourself by playing along below:



It can't be too hard when it's multiple choice - see if you can be crowned a quiz expert! I'll hopefully adapt this idea a bit when I have time, would be nice to have a results breakdown at the end (and the answers!) so that would be the next step...
 

The way webpages are shown on company sites has varied over time, from simple screenshots and drop-shadow thumbnails to iTunes-style reflections and increasingly, perspective shots.

The principal is simple - take a screenshot of your webpage and add a reflection, but instead of a face-on view, take a side view in perspective. Some of you may be wondering how best to go about doing this yourselves - and thankfully, it's pretty easy in Photoshop.

Let me start by showing you an example I created, using my Fringe 2008 Site as the template [click to enlarge]:



The effect is a nice one and allows your work to be showcased in a stylish manner. Here's a quick run-down of how it's done:

1. Open up a new document, roughly 2000x2000 and add a background colour.
2. Open the webpage you are showcasing and press 'Print Screen' - open a new document and paste this in.
3. Cut out your webpage from the screen grab using the rectangular marquee - paste it into the first document.
4. Hold CTRL and use your mouse to resize the webpage, keeping both sides straight and the bottom angle bigger than the top (see example).
5. Duplicate this layer and use the same technique as above to make this layer a rough reflection of the first. Reduce the height of the layer of a bit to enhance the reflection effect.
6. Set your foreground colour the same as your original background and set the gradient tool as foreground / invisible.
7. Finally, use the gradient tool to fade out the end of the reflected image until you get a good fade-out - again, check the example for reference.

I hope that makes some sense - Good luck in creating your own :)
 

The BBC have put together a nice looking site for Liverpool's year as European Capital of Culture. It's a nice design and fits well with the multimedia nature of the site. In fact, it also follows closely with the modern end of my evolution of web colours post.



The site is currently showcasing La Machine, an unusual robotic spider that seems to host a DJ and a fair amount of foam! Still, it resulted in some intersting photos and some big crowds by the looks of things!



BBC - Liverpool, Capital of Culture
La Maching Home Page
 

I spotted this service a year or so ago on BBC Backstage but it has recently been revamped and seems to work a bit better now too. All it does is use the BBC Radio Now Playing data feed and displays song information pulled from a variety of other sources.

I'm not sure how useful all these resources are but I find the service is great for finding out what song is playing on the radio as the BBC seem to hide this information, I've tried googling for it before, but to no avail.



The design of this service isn't great (looks a bit dated in my opinion) but it has a good function - and uses Ajax to update the page when a new song starts playing so it can be a good visual accompaniment to the radio.

TrackPlaying: BBC Radio Now Playing Service
 

I was recently undertaking a project for a homepage that would draw in data from a Facebook status RSS feed and display each update as a story on the page. In theory, this job isn't too hard - but it involves using a GET request (in this case using LWP:Simple in Perl) and not all sites / feeds allow a computer access to the file (just a browser).

This seemed to be the case with the Facebook feed so I looked for a solution. I ended up getting it working using a Yahoo Pipe, that first took the feed in and then spat it out in a slightly changed format - this output worked fine using the GET request and the problem was solved.


The resulting stories working on the site.

The Yahoo Pipe was supposed to alter the feed to remove the username etc from each post but this didn't work so I did this manually - the pipe was still very useful though!

How to use your Facebook status RSS feed
Yahoo Pipe: Facebook RSS
 

Now I'm not a huge Bob Dylan fan, but if I were I'm sure his website would make me very happy! Not only does it have a 'random page button', but it also has a very impressive music player.

Click at the top of the page and you get a full menu of all his records, which an be selected and any tracks previewed. They even spin on a nice little Flash record player - and best of all it all runs smoothly:



You can click the pic above to go to his site or click the link below - Music websites often frustrate me but this one definitely gets the thumbs up!

Bob Dylan: Official Site
 

Just thought I'd wrap up a few useful websites I've stumbled upon in the last few weeks - maybe they'll be of use to you too! Most are web design related, but some are a bit more general:

10 CSS tricks you may not know
You may know some, but you probably won't know them all!

Pixelpost: Photo-blogging service
I saw an impressive site (here) that uses this free service

Video Enhancement with photo stills
The demo is impressive - worth a try!

Orange Tape Studios: Web Design
I liked the clean design of this site

Taking page title from nested (i)frame
The second post shows how to import titles from (i)frames

Advanced Google search operators
A list of all the ways you can search Google

Wiki: The world's most southern
A list of all the most southerly things in the world!
 

The lack of support for invisibility in PNG files across web browsers is a constant irritation for web designers. It's amazing that a proper solution still hasn't been sorted, with browsers hopping in and out of support for this function.

It seems simple enough...you want to create high quality graphics for a website that can be any shape yet blend in with any background. Curved tables, free-standing text, any shape that isn't a rectangle...there's a lot of scope for this function to be useful. And then, once created, the graphics for a website would be independent of any stylistic changes to the background. A bit like the situation we currently have with GIFs, but allowing good quality graphics.

So - after a lot of searching - I've come across what I think is the best solution to this problem. Of course, modern web browsers should display (or not display!) invisibility in PNGs without an issue, but you don't need to go back far to realise this solution hasn't been in existence long.

So, to solve the problem, I found a solution involving a link to an HTC file and then setting div tags for a background png image and bunging it in a table. I'll explain this below, but first I'll show you the problem. Below is the same image shown twice, on top without any HTC file and below with the link set up. If both images show invisibility, then you're using an up-to-date browser, but try opening this page in another piece of software and you may well see why this problem is so frustrating!





So - how is this fix applied? First, you need to get your hands on the HTC file (right click and Save As).

Then put the following lines of code in the <head> of your document, changing the code to represent your png file(s). For multiple files, just repeat with a new class name:

 <style type="text/css">
  div.classname { background-image: url(image.png) }
  img,div { behavior: url(iepngfix.htc) }
 </style>

Now, it's just a case of wrapping a table (with the dimensions of your image) with your div class, like so:

 <div class="classname">
  <table width="" height=" cellpadding="0" 
   cellspacing="0" border="0"><tr><td></td></tr>
  </table>
 </div>

And there we have it - perfectly displaying PNG files with invisibility across all browsers.
 

When designing a new site, I like to keep an eye on the latest designs to make sure the colour scheme I use is fresh and looks good. I have nothing against using whatever colour scheme you fancy and great sites can be made this way - but I do notice myself favouring sites that look good. Only if I find a site with an incomparable service will I accept it with really poor design.

I think it's fair to say that colour schemes have varied since the internet started up. One of the most obvious areas to see this change is the hyperlink - it started its life as a (unstylised) royal blue and with the advent of CSS, this blue was often toned down and eventually done away with completely.

So I thought it would be fun to have a look at the colour schemes of major websites throughout time and create a chart of colours, with the most up-to-date colour scheme coming at the end. In fact, my most recent project (Fringe 2008 venue Map) was based on the colours shown at the end of the colour chart below.



The colours have been gathered from a host of well-known websites using links to their old versions. This was made possible by the Internet Archive - Wayback Machine, a list of cached web pages spanning over 10 years of the web's history.

The general trend is from royal / bright colours to murky / pastel colours and now onto bright, funky colours - avoiding royals. An interesting exercise, maybe it will be of use some day! :)
 

In order to highlight hyperlinks within blog posts and to distinguish them from other links on the blog (tags, topics, blog title etc), I've made inline links blink with an animated dotted line below them.

There are two parts to this method. You need to set up the CSS for the blinking links and distinguish these links from all other links on the page (especially important when using general a:link type CSS).

So, firstly you may well have set up a CSS class that covers the text where the links will be (in this case, all hyperlinks within a blog post message). In this example, we're calling the class 'blinks':

 .blinks {font-family: Tahoma; color: #DDDDDD; 
          font-size: 12px;}

A complication will come if you are using general hyperlink style code within your CSS, such as this:

 a:link {text-decoration:none; color:#B99D73}
 a:visited {text-decoration:none; color:#abb7ba}
 a:hover {text-decoration:underline; font-weight:bold;}
 a:active {text-decoration:underline; font-weight:bold;}

In order to override the general hyperlink styles, you have to set up hyperlink styles specific to your class. This is also where you add the code to make the links blink. To do this, I'm using a tiny animated GIF and setting its location underneath the link text:

 .blinks a:link {
     font-family: Tahoma; 
     color: #DDDDDD; 
     background: url(Images/line.gif) repeat-x bottom left;
  }

Feel free to use this image / code on your own website - it's good to share!

Download the flashing line image

All you need to make sure now is that the links you want to blink are within the class you have defined it in. This class may cover all the text of the message, or just the link itself, as in the following example:

 <span class="blinks">
 <a href="../blog/Images/line.gif">link text</a>
 </span>

Enjoy!
 

The BBC seems to be rather busy at the moment, launching various beta releases of new concepts, often with little talk of their development previous to launch.

First up - and most revolutionary - is the BBC Sound Index, which trawls through a number of online music services and stores various data to help see "what's hot" right now, giving a list of top 1000 songs and artists. Although not much of this project code / data has been released to the public, it is still an interesting development and one which is well worth watching - lots of potential here.



It's all part of getting towards 'Web 3.0 / The Semantic Web', which is seen as the next big thing for the internet as a service. For more information on this, check out: The Semantic Web.


Next up is a new Climate Change service called BBC Bloom. This is a nice interactive application showing practical ways to help individuals combat climate change. It has an element of user control and you can log in to save your 'climate task list'. It's another great looking flash application from the BBC and really does make this subject more engaging.



I'd be interested int ehir budget for such projects, but these days having 'climate change' in your project name always helps bring in more funding :p. However, the BBC has obviously upped its budget for new web services, possibly on the back of the success of iPlayer - watch this space for more interesting applications soon!
 

If you create a basic HTML page, then you will find the automatic margins are places around the contents of the document body.

If you start a table or image from the first line of HTML code, there will be a small gap displayed between this image and the top of the page as margins are automatically added by most browsers.

However, if you look at the top of this webpage, you will see that the graphics start from the very first line of the page. This is evident where the strings holding up the trumpet meet the top of the page.

This applies to the left, right and bottom margins as well, although this is less obvious here. The code is really simple to get rid of margins in all main browsers - simply copy and paste this code into the <head> section of your document.

 <style type="text/css">
   v:* {behavior:url(#default#VML);}
   html, body {width: 100%; height: 100%}
   body {margin-top: 0px; margin-right: 0px;
         margin-left: 0px; margin-bottom: 0px}
 </style>
 

 

This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script).

The script then fades between these images using a dark colour fader:



You can download the image rollover script here.

Either save this and link to it on your ftp server, or replace SOURCE with
http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js

The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:

 <script language=JavaScript SRC="SOURCE" type="text/
  javascript">
 </script>
  <script language="JavaScript">
   FadeInStep=10;
   FadeOutStep=5;
   JSFX.Rollover("NAME", "IMAGE_OVER");
  </script>
 

Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image.

The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary.

Make sure the 'NAME' is the same as for the rollover image set up earlier:

 <table cellspacing="0" cellpadding="0" border="0">
  <tr>
   <td background="Images/IMAGE">
    <A HREF="TARGET" target="_bottom"         
     onMouseOver="JSFX.fadeIn('NAME')" 
     onMouseOut="JSFX.fadeOut('NAME')">
    <img name="NAME" class="imgFader"
      src="IMAGE" height="HEIGHT" 
      width="WIDTH" border="0">
    </A>
   </td>
  </tr>
 </table>

That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above.