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:
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.
3. 2D Canvas:
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.