Mark Shufflebottom

Mark Shufflebottom

Professor of Interaction Design at Sheridan College of Advanced Learning

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.

Latest articles by Mark Shufflebottom

Build prototypes with Adobe XD
Build prototypes with Adobe XD

By Mark Shufflebottom Published

Create auto-animated apps complete with voice control.

Graphic Design Software
Build a voice controlled UI
Build a voice controlled UI

By Mark Shufflebottom Published

Convert speech to text for easy input into forms.

UX & UI
null
How to design with CSS shapes: An introduction

By Mark Shufflebottom Published

Go beyond the rectangle and create cool effects with CSS shapes.

CSS
Add SVG filters with CSS
Add SVG filters with CSS

By Mark Shufflebottom Published

A guide to adding special effects to text and images on your site using CSS and SVG filters.

Web Design
Liquid effect Creative Bloq logo
How to create liquid effects with WebGL

By Mark Shufflebottom Published

Use three.js to make a low-polygon background header.

Javascript
null
How to create glitch text and image effects in CSS

By Mark Shufflebottom Published

Create a distressed glitch text effect using CSS keyframes.

CSS
null
Get started with variable fonts in CSS

By Mark Shufflebottom Published

Learn how to load one font and manipulate it through CSS.

CSS
null
How to build an AR app

By Mark Shufflebottom Published

A step-by-step guide to creating a multi-marker augmented reality application using AR.js.

Web Design
AR build your own app
5 top AR tools to try today

By Mark Shufflebottom Published

We explore the best tools for dabbling in augmented reality on the web.

Web Design
Animate titles with CSS
Animate and switch titles with CSS

By Mark Shufflebottom Published

Use the power of JavaScript and CSS to create a fade in/out effect.

CSS
A screenshot from Patrick Heng's website including moving typography
Create a wobbly text effect with JavaScript

By Mark Shufflebottom Published

Learn how to add impressive multi-layered text effects.

Web Design
Create ripple effects
Create ripple effects with PixiJS

By Mark Shufflebottom Published

How to add special effects to pages and transitions with JavaScript.

Javascript
null
Add a glitch effect to your website

By Mark Shufflebottom Published

Give your site visual punch with an easy animated glitch effect.

Web Design
null
How to melt a 3D object with three.js

By Mark Shufflebottom Published

Create an eye-catching effect to make objects melt.

Web Design
null
8 3D web projects to inspire you

By Mark Shufflebottom Published

A must-see collection of 3D demos that are guaranteed to impress.

3D Art
null
Create interactive 3D visuals with three.js

By Mark Shufflebottom Published

Create an interactive input slider for a 3D WebGL visualisation.

Javascript
How to code an augmented reality marker

By Mark Shufflebottom Published

Explore augmented reality in the browser.

Web Design