CSS/Javascript Image Captioning Tool

When I began this blog, I started talking about captioning primarily because I wanted to teach CSS concepts like positioning, opacity, and selectors using a practical example. Then, people started emailing me so what started as a simple CSS captioning exercise, turned into a more involved CSS/Javascript tool. We had fixes, and Javascript primers along the way and finally I decided to create a site tool that automates the entire process.

Under tools menu in the upper right corner, you will find the new image captioning tool. The tool comes with a default image and default values so if you click on the Preview and scroll down to the very bottom, you can see a sample image with captioning. You can choose to round the corners of your image, center it, specify opacity level, text color and transparency color. For colors, you can either enter a known color keyword or a hex code. I am going to update it later with a color picker.

Enjoy. :)