A Color Picker for Product Images

Sounds kind of like a hard problem doesn’t it? We often don’t have product shots in thousands of colors, such that we can flip out the <img src="product-red.jpg" alt="red product"> with <img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG fills to them and such.

There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. Kyle Wetton demonstrates, and it’s essentially:

  1. Make a vector path that covers the area on the JPG that should change color (probably in Photoshop with the Pen Tool and exporting the vector).
  2. Place that solid vector area exactly on top of the product JPG.
  3. mix-blend-mode: multiply; the SVG.
  4. Change the fill color on the SVG as desired.

Here’s the super cool demo I think it originated from:

See the Pen
Color this sofa! – SVG + Blend Mode trick
by Kyle Wetton (@kylewetton)
on CodePen.

And the demo from the article:

See the Pen
Dynamic Colour Picking – Part 3

on CodePen.

The post A Color Picker for Product Images appeared first on CSS-Tricks.

A Pain-Free Workflow For Issue Reporting And Resolution

A Pain-Free Workflow For Issue Reporting And Resolution

A Pain-Free Workflow For Issue Reporting And Resolution

Suzanne Scacca

(This is a sponsored post.) Errors, bugs and other issues are bound to arise in web development. Even if they aren’t outright errors, clients often have feedback about how something was designed, where it was placed or how certain elements work. It’s just part of the gig.

It can be a very painful part of the gig, too.

Take this scenario, for instance:

Email #1 from client: “I can’t see the button anymore. Can you please put it back on the home page?”

Email #2 from you: “Which button are you referring to? Can you send me a screenshot?”

You try to call the client, but get their voicemail instead.

Email #3 from the client: “The button to book a demo.”

You look at the attached screenshot and see that the Book a Demo section is intact, but the button doesn’t show. You pull up the website on Chrome and Safari and see it in both browsers: a big blue button that says “Schedule Demo”. You pull it up on your iPhone and see it there, too.

Email #4 from you: “Can you tell me which device and browser you’re seeing the issue on?”

Email #5 from client: “My phone.”

You know how this chain of messages will go and it’s only going to lead to frustration on both ends. Not to mention the cost to your business every time you have to pause from work to try to interpret a bug report and then work through it.

Then, there’s the cost of bugs to your clients you have to think about. When something goes wrong after launch and your client is actively trying to send traffic to the website, a bug could hurt their sales.

When that happens, who do you think they’re going to come after?

A Pain-Free Workflow For Issue Reporting And Repairs

It doesn’t matter what the size of the bug or issue is. When it’s detected and reported, it needs to be dealt with. There are a number of reasons why.

For starters, it’s the only way you’re going to get your client to sign off on a project as complete. Plus, swift and immediate resolution of bugs leads to better relations with your client who sees how invested you are in creating an impressive (and error-free) website for their business. And, of course, the more efficiently you resolve errors, the quicker you can get back to finishing this job and moving on to others!

So, here’s what you need to do to more effectively and painlessly tackle these issues.

  1. Assign Someone To Triage
  2. Use An Issue Resolution Workflow
  3. Give Your Users A Bug Reporting Tool
  4. Give Your Triage Manager A Tracking Platform
  5. Work In A Local Testing Platform
  6. Always Close The Loop

1. Assign Someone To Triage

The first thing to do is decide who’s going to triage issues.

If you work on your own, then that responsibility is yours to own. If you work on a team, it should go to a project manager or dev lead that can manage reported issues just as effectively as they would manage the team’s workload.

This person will then be in charge of:

  • Monitoring for reported issues.
  • Adding the bugs to the queue.
  • Ushering them through the resolution workflow.
  • Resolving and closing up bug reports.
  • Analyzing trends and revising your processes to reduce the likelihood that recurring bugs appear again.

Once you know who will manage the process, it’s time to design your workflow and build a series of tools around it.

2. Use An Issue Resolution Workflow

Your triage manager can’t do this alone. They’re going to need a process they can closely follow to take each issue from Point A (detection) to Point B (resolution).

To ensure you’ve covered every step, use a visualization tool like Lucidchart to lay out the steps or stages of your workflow.

Here’s an example of how your flow chart might look:

