4 Ways to Create Richer Web Experiences
I’d like to talk about where the Web is headed in this article; many of the features I’ll cover may have limited support, so it is important to use resources like caniuse.com which has a robust list of features and charts specifying where they are supported.
Let’s take a dive into the four ways you can enhance your site:
1. CSS:
CSS is the styling language for our documents; we tend to think of this in simple terms like changing font size or colour, but it is becoming increasingly powerful with features like transforms and animations. We’re also getting new features to make it even more powerful.
Like Vector Masks tools in Photoshop, CSS Clip Paths allows you to define a shape in the transparent and opaque parts of your HTML content. These work great with CSS Transitions for hiding and revealing UI elements. Similarly, CSS Masks are making their way to the Web, which allows you to define the transparent parts of your content using an image. This allows you to use transparency more effectively in your designs for visual interest or textures.
2. SVG:
SVG is the vector format for the Web. We can use it to display graphics and even manipulate and animate its properties with CSS. Where SVG gets really powerful is when we combine it with scripting. Snap is a JavaScript library that makes it easy to manipulate and animate SVG content. It’s focused on modern browsers, so it supports the newest SVG features like groups and clip paths.
3. 2D Canvas:
2D Canvas is another powerful feature of the Web optimized for drawing shapes and images. It provides a JavaScript API that gives you granular control over your canvas element. It also gives you the freedom to integrate other forms of media, such as video, creating the potential for rich interactive buttons that play, pause or scrub video footage. 2D Canvas now supports blend modes, which allow you to mix the colours of layers in visually interesting ways.
4. Web GL:
WebGL provides a low-level API for drawing hardware-accelerated 2D and 3D graphics. The potential here is console-style games, like Grand Theft Auto 5 running right inside your browser. As you can imagine WebGL gets somewhat complicated, fortunately, open-source libraries like Three.js provide a great entry point with great examples to get you started.
As we all know, the Web is becoming increasingly diverse and powerful, it’s an exciting time to be a Web developer. The variety of technologies and resources we have access to are constantly growing, and it’s fun to see the rich experiences people are creating with them.
