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...
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:...
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 hold your mouse over...
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 snippet for it 👇 h1{...
> 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 into five...
> 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 patterns, meaning...
