Copying Wired's Cool URLs

31st July 2019

I wanted to improve the look of URLs on my site, so I decided to follow Wired's example. I've seen a similar style used elsewhere on the internet, and it certainly looks more slick (slicker?) than the style I was using before:

example.com

example.com

Obviously you can just use inspect element to grab these - after all, that's what I did. As always, W3Schools is an invaluable resource in explaining CSS. Rather than just copy wholesale, I wanted to actually understand what I was looking at. So on Wired, Inspect Element yields the following:

.article-body-component a {
	background-color: transparent;
	color: inherit;
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-color: currentcolor;
	transition-property: background;
	transition-duration: 0.15s;
	transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
	transition-delay: 0s;
	border-bottom-color: rgb(180, 231, 248);
	border-bottom-style: solid;
	border-bottom-width: 3px;
	-webkit-box-shadow: inset 0 -4px 0 #b4e7f8;
	box-shadow: inset 0 -4px 0 #b4e7f8;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
}

Looking this through on W3Schools, we have a transparent background a tag, with an underline, which also has a shadow to add that cool thicc look. We have some transitions which are a pretty nifty non-JS animation, in this case used to generate the background with a smooth flow thanks to the cubic bezier tweaks and a quick, but not too quick, transition duration.

I edited my css to use the hover function (since I assume that's how they ran it on hover and I shan't turn to JS for something within CSS's purvue), adding in the style as well as some padding to stop it hugging the words left, right, and above (balancing out the thicc underline + shadow, and a subtle rounding using border-radius:

main a {
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 3px;
        color: #0F0F0F;
        font-size: 1.2rem;
        background-color: transparent;
        /* 1 */
        -webkit-text-decoration-skip: objects;
        /* 2 */
        border-bottom-color: #9AB8D7;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
        box-shadow: inset 0 -4px 0 0 #9AB8D7;
}

main a:hover {
        border-bottom-color: #9AB8D7;
        background-color: #9AB8D7;
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-attachment: scroll;
        background-image: none;
        background-size: auto;
        background-origin: padding-box;
        background-clip: border-box;
}

Addendum:

I've since revisited this a day later, having viewed culture trip and liked the way that their links' backgrounds "scrolled up" instead of faded in and modified my code accordingly, switching to a box-shadow based transition over a background transition:

main a {
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 5px;
        color: #0F0F0F;
        font-size: 1.2rem;
        background-color: transparent;
        text-decoration: none;
        transition: box-shadow 0.15s cubic-bezier(0.33, 0.66, 0.66, 1) 0s, color 0.15s ease 0s;
        transition-property: box-shadow;
        transition-duration: 0.15s, 0.15s;
        transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1), ease;
        transition-delay: 0s, 0s;
        background-color: transparent;
        box-shadow: #9AB8D7 0px -5px 0px inset;
        word-break: break-word;
        overflow-wrap: break-word;
}

main a:hover {
        box-shadow: #9AB8D7 0px -26px inset;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 5px;
}