Skip to main content

Robin Rendle

Writer, designer, type nerd.

Link

I Left My System Fonts in San Francisco

Link

React.js Introduction For People Who Know Just Enough jQuery To Get By

Article

Working with Shapes in Web Design

When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes?

In this post I want to roughly outline some of the most common ways to make circles, triangles, and polygons, as well jot down the advantages and disadvantages for these methods so we can experiment with those that might … Read article

Link

HTTP 203: Progressive loading

Link

Contextual Styling: UI Components, Nesting, and Implementation Detail

Almanac

shape-outside

The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon:

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

It’s important to note that this property will only work on floated elements for now, although this is likely to change in the future. The shape-outside property can also be manipulated with transitions or animations.

Values… Read article
Article

Performance Tools

Weekend roundup time! From the multitude of Grunt and Gulp plugins to web apps that can help us visualize our websites with data, learning all the ins and outs of performance tooling is tough. I thought it might be useful to catalogue as many tools out there as I could find.… Read article

Article

Considerations on Bug Reporting in Teams

Here's a frustrating situation: someone notices a real layout bug or a glitch of some kind, but they fail to accurately describe the problem when they tell you about it. As front-end developers, and all-round good team players, it's our responsibility to establish a workflow for reporting, cataloguing, and describing the bugs that people are likely to encounter.… Read article

Article

Chaining Multiple Blend Modes

The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element.

What's extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.… Read article

Almanac

mix-blend-mode

The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property. For example:

.blend {
  mix-blend-mode: exclusion;
}

See the Pen mix-blend-mode demo by CSS-Tricks (@css-tricks) on CodePen.

In the example above the content has been modified by the mix-blend-mode so that the colors of the text are excluded from its background. This is just one of many values … Read article

icon-link icon-logo-star icon-search icon-star