HTML5 / jQuery Slideshow

Ben Lister — Fri, 13 Aug 2010 02:11:00 +0000

A few weeks ago, I wrote a jQuery slideshow app for a personal project. The slideshow ended up being more useful than I originally expected and I realized that it could be re-used in a many different applications with a little more work. Several days later, A List Apart launched “10K Apart: A contest to inspire the web in under 10k.” When I first read about the contest my slideshow app came to mind so I decided to look into ways to make it work for the concept.

Originally, the content of the slides were entered manually to the HTML file but with the help of HTML5’s very handy localStorage and contentEditable features, I added the ability to create the slide content within the browser, saving it as it’s typed. Most conventional desktop slideshows rely on the mouse to add content and navigate which is slow and often frustrating. To avoid this pitfall and improve the work flow, I added simple keyboard commands to easily navigate (up and down arrows) and add / remove slides (ctrl+A / ctrl+D).

I plan to release the full source of this project and do a code walk through soon but in the meantime, you can view and vote for the project on the 10K Apart website:

View the Project

Features

→: Fully editable slides
→: Ability to quickly and easily Add / Remove slides
→: Persistent content (saved “on the fly” with localStorage)
→: Arrow key navigation
→: Two themes
→: Light weight (under 10k not including jQuery)

Technologies used

→: localStorage
→: contentEditable
→: CSS3 Radial Gradients
→: RGBa
→: Border Radius
→: Box Shadow
→: Text shadow

View the Project

Practical CSS3 for Web Designers

Ben Lister — Sun, 25 Apr 2010 21:31:11 +0000

Designers have been using basic CSS3 techniques to enhance their designs for several years now, but cross-browser incompatibilities and lack of practical examples have slowed its progression in the mainstream design world. In this tutorial, I explore and demonstrate some of the more practical aspects of CSS3 and provide realistic examples, resources, advise and a compatibility guide.

The demo page showcases a number of CSS3 techniques including:

Gradients (Radial and Linear)
“Rounded” Border Images
Border Radius
Drop Shadows (Box and Text)
Transforms
Keyframe Animations
Transitions
Image Masking
:target Pseudo Selector
Multiple Backgrounds
CSS Columns

Examples in the demo include:

Image gallery with randomized CSS transitions (supplemented with jQuery)
Image-less 3D Bar Chart
Pure HTML / CSS Accordion links
Navigation with CSS animated hover effects
jQuery powered “View Mode” with CSS3 visual enhancements

After exploring the demo use the “CSS View Mode” feature to see example code, my comments and suggested resources / examples for each example.

The demo:

View Demo Download Source

Final thoughts

Although the upcoming FireFox 3.7/ 4.0 is said to include support for CSS transitions, you will need to use a Webkit browser for now to see some of the advanced examples. I recommend updating to the latest version for full support. I designed this demo for Webkit, Firefox 3.6+ and Opera 10.5.3 and have intentionally used browser vendor prefixes accordingly. There are, of course, other browsers which offer (limited) support of CSS3 properties but this demo is geared towards mainstream browsers (that is my way of saying don’t use IE on this demo).

UPDATE 5/28/10: Added Opera support to demo page, see my comment from 5/28 below.

Dark Crimson Blog » CSS3