Skip to main content

Robin Rendle

Writer, designer, type nerd.


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


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 “Working with Shapes in Web Design”


HTTP 203: Progressive loading


Contextual Styling: UI Components, Nesting, and Implementation Detail



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 “shape-outside”

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 “Performance Tools”


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 “Considerations on Bug Reporting in Teams”


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 “Chaining Multiple Blend Modes”



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;
CodePen Embed Fallback

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 for this property.

There is an issue with Chrome 58+ where … Read article “mix-blend-mode”



The background-blend-mode property defines how an element’s background-image should blend with its background-color:

.container {
  background-image: url('image.jpg');
  background-color: red;
  background-blend-mode: screen;

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

In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color. On the right however, the blend mode has modified the background-image with the red background-color underneath. But notice that the text color … Read article “background-blend-mode”