Lucidchart issue reporting workflow
An example of an issue reporting workflow built in Lucidchart. (Source: Lucidchart) (Large preview)

Let’s break it down:

You’ll start by identifying where the issue was detected and through which channel it was reported. This example doesn’t get too specific, but let’s say the new issue detected was the one mentioned before: the Book a Demo button is missing on the home page.

First steps issue detection
What happens when an issue is detected on a website. (Source: Lucidchart) (Large preview)

The next thing to do is to answer the question: “Who found it?” In most cases, this will be feedback submitted by your client from your bug-tracking software (more on that shortly).

Next, you’re going to get into the various stages your issues will go through:

Issue tracking tickets
An example of how to move tickets through an issue tracking system. (Source: Lucidchart) (Large preview)

This is the part of the process where the triage manager will determine how severe the issue of a missing Book a Demo button is (which is “Severe” since it will cost the client conversions). They’ll then pass it on to the developer to verify it.

Depending on how many developers or subject matter experts are available to resolve the issue, you might also want to break up this stage based on the type of bug (e.g. broken functionality vs. design updates).

Regardless, once the bug has been verified, and under what context (like if it were only on iPhone 7 or earlier), the ticket is moved to “In Progress”.

Finally, your flow chart should break out the subsequent steps for issues that can be resolved:

Issue resolution workflow sample
A sample workflow of how to resolve website issues and bugs. (Source: Lucidchart) (Large preview)

You can name these steps however you choose. In the example above, each step very specifically explains what needs to happen:

  • New Issue
  • In Progress
  • Test
  • Fix
  • Verify
  • Resolve
  • Close the Loop.

To simplify things, you could instead use a resolution flow like this:

  • New Issue
  • Todo
  • Doing
  • Done
  • Archive.

However you choose to set up your patch workflow, just make sure that the bug patch is tested and verified before you close up the ticket.

3. Give Your Users A Bug Reporting Tool

When it comes to choosing a bug reporting tool for your website, you want one that will make it easy for your team and clients to leave feedback and even easier for you to process it.

One such tool that does this well is called BugHerd.

Basically, BugHerd is a simple way for non-technical people to report issues to you visually and contextually. Since there’s no need to train users on how to get into the bug reporting tool or to use it, it’s one less thing you have to spend your time on in this process.

What’s more, BugHerd spares you the trouble of having to deal with the incessant back-and-forth that takes place when feedback is communicated verbally and out of context.

With BugHerd, though, users drop feedback onto the website just as easily as they’d leave a sticky note on your desk. What’s more, the feedback is pinned into place on the exact spot where the bug exists.

Let me show you how it works:

When you first add your client’s website to BugHerd (it’s the very first step), you’ll be asked to install the BugHerd browser extension. This is what allows BugHerd to pin the feedback bar to the website.

It looks like this:

BugHerd bug reporting tool
How the BugHerd sidebar appears to clients and team members with the extension installed. (Source: BugHerd) (Large preview)

This pinned feedback bar makes it incredibly easy for clients to leave feedback without actually altering the live website.

This is what the bug tracker pop-up looks like:

BugHerd error collection
BugHerd makes error collection from clients very easy. (Source: BugHerd) (Large preview)

As you can see, it’s a very simple form. And, really, all your clients need to do is select the element on the page that contains the bug, then enter the details. The rest can be populated by your triage manager.

As new feedback is added, comments are pinned to the page where they left it. For example:

BugHerd bug list
Review all reported bugs from the BugHerd sidebar. (Source: BugHerd) (Large preview)

You’ll also notice in the screenshot above that tasks that have been assigned a severity level are marked as such. They’re also listed from top-to-bottom on how critical they are.

On your side of things, you have a choice as to where you view your feedback. You can open the site and review the notes pinned to each page. Or you can go into the BugHerd app and review the comments from your Kanban board:

BugHerd bug dashboard
This is the BugHerd dashboard your developers and triage manager can use. (Source: BugHerd) (Large preview)

By default, all bugs enter the Backlog to start. It’s your triage manager’s job to populate each bug with missing details, assign to a developer and move it through the steps to resolution.

