SVG clip-path and CSS Mix-Blend

I was working on my portfolio page, wanting to give it a little extra punk rock attitude, and I started to look around for inspiration. I settled on the cover of Bad Religion’s 1989 album ‘No Control’ because it looks cool, is one of my favorite albums to listen to, and I thought it would be somewhat easy to reproduce.

All you really have is that colorful backdrop, and then text that cuts through a black background. There are some nice details, too, like the rough edges and black noise, but in essence it’s colors, black, and clipping text. ez pz.

Attempt 0: clip-path

Since the text, in my mind, clips its background, I first searched for a CSS property that would allow me to do that. You might thinking it would be the ‘clip’ property, but it’s deprecated and this use case is not what it was intended for anyway. The new hotness is ‘clip-path’. This property can handle basic polygons. If you want your clip path to be text, though, you are going to have to introduce some… SVG.

I had a cursory understanding of SVG as a format, and knew that using it would be similar to my work with the canvas API. It did work! I started with a div with a gradient background, place a smaller concentric black div inside, and on top of that put a div with the same gradient background clipped to the text.

The results were not very pretty. It leaves me wondering one big thing about SVG that I am eager to explore: can I style SVG text with the same level of precision that I can style text using CSS?

Attempt 1: CSS mix-blend

What if instead of clipping the background, we just make the text transparent?

My first attempts going this route were to try to place an outline around transparent text. I have some experience with Photoshop, so I hoped that CSS includes properties for stroke and fill. You can definitely do this with SVG, and webkit is working on it, but right now it’s just not practical. Chris Coyier has an article showing how to accomplish the same effect but if you attempt to apply this to transparent text, it doesn’t work because the text-shadow acts as a background.

But! Speaking of Photoshop! There’s this nice property called mix-blend-mode which allows you to define how an element should blend with what’s behind it. One of these blend modes is ‘multiply’, and it pretty much does exactly what it says: it takes the color values of the top layer, multiplies it by what’s underneath, and divides by 255.

Some basic math shows why this is useful here. ‘My Gradient’ x White(255, 255, 255) / White(255, 255, 255) = ‘My Gradient’. If I put white text in an element above my gradient background, all I will see is the gradient behind it.

Result on Codepen.

Admittedly basic, but its essence is intact.

The only really unfortunate thing about this whole journey was that that gradient does not look very nice as a header and this design did not make it onto the page. Still learned a lot though.

SVG clip-path and CSS Mix-Blend

make it pretty

I consider myself a front end developer. I think a lot about UX, interactivity, and presentation of information. I had a career as a teacher so these are all things that matter to me. But I tend to get bogged down in the scripting and markup, and while I make things that function well and are structurally sound, my God they’re ugly sometimes.

It is hard to come to terms with a professional weakness, so for a long time I just convinced myself that it did not matter as long as my sites were usable and above user-agent levels of stylishness.

Here’s how I started to learn how to make things that were a little bit more attractive.

Method 0: straight up thievery

Call it professional peer pressure because after picking through the Videos That Will Help to Improve Your Design Skills a consistent piece of advice was that A LOT OF GOOD DESIGN IS STOLEN. Not copied! Just boiled down to its essence and co-opted. Browse the web more mindfully. Pay close attention to styles you like or dislike, and that add or subtract to the user experience. When you find something really good, inspect it with browser developer tools and figure out how it works fundamentally, and how it fits into the big picture of the site as a whole. And when the opportunity arises, use it in your own work, because that is perfectly OK to do.

Method 1: pick through the toolbox and refresh your memory

Take a look at the MDN CSS Reference. There are so many potential style rules. It is easy to forget what is available to you. Even simple things like borders, text shadow, box shadow, or text decoration escape me at times. Yet little things like that, used judiciously in a design, can really make an element pop and give a page a more polished look. I like to skim through the various text effects, transformations, and background properties just to remember what is possible.

Method 2: approach visual design problems like client-side logic problems

I think what attracts me to algorithm scripting is the goal-directed nature of it. You have an outcome you are trying to bring about and you are talking the computer through the necessary steps to make it happen. Part of strengthening my layout and style skills has been a cognitive shift. Writing CSS rules is not very different. You have a look you are trying to achieve and you have to talk the browser through how to paint those pixels. When I approach design problems in that frame of mind, it does not feel burdensome. It feels great! Have a plan. Begin with the end in mind. Layout and style are steps you take to get there.

make it pretty

why and how I started using SASS

I do not jump on technological bandwagons. I approach my work building websites in much the same way I approach doing mathematics. I will do my best with what I have to solve the problem, but if I need a new or better tool to get the job done I will go out and get it.

And until variables land firmly in CSS, I need a better way to style my pages.

Reason 0: dependencies

I love calc(). It makes it incredibly easy to do something cute like this:

.fixed-sidebar {
   height: 100vh;
   width: 48px;
}

body {
   margin: 0 0 0 48px;
   width: calc(100vw - 48x);
}

A sidebar running up the entire height of the page, and a body that will take up the remaining horizontal space.
Mmm.
But maybe I want my sidebar a little bit thinner…or wider…three places to make that change!

Reason 1: colors

I usually just keep things black and white to whatever extent possible to be perfectly honest. But lately, as I try to flex my design skills, I use more color.

And now I know that sometimes one color, when we keep things consistent, can keep popping up E V E R Y  W H E R E.

What if I could just define an element’s width or a color code once, and use it multiple times?

If I had CSS variables I could. Right now I can’t. Except I can, because I have known about CSS preprocessors since October and just forestalled using one. The need has now been sufficiently created.

The great news is, it was incredibly easy to get started. All I needed was:
Sass documentation and,
Sass autocompile for Atom.

If I am honest, the biggest reason I did not get started with Sass until now was that I was lazy and hesitant to add the step of compiling it to my build process. But when it happens every time you save your sass file, well that is entirely painless.

I know Sass is deeper than variables. I am especially interested in how it handles extensions/inheritance. But the need to not repeat myself was the last straw that drove me to embrace it, and I am very happy that the barrier to entry was practically non-existent.

why and how I started using SASS

how to eat an elephant

I have a big idea.

Sometimes I’ll be making progress and then I’ll realize, “Oh no, I’m going to have to know how to set up a database” and then “Oh no, I’m going to have to know data structures” and then “Oh no, I’m going to have to know how to configure and maintain a server”.

It’s good to know what you don’t know.

But you shouldn’t let what you don’t know stop you.

Because how do you eat an elephant? ONE BITE AT A TIME!

how to eat an elephant