Skip to main content

Robin Rendle

Writer, designer, type nerd.

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

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

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

Almanac

mix-blend-mode

The mix-blend-mode property defines how an element’s content should blend with its background. For example, the text of a <h1 could blend with the background behind it in interesting ways.

.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 mix-blend-modeRead article “mix-blend-mode”

Almanac

background-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”

Article

BEM 101

The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we’d all get together on it and do it together.

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed byRead article “BEM 101”

Almanac

image-rendering

The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form.

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

About those three possible values:

  • auto: default value that uses the browser’s
Read article “image-rendering”