It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient.… Read article “Excluding Emojis From Transparent Text Clipping”
Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead, and fortunately, it works with text that breaks across multiple lines as well. … Read article “A CSS-only, animated, wrapping underline”
I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text.
But maybe there’s something else at play. Maybe it’s less an issue with the pattern than the implementation of it. That led me to believe that this … Read article “Block Links: The Search for a Perfect Solution”
… Read article “The Contrast Triangle”Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have some body copy, but you notice that the links inside the body copy are missing underlines.
You are now in The Contrast Triangle.
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.
In fact, you can find one right here on CSS-Tricks if you crack DevTools open.… Read article “How to Create a “Skip to Content” Link”
As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target. … Read article “Block Links Are a Pain (and Maybe Just a Bad Idea)”
Evert Pot:
Unfortunately, when setting a new color (e.g.
a { color: #44F }) the ‘purple visited link’ feature also gets disabled. I think this is a shame, as there’s so many instances where you’re going through a list of links and want to see what you’ve seen before.The 2 examples I ran into today were:
• AWS Cloudwatch Logs
• Stackoverflow search results
I like those use cases. My take is that :visited is perhaps a bit … Read article “Use a:visited in your CSS stylesheet”
Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.… Read article “4 Ways to Animate the Color of a Text Link on Hover”
The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That’s totally fine, until you have a position: fixed; header at the top of the page obscuring the header you’re trying to link to!
Fixed headers have a nasty habit of hiding the element you’re trying to link to. … Read article “Fixed Headers and Jump Links? The Solution is scroll-margin-top”
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
