CSS Quirks and Pitfalls
While it's fun to see a car designed entirely with CSS from a single div, the day-to-day reality for a typical CSS designer is far less glamorous. Often, you'll lose hours upon hours due to some confusing CSS quirk that seemingly makes no sense. In this series, we'll dig our heals into the dirt and, together, decipher a variety of CSS oddities.
Progress
Series Info
- Episodes
- 4
- Run Time
- 35m
- Difficulty
- Advanced
- Last Updated
- Feb 25, 2021
- Version
- Latest
Series Episodes
- Episodes (4)
The Minimum Height Miscalculation
One day, you'll fall into a CSS trap related to setting a child element's height as a percentage of its parent's minimum height. Spoiler alert, but it won't work the way you think. In this episode, we'll review two possible solutions.The Line-Clamp Prefix Peculiarity
If you've ever hoped to clamp a paragraph of text to a set number of lines, you're likely already aware that it's a tricky process. However, for many years now, there has been a way to do it with pure CSS. The only caveat is that it requires a number of webkit-specific prefixes to work properly. But what would you say if I told you that, even with these webkit-specific prefixes, the functionality will work across all modern browsers?The Confusing Realm of CSS Masking
In this episode, we'll discuss the confusing realm of CSS clip paths and masking. As an example, we'll reproduce the curve banner you see on the Laracasts homepage (at the time of this writing.)The Background Gradient Transition Conundrum
In this episode, we'll discuss how to provide smooth hover transitions for CSS background gradients. Unfortunately, it's not so easy. We'll need to use a bit of trickery to simulate the effect.
