A Non-graphical CSS CAPTCHA
The fact that the borders - top, right, bottom and left - of an HTML element can be styled individually, offers a simple way to generate a programmable 7-segment, claculator-style, display without using any graphics. Combining this capability with the use of CSS Float offers a neat way of creating a CAPTCHA that uses no graphics whatsoever. The procedure is quite simple
- Stack eight HTML Divisions next to one another and float them in their parent container.
- Ensure that a new row is created at the fifth division by setting
clear:rightfor the fourth division. - We now have a four digit 7-segment display! Each digit is made up of two vertically stacked divisions. All four borders of the upper division are used. The lower one, on the other hand, never uses its upper border.
- Generate a random number between 1000 and 9999 and turn off the unrequired segments by setting the corresponding border color to the background color
Presto! You have a programmable 7-segment display suitable for generating a simple CAPTCHA without using any graphics! The technique is demonstrated below. The code used to do this can be downloaded here.
This technique has been presented for demonstration purposes only. A CAPTCHA of this nature is relatively easy to solve programmatically. It can be rendered a great deal more secure but the effort entailed is considerable.
