Articles on Css

Top deep-dives on Css

Menu Reveal By Page Rotate Animation

As a web dev, it pains me when I see the same thing website after website. The amount of tricks and interactivity available to designers, when it comes to web development, has exploded in recent years, and I love seeing novel ways of doing the same thing. In this article, Preethi shows us how she was able to bring some fun to the normally mundane menu nav bar with a neat little CSS trick and a "sprinkle" of JavaScript.

How CSS Perspective Works

Ending on an unrelated to hardware note, with some plain ol' CSS tricks. Ever wonder how you can achieve that flip page effect on a website? No? Your loss. Amit Sheen's article is all about perspective in CSS. Amit gives a number of examples on how perspective can be combined with transform and translate to accomplish a variety of effects, like moving a square from side to side while flipping it around. It's some web-dev wild magic.

Stop Using Icon Fonts

If you're going to use icon fonts, you're gunna have a bad time mmmkay? Because as Michael Irigoyen highlights in this article, they lead to flashes of unstyled content, are horrible for accessibility, they're not very maintainable, and visually they're like to be degraded. Use SVG instead like Michael suggests!

Let’s Create a Custom Audio Player

A really thorough article, with code, questions, and suggestions by Idorenyin Udoh on how to make a custom audio player in the browser. Really wish I had this a couple of months ago when I did my own heh.

Don't try this at home: CSS _as_ the backend - introducing Cascading Server Sheets!

Pascal Thormeier presents a basic back end for a website written in CSS.

Can you get pwned with CSS?

Scott Helme demonstrates two methods that one could exfiltrate data from a website using CSS.

TailwindCSS Tips

Matthew Weier O'Phinney presents a quick introduction to TailwindCSS, then covers some of the pros and cons, giving a good overview of what the library ethos is.

Faulty Logic

CSS has undergone huge changes in the past couple of years, with the introduction of attributes like flexbox and grid. Unfortunately, we're still in the transition period where not all of the parts of CSS support the same syntax that is used by these new features. In this very concise article, Jeremy Keith reviews some of the areas that still don't support logical properties and require directional ones instead.

Single Element Loaders: Going 3D!

Temani Afif shows off some 3D effects with CSS sorcery.

Logical layout enhancements with flow-relative shorthands

Although globalization is a great thing, software is still mostly playing catch up when it comes to having easily implementable solutions for handling different locales. And for good reason. Languages, dates, and times can all come in different formats. Adam Argyle and Oriol Brufau have written an extensive article about CSS features that handle document flow for you, based on user locale. Write simple code to handle laying out the webpage for you regardless of if the language is read left to right, right to left, or up to down!

A guide to designing accessible, WCAG-compliant focus indicators

In the past couple of years, there have been major pushes for websites to be come more accessible. If you're not familiar with the space, just know that there are A LOT of different parts that go into making a website accessible, including alt text for pictures, focus, and tag structures. This extensive article by Sara Soueidan focuses specifically on the focus indicator, explainin what it is, browser defaults and the new accessibility requirements in WCAG 2.2.

css vs webgl cubes

Ted Unangst compares rendering 3D spaces in CSS and WebGL.

Accessible Web Animation: The WCAG on Animation Explained

The internet is probably one of the best inventions of the 20th century. Connecting people across the world, with different perspectives, views, and knowledge makes the world a better place more-so than being a detriment. However it's also important to keep in mind that not everyone uses the internet, and our windows into it, websites, in the same way. In this informative article, Val Head goes through the specifications for the Web Content Accessibility Guidelines and explains them in practical terms.

Using :has() as a CSS Parent Selector and much more

Jen Simmons presents the (relatively) newly added :has() selector in CSS and how you can use it to conditionally apply layouts.

OKLCH in CSS: why we moved from RGB and HSL

Andrey Sitnik and Travis Turner dive into the new CSS Color 4 specification and the new OKLCH color space, and compare them to existing systems.
Some highlights:

• oklch(L C H / a): L is perceived lightness, C is chroma, H is the hue angle, a is opacity
• The new color space is human readable and encodes lightness better than HSL
• As of October 2022, only Safari supports oklch()

Cache the directionality of the HTML element

"All HTML elements have their own directionality". This directionality dictates the direction in which text goes (left to right or right to left), which is useful for different languages. In this concise article, Miyoung Shin outlines how element direction caching was achieved in Chromium.