CSS17

Check out the latest posts
Aphinya Dechalert

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...

Aphinya Dechalert
CSS

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:...

Aphinya Dechalert
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...

Aphinya Dechalert
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...

Aphinya Dechalert

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...

Aphinya Dechalert

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...

You’ve successfully subscribed to matcha.fyi
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Success! Your email is updated.
Your link has expired
Success! Check your email for magic link to sign-in.