That said, BugHerd takes on a lot of the more tedious work of capturing bug reports for you. For example, when you click on any of the reported bugs in your kanban board, this “Task Details” sidebar will appear:

Bug details in BugHerd
A place to review all of the details about captured bugs. (Source: BugHerd) (Large preview)

This panel provides extra details about the issue, shows a screenshot of where it exists on the site, and also lets you know who left the comment.

What’s more, BugHerd captures “Additional Info”:

BugHerd additional info
Click on ‘Additional info’ to reveal details about the browser, OS and code. (Source: BugHerd) (Large preview)

This way, you don’t have to worry about the client not providing you with the full context of the issue. These details tell you what device and browser they were on, how big the screen was and what color resolution they were viewing it through.

You also get a look at the code of the buggy element. If there’s something actually broken or improperly coded, you might be able to spot it from here.

All in all, BugHerd is a great tool to simplify how much everyone has to do from all sides and ensure each request is tackled in a timely manner.

4. Give Your Triage Manager A Tracking Platform

If you want to keep this workflow as simple as possible, you can use the BugHerd dashboard to track and manage your requests:

The BugHerd dashboard
An example of the BugHerd dashboard when it’s in use. (Source: BugHerd) (Large preview)

Your triage manager and dev team will probably want to use something to complement the bug reporting capabilities of BugHerd. But good luck asking your client to use a platform like Jira to help you manage bugs.

In that case, I’d recommend adding another tool to this workflow.

Luckily for you, BugHerd seamlessly integrates with issue tracking and helpdesk software like Jira, Zendesk and Basecamp, so you don’t have to worry about using multiple tools to manage different parts of the same process. Once the connection is made between your two platforms, any task created in BugHerd will automatically be copied to your issue resolution center.

Now, if there’s a tool your team is already using, but that BugHerd doesn’t directly integrate with, that’s okay. You can use Zapier to help you connect with even more platforms.

For example, this is how easy it is to instantly create a “zap” that copies new BugHerd tasks to your Trello cards. And it all takes place from within BugHerd!

BugHerd - Zapier integration
BugHerd helps users quickly integrate other apps like Zapier and Trello. (Source: BugHerd) (Large preview)

Once the connection is made, your triage manager can start working from the task management or issue tracking platform of its choosing. In this case, this is what happens when Zapier connects BugHerd and Trello:

New task in BugHerd
This is a new task that was just created in BugHerd. (Source: BugHerd) (Large preview)

This is a new task I just created in BugHerd. Within seconds, the card was placed into the exact Trello project and list that I configured the zap for:

BugHerd + Zapier + Trello
The BugHerd Zapier integration instantly copies new bug reports to Trello. (Source: Trello) (Large preview)

This will make your triage manager’s job much easier as they won’t be limited by the stages available in BugHerd while also still having all the same information readily at their fingertips.

5. Work In A Local Testing Platform

When bugs are reported, you don’t want to test and implement the assumed fixes on the live website. That’s too risky.

Instead, work on resolving issues from a local testing platform. This article has some great suggestions on local development tools for WordPress you can use for this.

These tools enable you to:

  • Quickly make a copy of your website.
  • Reproduce the bug with the same server conditions.
  • Test possible fixes until you find one that works.

Only then should you work on patching the bug on the website.

6. Always Close The Loop

Finally, it’s up to your triage manager to bring each issue to a formal close.

First, they should inform the client (or visitor) who originally reported the issue that it has been resolved. This kind of transparency and accountability will give your agency a more polished look while helping you build trust with clients who might be unnerved by discovering bugs in the first place.

Once things are closed client-side, the triage manager can then archive the bug report.

It shouldn’t end there though.

Like traditional project managers, a triage manager should regularly track trends as well as the overall severity of bugs found on their websites. The data might reveal that there’s a deeper issue at play. That way, your team can focus on resolving the underlying problem and stop spending so much time repairing the same kinds of bugs and issues.

Wrapping Up

Think about all of the ways in which issues and bugs may be reported: through a contact form, by email, over the phone, through chat or, worse, in a public forum like social media.

Now, think about all of the different people who might report these issues to you: your team, the client, a customer of your client, a person who randomly found it while looking at the website and so on.

