I recently discovered the joy of creating CSS-only games. It’s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol’ Checkbox Hack where we combine the checked/unchecked state of a HTML input with the :checked pseudo-class in CSS. We can do a lot of magic with that one combination! In fact, I challenged myself to build an entire game without Checkbox. I wasn’t sure if it ..

• 0 Comment

Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed… requestSubmit() Safari 16 will be the final browser to add support for requestSubmit. Before we look at how .requestSubmit() works, let’s remind ourselves how programmatically submitting a form with JavaScript works when using the .submit() method. Submitting a form with submit() does not trigger a submit event. ..

• 0 Comment

As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare data, say, year-over-year. They are also useful for things like tracking progress for a goal where one bar represents the goal and the other shows the current amount. But they’re beautiful too! Your mind is probably like mine and is already starting to figure out how you’d go off and code that. Here’s how ..

• 0 Comment

CSS-only Wolfenstein is a little project that I made a few weeks ago. It was an experiment with CSS 3D transformations and animations. Inspired by the FPS demo and another Wolfenstein CodePen, I decided to build my own version. It is loosely based on Episode 1 – Floor 9 of the original Wolfenstein 3D game. CodePen Embed Fallback Editor: This game intentionally requires some quick reaction to avoid a Game Over screen. Here is a playthrough video: In ..

• 0 Comment

I started as a front-end web developer and then became a Flutter developer. I think there were some concepts that helped me adopt Flutter easier. There were also some new concepts that were different. In this article, I want to share my experience and inspire anyone feeling paralyzed with choosing one ecosystem over the other by showing how concepts transfer over and any new concepts are learnable. Concepts That Transferred Over This section shows places where fron..

• 0 Comment

Those of you who have been reading CSS-Tricks for a while may remember that we used to publish a little thing we called CSS-Tricks Chronicles. Our friend Chris Coyier would write up a reflection from the past couple of months or so, and it was a great way to get a pulse on what’s happening around CSS-Tricks, the site, and what the team is doing. We like that and want to keep it going. It’s a new era, though! So what we’re going to do is welcome you back to what we’..

• 0 Comment

A screen reader is an important accessibility tool for people with no or limited vision. People who are blind or those with low vision can use a screen reader to navigate the computer. Screen readers will read contents on the screen and explain to the user what is on the page. Screen readers allow people to use the computer for daily tasks. There are many screen reader software available for people through their operating system or through open source projects. A 2021 r..

• 0 Comment

Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns. And, if you missed it, his latest post on container queries does a wonderful job covering how they work since landing in Chrome 105 this month (we’ll see them in Safari 16 soon). Some choice highlights and takeaways: Containers are defined with the container-type property. Previous demos and proposals had been using contain instead.Containe..

• 0 Comment

We can make variables in CSS pretty easily: :root { --scale: 1; } And we can declare them on any element: .thing { transform: scale(--scale); } Even better for an example like this is applying the variable on a user interaction, say :hover: :root { --scale: 1; } .thing { height: 100px; transform: scale(--scale); width: 100px; } .thing:hover { --scale: 3; } CodePen Embed Fallback But if we wanted to use that variable in an animation… nada..

• 0 Comment

Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). Positioning items with line numbers is a fine way to lay things out, though CSS Grid has numerous ways to accomplish the same with an undersized cognitive encumbrance. One of those ways is something I like to think of as t..

• 0 Comment