stormdamage.org - Art, Webdesign and CSS.

You may remember a previous post of mine, where I explained a method of using only CSS to create tooltips. Well here are two creative uses for that technique. Firstly - this map of the capital cities in the UK and Ireland. The locations are revealed when you hover your mouse over them:

This is done by creating a <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to. (more…)

Here’s a nifty trick to make the content of any website editable - simply copy and paste this line of Javascript into your browser window, then play around with the content to your heart’s content:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Of course it doesn’t alter their code in anyway, it just changes the way you see it in your browser. There isn’t much of legitimate use for this, but it’s an interesting Javascript curiosity nonetheless.

(Shamelessly stolen from Blogstorm.)

Eyedropper is a useful little program which I couldn’t be without. It will tell you the hex, RGB or CMYK of any colour on screen if you hover your cursor over it, and so is invaluable for web development. Many people use Colorzilla for this, which is a Firefox plugin. However, the advantage of Eyedropper is that it works anywhere on screen, not just inside the browser window.

In addition, it also gives you the x and y mouse coordinates, which is very useful for checking that things line up properly. The program is very small and unobtrusive, it sits in the systray until you double-click the icon to pick it up. Then it will follow your cursor around, until you double-click its icon in the systray again to put it back. (more…)

Here are some free vector florals, made by me, in .eps format. For use in all your personal, non-commercial projects. An easy way to add a touch of elegant sumptuousness!

Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link This is a tooltip. with your mouse.

To do this, you will need to create a class for the links which require tooltips, and a <span> within that link to include the tooltip text:

<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling: (more…)