There are just too many variables in this equation, which makes it easy to lose sight of open issues. Worse, when feedback comes through vague, subjective, or unable to account for without any context, it becomes too difficult to resolve issues completely or in a timely fashion.

With the right system of reporting, tracking and organizing feedback in place, though, you can bring order to this chaos and more effectively wipe out bugs found on your website.

Smashing Editorial (ms, ra, yk, il)
Underground World & the man who (thought he) knew everything

Often described as the man who knew everything, Athanasius Kircher (1602–80) was a German Jesuit polymath of international renown during his own lifetime. He was a prolific author with an astoundingly broad range of interests, writing about everything, from geology and geography to sinology and egyptology, biology, medicine, engineering, theology, anthropology, music theory and linguistics. […]

The post Underground World & the man who (thought he) knew everything appeared first on I Love Typography.

CSS-Tricks Chronicle XXXVI

This is one of these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family.

I was recently in Zürich for Front Conference. It was my first time there and I very much enjoyed the city and the lovely staff of the conference. I was terribly jetlagged for my opener talk so I feel like I didn’t quite nail it how I wanted to, but whattyagonnado.

It’s named “How to Think Like a Front-End Developer” but it’s really more like an adaptation of “ooooops I guess we’re full-stack developers now.”

I’ve packed in several more conferences this fall:

  1. Web Unleashed – Toronto, Canada
  2. Dot All – Montreal, Canada
  3. ARTIFACT – Austin, Texas – Use coupon code LASTCHANCE200 for this one.
  4. All Things Open – Raleigh, North Carolina
  5. JAMstack_conf – San Francisco, California

Speaking of conferences, if you know of any coming up that aren’t on our master list of front-end related web conferences, please do a pull request or contact me.

If we’ve got anything at ShopTalk Show, it’s consistency! I don’t even remember the last time we’ve missed a week, and I enjoy making the show just as much now as I ever have.

Perhaps my favorite show of late was just chatting with Dave about what technology we would pick if on a greenfield (from scratch) project under different circumstances.

But mostly we chat with folks like Tyler McGinnis, Adam Argyle, Rachel Andrew, and Lara Hogan.

We’re moving right along at CodePen as well!

  • You can now export Pens with a build process, meaning after an npm install, you have an offline version of CodePen to work with. Need to spin up a little processing environment for like Markdown/Sass/React/Babel? Just set up a blank Pen that way, export it, and you’ve got it.
  • We’re building more and more of CodePen in React, and I think we’re past the tipping point where the value in that becomes more and more clear. It’s a good technological fit for our type of site. For example, we re-wrote how items are displayed and grids-of-items across the site. So now we build some little feature into it like “pinning” items, and it instantly sprinkles out to all the grids on the entire site. Same with filtering and view options.
  • Along those same lines, little moments like this feel very satisfying to me. That’s related to our “Private by Default” feature.
  • We released a feature so you can block other users if it comes down to that (as well as report them to us).
  • We released some high contrast syntax highlighting themes that are both more accessible and darn nice to look at.

I got to be on Giant Robots!


We started an Instagram account at @real_css_tricks. The plan is just little educational tidbits.

The post CSS-Tricks Chronicle XXXVI appeared first on CSS-Tricks.

20 Freshest Web Designs, September 2019

This month, there’s tons of color, and some elegant transitions. Video is huge this month, with a number of sites opting for video front and center. You’ll also find some delightful animated illustration. Enjoy!

Bon Iver Visualizer

This impressive site, built with Spotify data, visualizes all of the people currently streaming Bon Iver music, including key details of their location like elevation, and weather conditions. It’s a fascinating attempt to make streamed music a collective experience.

Jia Szeto

Paris-based stylist Jia Szeto’s portfolio site is a joy to browse through, with colorful frames that bring out the best in the photography, and stylish transitions that move you from one project to the next. It’s deceptively simple, and very high-class.

Headless Horse

Headless Horse presents a new way to browse through a studio’s portfolio. In this case, move your cursor around the wall of seemingly random thumbnails. It works, because Headless Horse have worked with some huge clients, so recognizable brands leap out at you.


This site is a joy to browse around. The exquisite product photography and the luxurious feel of the transitions — note the subtle blur added to the fade — make Monastery’s skincare range highly-desirable before you’ve even tried it.

