body { font-family: system-font, -webkit-system-font, -apple-system-font, “.SFNSDisplay-Regular”, HelveticaNeue, LucidaGrande; } On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible? Hence the sort of magic above to actually get it working. I Left My System Fonts in San Francisco …
Tag Archives: css
CSS-Grid-Polyfill
CSS Grid Layout Polyfill: The polyfill’s css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like ‘:hover’, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout …
Solving problems with CSS Selectors
CSS conic-gradient() Polyfill
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js”></script> <script src=”conic-gradient.js”></script> Conic gradients are awesome, but browsers haven’t realized yet. This polyfill lets you experiment with them now. By Lea Verou. Automatically creates an SVG which is set as the background. Uses -prefix-free. Alternatively you can also use the JavaScript API behind it directly: var gradient = new ConicGradient({ stops: “gold 40%, …
The Making Of “In Pieces”
Debugging CSS Animations
Space.js – HTML-driven narrative 3D-scrolling
For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies …
Continue reading “Space.js – HTML-driven narrative 3D-scrolling”
Quantity Queries for CSS
Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to n” for any value of n. Then I can style “more than or equal to …
CSS3 Grid By Example
Rachel Andrew: I have been writing and speaking about the CSS Grid Layout Module for some time now. In order to learn how Grid works I’ve put together lots of small examples, and I am publishing them here as a resource for anyone else interested in this emerging specification. Great to see these all bundled …