The more CSS you write the more complicated and fragile the codebase becomes. So whenever I get to around ~50 lines of CSS I tend to rethink what I’m designing by asking myself a couple of questions. Starting and ending with: “is this a single component, or can we break it up in...
Unfortunately, the image looks weird, because its colors were inverted with everything else. The good news is that multiple filters can apply at the same time. Adding the hue-rotate filter switches images and other visual content back to normal: Why does this work?hue-rotate(180deg)just crea...
What is it a percentage of? There’ve been so many times when I’ll be using percentages and something weird happens. I typically shrug, change the value to something else and…August 7, 2020 SVG Squircle Amelia Bellamy-Royds: I wondered if I could come up with an easy formula to ...
— Miriam Suzanne,Why Is CSS So Weird?(video) Thinking about it another way, the infamous meme of “CSS is Awesome” is, in fact, correct and intentional behaviorifthe base box was purposely set smaller than the size needed to accommodate that text. (If you’re interested, the original ...
Featured ProductsCSS TricksDiscover how to make your website stand out amongst the competition with copy-and-paste CSS Tricks.»CSS TricksThe Amazing Sprites KitAdd some real PIZZAZZ to your web sites with CSS Sprites! Check out the demo, this is MEGA cool!»The Amazing Sprites KitCSS Mad...
47 CSS Tips and Tricks « A Designer and Techie: Two Sides of the Same Coin 3:00 pm July 21st, 2010 […] Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in...
For sure, we can create huge machinery with Sass to produce several builds and use some tools like UnCSS to remove what is not needed, but let’s be honest:this is boring, and it can lead to “non-natural” pieces of code, like in the previous example. ...
When the content is longer, though, it overflows and goes out of the hero wrapper. This is not good. To fix that issue upfront, we can add min-height instead of height, and we at least do that to salve our conscience. Even though this might cause a page to look weird, but I th...
A companion code repo with over60 code samples and solutions. TheFive Steps to Painless CSS:a step-by-step checklist you can use to fixanyvisual bug you encounter; even the weird, confusing ones. TheCSS Specificity Tournament:a simple mental model to destroy specificity issues forever—you won...
Another thing—it makes sense to write your DIV structure in the order that you intend the reader to read it, not some back-to-front thing to accommodate a weird backwards-compatibility glitch. The idea is to make creating structured layout as simple as possible. ...