I've taken a lot of stereoscopic photos over the past couple of months and wanted to publish them with a simple mobile web app for smartphones. As the project started to come together, I decided it really needed an introduction and that meant text.

Stereoscopic text made sense since it was going to introduce a series of stereoscopic photos. I found a Photoshop tutorial but it would not work for anything more than a small amount of text. That is when I remembered the intro to Star Wars with the text streaming off into the darkness of space.

I found a sample created by Craig Buckler. That was good enough to get started.

Next I needed to make the single stream a dual stream of text and skew the results for the left and right eye views. The solution was the use of the matrix3d transform in CSS3. The problem was calculating the 16 values. Thankfully I found an example on the duopixel site that provides and interactive interface for the matrix.

Finally, I needed the text to fade away. The ultimate solution was to create a gradient overlay for the entire page.

Here is the final text page (you can right click and see all of the CSS used to make it work). The text page can be viewed with most modern browsers but the stereoscopic effect is easiest to see on a smartphone screen.

I've taken a lot of stereoscopic photos over the past couple of months and wanted to publish them with a simple mobile web app for smartphones. As the project started to come together, I decided it really needed an introduction and that meant text.

Stereoscopic text made sense since it was going to introduce a series of stereoscopic photos. I found a Photoshop tutorial but it would not work for anything more than a small amount of text. That is when I remembered the intro to Star Wars with the text streaming off into the darkness of space.

I found a sample created by Craig Buckler. That was good enough to get started.

Next I needed to make the single stream a dual stream of text and skew the results for the left and right eye views. The solution was the use of the matrix3d transform in CSS3. The problem was calculating the 16 values. Thankfully I found an example on the duopixel site that provides and interactive interface for the matrix.

Finally, I needed the text to fade away. The ultimate solution was to create a gradient overlay for the entire page.

Here is the final text page (you can right click and see all of the CSS used to make it work). The text page can be viewed with most modern browsers but the stereoscopic effect is easiest to see on a smartphone screen.