Latest News

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects.

Before we begin, feel free to grab the source code in the repo.

View Repo

Create the initial element

First, let’s create an HTML element to build on. I’m using a simple styled button, but it …

The post Adding Particle Effects to DOM Elements with Canvas appeared first on CSS-Tricks.

Several years ago, there was a big push by designers to increase the font-size of websites and I feel like we’re living in another era of accessibility improvements where a fresh batch of designers are pushing for even larger text sizing today. Take this post by Christian Miller, for example, where he writes:

The majority of websites are still anywhere in the range of 15–18px. We’re starting to see some sites adopt larger body text at around 20px or even …

The post Your Body Text is Too Small appeared first on CSS-Tricks.

This is a wondrous little project by Wenting Zhang that showcases a series of variable fonts and lets you manipulate their settings to see the results. It’s interesting that there’s so many tools like this that have been released over the past couple of months, such as v-fonts, Axis-Praxis and Wakamai Fondue just to name a few.

Direct Link to Article — Permalink…

The post Font Playground appeared first on CSS-Tricks.

I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that’s a common use case. Just check out many of the interactive demos over at Axis-Praxis:

or

Make sure to go play around at v-fonts.com as well for loads of variable font demonstrations.

But things like boldness, width, and slantyness and just a few…

The post Weird things variable fonts can do appeared first on CSS-Tricks.