Tag Archives: css

Reverse clip path with blend modes

Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor. The gif and … Continue reading

Elsewhere , , , Leave a comment

Why You Should Be Excited About Native CSS Variables

With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer … Continue reading

Elsewhere , , Leave a comment

Stylus nth-of-m-child(n,m) Selector

. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new … Continue reading

Elsewhere , , Leave a comment

CSS-Only Direction Aware Hover

In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS … Continue reading

Elsewhere , , , , Leave a comment

CSS Memes Debunked

CSS Memes Debunked is a (small) collection of CodePen demos debunking a few of the myths/memes around CSS. Take this golden oldie for example: Using modern CSS (and a modern browser), this can be solved 🙂 CSS Memes Debunked →

Elsewhere , Leave a comment

Conditions for CSS Calculations

In CSS we have feature queries (@supports) available to create if–else-like structs. What if we could extend our means of using conditions in CSS? Roman Komarov provides us with a clever technique – which involves using CSS Variables, calc(), and … Continue reading

Elsewhere , , Leave a comment

Using Object.assign() to quickly set multiple inline styles

Since an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects. The result is that all keys from those extra … Continue reading

Elsewhere , , Leave a comment

Front-end Style Guides – Creating and Maintaining Style Guides for Websites

Anna Debbenham – creator of styleguides.io – wrote a book on … Style Guides: Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have … Continue reading

Elsewhere , , , Leave a comment

Harry Roberts: Refactoring CSS Without Losing Your Mind

Working with CSS is tricky enough as it is; working with legacy CSS can be nightmarish. In this talk, we’ll look at how we decide what to refactor and when; how we can refactor code whilst still shipping features; how … Continue reading

Elsewhere , , Leave a comment

From Pages to Patterns

Video of Charlotte Jackson’s talk at Beyond Tellerrand on how to adopt pattern thinking to developing a pattern library/styleguide: This talk will look at how we can help everyone in the team adopt pattern thinking. This includes anyone with a … Continue reading

Elsewhere , , , Leave a comment