stormdamage.org - Art, Webdesign and CSS.

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…)

Here’s something useful – repository of logins and passwords for many different sites: www.bugmenot.com

It’s very handy for sites such as Stock Xchng (royalty free stock photos), Youtube, or the New York Times. Or really any site which tries to glean personal information for no real reason.

They also have a ‘disposable email’ feature for creating temporary email address. This enables you to sign up to sites you know will send you spam, without divulging your personal email address.

This is something I get asked about from time to time. The aim is to have some text which is there in the code, but is hidden when viewing the page.

You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a <h1> title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.

The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content. (more…)