Archive for the ‘CSS’

Having worked with many fastidious web designers in the past requesting that every single integrated page looks precisely to the pixel like the PSD file — you know who you are — I developped this little JavaScript technique that allows the integrator to enable/disable a 80% alpha JPEG image overlay, in order to visually find the discrepancies. The code is very ugly but cross-browser compatible, and I never felt compelled to make it better as it does perfectly what it has to do.

It’s quite easy to use: simply load the JavaScript file at the end of your HTML file, and have it point on your JPEG image to an default X/Y position.

<script language="javascript" type="text/javascript" src="watermarker.js"></script>
<script language="javascript" type="text/javascript">
setWatermark("images/mywatermark.jpg",-4,-5);
</script>

And voila, you can toggle your JPEG overlay, move it around, change it’s alpha transparency and reset it to its default position.

A small demo is available here.

PHP Source watermarker.js (7.8k)

category CSS, HTML Tuesday 13 January 2009 Comment (0)

AccessibilityA friend of mine was twittering about accessibility, which gave me the idea to write on how to do no-javascript friendly stylish controls such as check boxes, buttons, and radio buttons.

Because graphic designers care more about the look and site designers care more about accessibility and usability, it’s often the developers’ role to satisfy them both. So here are the tricks I use to make stylish controls look cool when JavaScript is activated, and usable when it is not.

Being mainly a PHP backend programmer, I hate to see the design cripple the code. Therefore, I always make sure that stylish and standard controls end up sending the same data to the server.

In this post, I cover buttons, check boxes and radio buttons, and provide a simple PHP helper that automatically generates the code. You might also want to check out the demo page to have an idea of what it looks like.

More …

category CSS, HTML, Programming Friday 29 February 2008 Comment (1)

CSSIn case you didn’t stumble on this pretty neat list of CSS techniques, tips and tricks from Smashing Magazine, well here it is.

Here are a few good ones:

Enjoy!

category CSS, HTML, Web development Friday 22 February 2008 Comment (0)