Thanks to Counting With CSS Counters and CSS Grid my attention was directed to this fact comes to using CSS Counters: The effectiveness of counter() wanes when we realize that an element displaying the total count can only appear after all the elements to be counted in the source code. This is because the browser …
Tag Archives: css
CSS Grid Experiments
How to use variable fonts in the real world
Richard Rutter (@clagnut): Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way. Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, …
Continue reading “How to use variable fonts in the real world”
Recreating the GitHub Contribution Graph with CSS Grid Layout
Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of …
Continue reading “Recreating the GitHub Contribution Graph with CSS Grid Layout”
CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!
Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of …
Continue reading “CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!”
CSSGrid.io – Free Video Series to learning CSS Grid
Great new video series by Wes Bos, this time on learning CSS Grid. CSS Grid may seem a bit daunting with new syntax and layout ideas, but it’s fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create …
Continue reading “CSSGrid.io – Free Video Series to learning CSS Grid”
Fontastic Web Performance
Emojineer Monica Dinculescu: Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk …
Sam Richard: Magic Tricks with CSS Houdini
Recording of Sam Richard talking at ColdFront17 about the aforementioned Houdini: This talk will focus on the working being done by the CSS Houdini Task Force to provide us with the ability to extend the browser’s render engine with JavaScript, above and beyond simply running JS on the main thread or a web worker.
Design Systems and CSS Grid
Stuart Robson uses CSS Grid for what it’s meant to be used for: creating a grid. He evens creates a faux subgrid by leveraging calc() to define the two margin-columns. .container { grid-template-columns: [full-start] minmax(calc(calc(100% – 1008px) / 2), 1fr) [main-start] repeat(14, [col-start] 1fr) [main-end] minmax(calc(calc(100% – 1008px) / 2), 1fr) [full-end]; } Add in …
Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior
Continue reading “Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior“