HTML5 Projects: Photo Card Titles

with Joseph Lowery
please wait ...
HTML5 Projects: Photo Card Titles
Video duration: 0s 1h 11m Intermediate


In the previously released HTML5 Projects: Customized Photo Cards, you discovered how to import, rotate, and position graphics submitted to your site onto photo cards. In this course, part two of the project, the focus is on text—adding custom text to the cards with a selectable font, size, color, and position. By project's end, site visitors will be able to add a caption of their choosing (complete with CSS3 3D effects) to their photo card. HTML5 technologies covered include HTML5 form elements with enhanced JavaScript, Canvas, and CSS3 3D transforms.

Check out the rest of the HTML5 Projects series.

Topics include:
  • Setting up a caption submission form
  • Creating basic text entry fields
  • Integrating color pickers in the form
  • Adding the caption to the card with JavaScript
  • Applying text effects like shadows and gradients
Design Web
HTML JavaScript CSS


(bell music) - [Voiceover] Hello, Joe Lowery here. Happy to welcome you to HTML5 Projects Photo Card Titles. In this short project course, I'm going to show you how you can allow your website visitors to add titles to their own photo card mash ups. And not just any titles, but titles that can be interactively resized, repositioned, and recolored with multi-color gradients and complete shadow control. All of this power comes courtesy of the HTML5 tag canvas and its controlling Java Script API.

You can apply the lessons in this course to any project where you want to give your user the ability to add creative text to any image. Okay, that's it. Let's get started with HTML5 Projects Photo Card Titles.

please wait ...