Hazelbrook Legal

Hazelbrook Legal is a corporate law firm, its site is innovative in its field, using a large video, showing a ball rolling around an Escher-style maze. The ball is solid, and its path is calm and certain. Exactly what you want from this type of company.


Ramus is a design collective drawing talent from across the creative industries to produce works of art with light. The scale of its portfolio is truly impressive, and a different showcase video loads each time you visit the site.


If you want to be successful in design you need to carve out a niche. Thirst has certainly done that by only designing packaging for drinks. The animated gradients on its homepage calls to mind exotic flavours perfectly.

Near Miss Memorials

Near Miss Memorials is a public safety campaign from New Zealand that’s educating the public about crossing train tracks safely. Scroll along the tracks, and watch videos of people risking their lives for a few extra seconds off their journey. It’s an impactful, and potentially life-saving site.

Seafood From Norway

If like me, you’re hooked on Nordic Noir TV dramas, then the opening video on Seafood From Norway’s site will get your pulse racing. The site is actually a very beautiful advert for the Norwegian fishing industry, showcasing its high standards. The recipes are great too.


This awesome illustrated site uses animation and simple illustration to simplify technologically complex solutions. Best of all, the flow of the illustrations lead you through the sections of the site, drawing you into the content brilliantly.


French design studio VLNC has a unique approach to the thorny problem of how to layout thumbnails, they turned them into a mouse trail. It’s a surprisingly effective way to make use of one of the web’s oldest clichés.

Fetching Fields

The ingredients on Fetching Fields’ site look good enough to eat, and with its luxury-feel brand you’d expect this to be a fancy new foodie option. But Fetching Fields are selling treats for our dogs. Because our furry friends deserve the best.


One of the most difficult aspects of a site to get right is the tone. It’s when user experience, art direction, content, animation, and typography all come together to just feel right. Tusk gets it perfectly.

We Compost

Normally, any delay in getting to a site’s content is a bad thing, but Auckland’s We Compost opens with a delightful animation of earthworms, which ties the concept together instantly. It’s lovely.


Who says parallax is dead? This simple site for CBD-based drink is calm, brand appropriate, and makes excellent use of the tried and tested effect that we all love to hate to love.

The Jacky Winter Group

The Jacky Winter Group represents illustrators, artists, animators, lettering designers, and all manner of visually creative professional. The site is almost an assault on your eyes. It’s modern, exciting, and packed with energy.

NYT Food Festival

This great little site for the New York Times’ Food Festival captures our attention with fun, animated typography. There are excellent splashes of color blocking throughout the site, even if the vital information is a little hidden away.

Almond Surfboards

With an innovative range of surfboards, the site for Almond Surfboards captures a retro, West-coast vibe perfectly. The warm off-white colors and all-American typography feel precisely on point. Check out the accessories section for some awesome flag-based lettering work.

Hudson Hemp

Hudson Hemp uses an opening looping video to set the tone of its content. It’s respectable, science-orientated, it could be a feature for National Geographic. All essential characteristics when you’re selling a product about which there is so much misinformation.

Adventure of the Detective’s

I don’t pretend to fully understand Andrew Maruska’s quest-generator for D&D. But what I do understand is the excellent choice of typeface, that levels-up this one-pager. It feels entirely appropriate, and I wish more sites were brave with their font choices.

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Popular Design News of the Week: September 9, 2019 – September 15, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

20 Graphic Design Websites that will Inspire You


My Favorite CSS Hack


New Volkswagen Logo Breaks its own Rules


The Best UX Design of 2019


7 CSS Triangle Backgrounds


19 UI Design Trends for Web and Mobile Worth your Attention


Common Design Mistakes


Why Adobe XD is Better than Sketch.


Colors & Fonts, a Curated Library of Colors and Fonts for Digital Designers and Web Developers


Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion


Free HTML / CSS Style Guides


19 Amazing Sources of Web Design Inspiration


Bugs that Became Features


UX of Email Newsletters


Site Design: Purple, Rock, Scissors!


Stop Infinite Scrolling on your Website


6 Things to Consider When Making your Portfolio Website


