matcha.fyi

Sign in Subscribe

CSS

Pure Dropdown CSS Navigation Bar From Scratch

Pure Dropdown CSS Navigation Bar From Scratch

Dropdown menus are inescapable when it comes to front-end development. At some point, you’re going to encounter them. While most CSS frameworks automatically handle this for you, sometimes you just need to do it yourself. But the question is — how? For those who are new to CSS or just

clamp() Is The Answer To Our Fluid Typography Woes

clamp() Is The Answer To Our Fluid Typography Woes

As designers and developers, it’s easy to get caught up in the shiny and flashy aspects of building websites and applications. We pour over color palettes, search for the perfect imagery, and spend hours fine-tuning animations. But let’s not forget about the one element that ties everything together:

How to disable text selection in HTML with CSS

How to disable text selection in HTML with CSS

If you're just here for the code snippet, here is the quick rundown of it. * set user-select to none in your CSS. What is user-select in CSS? It's a CSS property that lets you specify if a text element can be selected. For example, if you

How to create rainbow gradient text colors in CSS

How to create rainbow gradient text colors in CSS

Rainbow gradients are everywhere. They're cool and fun looking. The text is also fully readable by bots. Here are some cool examples in the wild: Vercel - cloud platform But how is it done? The magic lies in linear-gradient, -webkit-background-clip and -webkit-text-fill-color Here's the quick code

What Is SMACSS and How Does It Work?

What Is SMACSS and How Does It Work?

> This piece is part of a Learn HTML & CSS series. Check out part 4 here: What is OOCSS and How OCSS Works [https://matcha.fyi/ocss-explained/] SMACSS Pronounced “smacks”, SMACSS stands for Scalable and Modular Architecture for CSS. The idea behind SMACSS is to break your CSS down

What is OOCSS and How OCSS Works

What is OOCSS and How OCSS Works

> This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSS [https://www.dottedsquirrel.com/css-introduction/] OOCSS OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and

HTML, The Cascade, and Ways To Think In CSS

HTML, The Cascade, and Ways To Think In CSS

> This piece is part of a Learn HTML & CSS series. Check out part 2 here: Parts Of An HTML Document And How It Works With CSS [https://www.dottedsquirrel.com/html-explained-2/] I started learning how to code back in the early 2000s. For context on how long ago