CategoryCSS

March 21, 2022 — CSS Custom Properties can be used for far more than just color, and their values update in realtime, both via display mode updates and JavaScript logic. This is powerful stuff. Eric explains how modern CSS is a powerful piece of assistive technology that can thread into it to create flexible, maintainable and adaptive digital experiences. Read more…

March 16, 2022 — This fresh new design trend has been picking up steam with the rising popularity of colorful inflated 3D graphics in web illustrations and with the latest Virtual Reality projects like “Horizon Worlds”. Let’s see if there is room for Claymorphism on the UI, and how we can create this effect with CSS. Read more…

March 3, 2022 — Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them. Read more…

March 1, 2022 — 2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a little longer. In this article we’ll take a look at a few of them. Read more…

February 22, 2022 — How do text typing and editing work on the web? Although this process might seem straightforward, there is a lot of technical nuance behind its apparent simplicity. In this article, Ilya Medvedev will explain the challenges his company faced and the solutions they used to create a text widget in their application. He’ll also dive into how they implemented it and what they learned along the way — and how typing on the web works in general. Read more…

January 24, 2022 — We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features. Cascade layers will be the ultimate native solution for resolving conflicts between multiple sources of styles. Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Read more…

January 17, 2022 — In this article, Adrian Bece will explore fluid typography principles, use-cases, best practices, implementation with CSS clamp function and how to calculate the right parameters. He’ll also show you how to address some accessibility concerns and watch out for one important issue that you cannot fix as of yet, but have to be aware of regardless. Read more…

January 10, 2022 — CSS gradients are a useful CSS feature that can be used to create interesting UI effects or even help us in drawing something without the need to create HTML elements for it. In this article, we’ll be taking a closer look at two gradients: conic-gradient and radial-gradient. You’ll see how each one of them works in detail, what the differences and similarities are between them, how and where to use them, and some use cases for each. Read more…

December 23, 2021 — Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In this article, we’ll take a look at the quirkiness of the HTML range input and demonstrate how to style the input to look consistent across all major browsers. Read more…

November 29, 2021 — One of Jhey’s main mantras is to make learning fun. In this article, he shows you ways to level up your skills by bringing your ideas to life, and not forgetting that you can be playful with code. With that mindset, every idea is bound to become an opportunity to try something new. It’s fun to make things that we may not create on a day-to-day basis. Demos like this can pose different challenges and can level up your problem-solving game! Read more…