Drama: Prototyping, Animation & Design Tool. All-in-one


Batman 1989: Illustrators and Designers on Why the Logo Still Resonates


10 Simple Tips to Improve User Testing


Daily Pattern Challenge


Figmac – Make Figma Feel More at Home on the Mac


4 Small Details that Reveal How Design at Apple is Changing


Source Wireframe Kit – 537 Desktop and Mobile Layouts in 22 Categories for Sketch and Figma


Is Full-time Freelance Design for You? Ask Yourself these 7 Questions


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}


As long as I can remember the main source for feature support in HTML email clients is Campaign Monitor’s guide. Now there is a new player on the block: caniemail.com.

HTML email is often joked about in how you have to code for it in such an antiquated way (<table>s! really!) but that’s perhaps not a fair shake. 2 years ago Kevin Mandeville talked about how he used CSS grid (not kidding) in an email:

Our Apple Mail audience at Litmus is approximately 30%, so a good portion of our subscriber base is able to see the grid desktop layout.

Where CSS Grid isn’t supported (and for device/window widths of less than 850 pixels), we fell back to a one-column layout.

Just like websites, right? They don’t have to look the same everywhere, as long as the experience is acceptable everywhere.

Rémi announces the new site:

… we have more than 50 HTML and CSS features tested across 25 emails clients. And we’ve got a lot more coming up in the following weeks and months.

We’re also delighted to present the Email Client Support Scoreboard. For the first time in history, we provide an objective ranking of email clients based on their support for HTML and CSS features.

Interested in grid support? They got it. The data is tucked into Front Matter in Markdown files in the repo.

Direct Link to ArticlePermalink

The post caniemail.com appeared first on CSS-Tricks.

Where should “Subscribe to Podcast” link to?

For a while, iTunes was the big dog in podcasting, so if you linked “Subscribe to Podcast” to like:


…that would make sense. It’s a web URL anyway, so it will work for anyone and has information about the podcast, as well as a list of recent shows you can even listen to right there. For Apple folks, you might be redirected in-app (mobile) or it becomes one click away (desktop). But for folks on Android or Linux or Windows or something, that’s not particularly useful.

What are the other possibilities?

Podcasts are essentially dressed up RSS, so giving people a link to the feed isn’t out of the question. We do that on both ShopTalk and CodePen Radio:

I like PocketCasts for my podcasts. I feel like this used to be more obvious, but pasting in an RSS link to search does seem to find the feeds.

I would think (and hope!) that most podcast apps have some way to subscribe manually via feed. But… pretty nerdy and probably a little too dangerous for just a “Subscribe to Podcast” link.

For Android specifically, there is a site where you can put your feed URL after “subscribeonandroid.com” and get a special page just for that:


They say:

If the listener has a one click supported app on their android device, the App will load automatically.

And clearly there are some options:

I find the most common option on podcasts is to link to a soup of popular options:

I think that’s probably a safe thing to do. For one, it signals that you’re on top of your game a bit and that your show is working on major platforms. But more importantly, podcast listeners probably know what platform they mainly use and clicking on a link specifically for that platform is probably quite natural.

Speaking of major platforms, Spotify is going big on podcasts, so linking directly to Spotify probably isn’t the worst choice you could make.


But there are situations where you only get one link. Instagram is notable for this. No links on posts — only the one link on your profile. You could send them to your website, but of course, with podcasts, the name of the game is making it easy to subscribe. That means getting people right there is best. But also with stuff like tweets, you can’t always deliver a smorgasbord of links. Hence the title of this blog post. If you gotta link to just one place to subscribe, where should it be?

Looks like that’s what Plink does.

Here’s ShopTalk: https://plnk.to/shoptalk

Visiting on desktop gets you the smorgasbord of links. Visiting on my iPhone, I get a direct link to Apple Podcasts.

That’s what they do:

Auto-open installed Podcast Apps native to listener’s iOS, Android, and other mobile and smart watch devices. Each smart link also has a Show Page that desktop users will see with links to that show in Apps like Apple & Google Podcasts, Spotify, Stitcher, Overcast, and other podcatchers.

They apparently use all kinds of data to figure it out.

