I Still Love You, I Just Need A Break.

I've been enamored by color gradients lately. This is definitely a cyclical phenomenon. I'm coming down off my Aspergian fixation on solid colors, and now I can't get me enough gradient! I see them everywhere. I want to save them and keep them in a box on my desk. Kind of (but not really) like this. An actual box would be so great...

Hey, there's an idea! A deck of cards but instead of numbers and queens and kings and stuff, there would be beautiful gradients! I really want a CodePen deck of cards.

Ah, Gradients! This reminds me... a long time ago, when I used to work at SurveyGizmo, I once took down our production server with a CSS rule. Before you go calling "Baloney!", it's important to note that we didn't have one of those fancy CSS preprocessors deployed back then and rolled our own CSS preprocessor with PHP. Anyway, one of our sysadmin guys came into the Dev cave exclaiming that he found the problem. He was explaining something about something server-side and I glazed over. I don't remember the details of how the style rule broke everything, but I do remember it was a magnificent gradient! That was a landmark day for us 'front-end' types... it really put us in the same game as those bash wrangling terminal ninjas samurais. "Watch out man, or we'll unleash another Gradient!"

Okay, maybe not. But for a day, they were baffled about it.

Side note: I recently learned that "ninjas" were the bad guys and "samurais" were the good guys protecting the fortress from the ninjas.

Fast forward a few years and I'm standing in my cubicle, trying to ignore the abundance of beige, wondering what today has in store. In lieu of pressing deadlines this week, and since it's Friday, and 'cause CodePen — I wanted to see if I could conjure up some gradient-treated text, because I'm so bored with all these gradient backgrounds already!

Not really.

My original approach to this was not super elegant and felt a bit hacky, but I was happy with the end result:

Until I tested it with a non-#ffffff background color.

The Hipster vs. The Caveman

You see, I used an ::after pseudo-element with mix-blend-mode:screen absolutely positioned on top of the content, which meant the content element (in this case, an h1) would need to be position:relative and this is where I start feeling icky inside. I want to make things as bullet-proof as possible. This limitation bothered me. Like, a lot... even enough to think about alternative ways to do this, and then to ultimately google something I remembered about clip-path or text-clip or something and found this sort of example all over the place:

  .some-text-mask {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(../an-image.jpg);
}

But this background-clip:text hipster currently isn't as browser-friendly as a pseudo-element caveman and would require a vendor prefix, and some sort of SVG alternative for the likes of Firefox, and I didn't even care to fire up an image in VMWare and humor Microsoft's line-up. At this point I got lost in that middle-space between my head and my computer screen and started day-dreaming about running for president and crafting legislation about resolving browser rendering inconsistencies into a unified glorious engine and touring the country (or the world even!) championing my idea. I would name Paul Irish as my Veep (bitches!), and fill my cabinet with staffers from the Fabulous Five: CodePen, Github, Sketch, Slack, InVision — and the guy who runs the Taco Truck down the street behind Lowe's.

No walls. I promise. Vote for Jase. Make the internet great again!™

Snap! Back to my cubicle.

Walls.

Damn. My coffee is cold again.™

Okay, so gradients... Right! Naturally, instead of an image url() I popped in a radial-gradient() and that made me smile. I stuck a text-shadow on that puppy and smiled an even bigger smile realizing that my little caveman also affects the text shadow.

  .gradient-text {
  position: relative; // eh, ¯\_(ツ)_/¯
  text-shadow: .2em .2em .35em #888;
  padding: .5em; // this provides coverage over the shadow
  &::after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle at 70% 3%, #aa048b, #bb9801);
    mix-blend-mode: screen; // the real magician
  }
}

My work is done here. Time to head home early today.


1,766 0 24