… will detect the listener’s device, geo, and other factors and send them to your show in pre-installed podcast apps.

Anybody can make a redirect link to particular platforms. Like, we could have built shoptalkshow.com/spotify and shoptalkshow.com/itunes and redirected to those places, but what you get here is fancy auto-detection in a single link.

I signed up for it for ShopTalk, so we’ll see if we end up using it much or not.

The post Where should “Subscribe to Podcast” link to? appeared first on CSS-Tricks.

Meditations on Snowflakes

Born in December 1571 in southwest Germany, Johannes Kepler would go on to become one of the greatest observational astronomers of all time. He would also write books that forever changed our view of the cosmos. He is best known for his three laws of planetary motion that describe the motion of planets around the […]

The post Meditations on Snowflakes appeared first on I Love Typography.

Ghost Buttons with Directional Awareness in CSS

It would surprise me if you’d never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.

Here’s a basic starter for a ghost button:

See the Pen
Basic Ghost Button 👻
by Jhey (@jh3y)
on CodePen.

In most cases, the background-color has a transition to a solid color. There are designs out there where the button might fill from left to right, top to bottom, etc., for some visual flair. For example, here’s left-to-right:

See the Pen
Directional filling Ghost Button 👻
by Jhey (@jh3y)
on CodePen.

There’s a UX nitpick here. It feels off if you hover against the fill. Consider this example. The button fills from the left while you hover from the right.

Hover feels off 👎

It is better if the button fills from our initial hover point.

Hover feels good 👍

So, how can we give the button directional awareness? Your initial instinct might be to reach for a JavaScript solution, but we can create something with CSS and a little extra markup instead.

For those in camp TL;DR, here are some pure CSS ghost buttons with directional awareness!

See the Pen
Pure CSS Ghost Buttons w/ Directional Awareness ✨👻😎
by Jhey (@jh3y)
on CodePen.

Let’s build this thing step by step. All the code is available in this CodePen collection.

Creating a foundation

Let’s start by creating the foundations of our ghost button. The markup is straightforward.


Our CSS implementation will leverage CSS custom properties. These make maintenance easier. They also make for simple customization via inline properties.

button { --borderWidth: 5; --boxShadowDepth: 8; --buttonColor: #f00; --fontSize: 3; --horizontalPadding: 16; --verticalPadding: 8; background: transparent; border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888; color: var(--buttonColor); cursor: pointer; font-size: calc(var(--fontSize) * 1rem); font-weight: bold; outline: transparent; padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); transition: box-shadow 0.15s ease;
} button:hover { box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
} button:active { box-shadow: 0 0 0 #888;

Putting it all together gives us this:

See the Pen
Ghost Button Foundation 👻
by Jhey (@jh3y)
on CodePen.

Great! We have a button and a hover effect, but no fill to go with it. Let’s do that next.

Adding a fill

To do this, we create elements that show the filled state of our ghost button. The trick is to clip those elements with clip-path and hide them. We can reveal them when we hover over the button by transitioning the clip-path.

Child element with a 50% clip

They must line up with the parent button. Our CSS variables will help a lot here.

At first thought, we could have reached for pseudo-elements. There won’t be enough pseudo-elements for every direction though. They will also interfere with accessibility… but more on this later.

Let’s start by adding a basic fill from left to right on hover. First, let’s add a span. That span will need the same text content as the button.

<button>Boo! <span>Boo!</span>

Now we need to line our span up with the button. Our CSS variables will do the heavy lifting here.

button span { background: var(--buttonColor); border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); bottom: calc(var(--borderWidth) * -1px); color: var(--bg, #fafafa); left: calc(var(--borderWidth) * -1px); padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); position: absolute; right: calc(var(--borderWidth) * -1px); top: calc(var(--borderWidth) * -1px);

Finally, we clip the span out of view and add a rule that will reveal it on hover by updating the clip. Defining a transition will give it that cherry on top.

button span { --clip: inset(0 100% 0 0); -webkit-clip-path: var(--clip); clip-path: var(--clip); transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease; // ...Remaining div styles
} button:hover span { --clip: inset(0 0 0 0);

See the Pen
Ghost Button w/ LTR fill 👻
by Jhey (@jh3y)
on CodePen.

Adding directional awareness

So, how might we add directional awareness? We need four elements. Each element will be responsible for detecting a hover entry point. With clip-path, we can split the button area into four segments.

Four :hover segments

Let’s add four spans to a button and position them to fill the button.

<button> Boo! <span></span> <span></span> <span></span> <span></span>
button span { background: var(--bg); bottom: calc(var(--borderWidth) * -1px); -webkit-clip-path: var(--clip); clip-path: var(--clip); left: calc(var(--borderWidth) * -1px); opacity: 0.5; position: absolute; right: calc(var(--borderWidth) * -1px); top: calc(var(--borderWidth) * -1px); z-index: 1;

We can target each element and assign a clip and color with CSS variables.

button span:nth-of-type(1) { --bg: #00f; --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
button span:nth-of-type(2) { --bg: #f00; --clip: polygon(100% 0, 100% 100%, 50% 50%);
button span:nth-of-type(3) { --bg: #008000; --clip: polygon(0 100%, 100% 100%, 50% 50%);
button span:nth-of-type(4) { --bg: #800080; --clip: polygon(0 0, 0 100%, 50% 50%);

Cool. To test this, let’s change the opacity on hover.

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover { opacity: 1;
So close

Uh-oh. There’s an issue here. If we enter and hover one segment but then hover over another, the fill direction would change. That’s going to look off. To fix this, we can set a z-index and clip-path on hover so that a segment fills the space.

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover { --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; z-index: 2;

See the Pen
Pure CSS Directional Awareness w/ clip-path 👻
by Jhey (@jh3y)
on CodePen.

Putting it all together

We know how to create the fill animation, and we know how to detect direction. How can we put the two together? Use the sibling combinator!

Doing so means when we hover a directional segment, we can reveal a particular fill element.

First, let’s update the markup.

<button> Boo! <span></span> <span></span> <span></span> <span></span> <b>Boo!</b> <b>Boo!</b> <b>Boo!</b> <b>Boo!</b>

Now, we can update the CSS. Referring to our left-to-right fill, we can reuse the styling. We only need to set a specific clip-path for each element. I’ve approached the ordering the same as some property values. The first child is top, the second is right, and so on.

button b:nth-of-type(1) { --clip: inset(0 0 100% 0);
button b:nth-of-type(2) { --clip: inset(0 0 0 100%);
button b:nth-of-type(3) { --clip: inset(100% 0 0 0);
button b:nth-of-type(4) { --clip: inset(0 100% 0 0);

The last piece is to update the clip-path for the relevant element when hovering the paired segment.

button span:nth-of-type(1):hover ~ b:nth-of-type(1),
button span:nth-of-type(2):hover ~ b:nth-of-type(2),
button span:nth-of-type(3):hover ~ b:nth-of-type(3),
button span:nth-of-type(4):hover ~ b:nth-of-type(4) { --clip: inset(0 0 0 0);

Tada! We have a pure CSS ghost button with directional awareness.

See the Pen
Pure CSS Ghost Button w/ Directional Awareness 👻
by Jhey (@jh3y)
on CodePen.


In its current state, the button isn’t accessible.

The extra markup is read by VoiceOver.

Those extra elements aren’t helping much as a screen reader will repeat the content four times. We need to hide those elements from a screen reader.

<button> Boo! <span></span> <span></span> <span></span> <span></span> <b aria-hidden="true">Boo!</b> <b aria-hidden="true">Boo!</b> <b aria-hidden="true">Boo!</b> <b aria-hidden="true">Boo!</b>

No more repeated content.

See the Pen
Accessible Pure CSS Ghost Button w/ Directional Awareness 👻
by Jhey (@jh3y)
on CodePen.

That’s it!

With a little extra markup and some CSS trickery, we can create ghost buttons with directional awareness. Use a preprocessor or put together a component in your app and you won’t need to write out all the HTML, too.

Here’s a demo making use of inline CSS variables to control the button color.

See the Pen
Pure CSS Ghost Buttons w/ Directional Awareness ✨👻😎
by Jhey (@jh3y)
on CodePen.

The post Ghost Buttons with Directional Awareness in CSS appeared first on CSS-Tricks.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google