blog
Recently I played through Hypnospace Outlaw and thought some of the effects in that game were fascinating, especially the animated outline effect when you hover a link.
I'm using a similar effect for my own special links, so I spent some time trying my best to replicate the actual ones from the game (at 3x scale):
Outline style 1
This one is most similar to how they look ingame, although it's not exactly perfect. I'm using border-radius for fixing shadow overlap, which isn't pixel perfect. It might be possible to use SVG masks for the corners, but I haven't done that here.
Outline style 1 (simplified)
Here's simplified version of the first style, removing the fixed corners in order to make the css a bit smaller. It also only uses ::after, leaving ::before available for other effects and functionality. It's not as accurate to the game, but takes up less space and still looks pretty good. This one works better over images.
Update: I didn't realise this second style existed until I went and replayed the game. This long slow outline appears on links in hub areas!!
Outline style 2 (used in hubs)
CSS to use these on your own site is here:
hypnospace-outline.css
@keyframes border-dance {
0% {
background-position: left top, right bottom, left bottom, right top;
}
100% {
background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
}
}
@keyframes border-dance-2 {
0% {
background-position: left top, right bottom, left bottom, right top;
}
100% {
background-position: left 48px top, right 48px bottom, left bottom 48px, right top 48px;
}
}
.outline-style-1a {
position: relative;
overflow: visible;
padding: 6px 3px 3px 6px;
margin-left: 3px;
margin-bottom: 3px;
}
.outline-style-1a:hover::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 15px;
background-image: linear-gradient(90deg, #9ac7f5 50%, transparent 50%),
linear-gradient(90deg, #9ac7f5 50%, transparent 50%),
linear-gradient(0deg, #9ac7f5 50%, transparent 50%),
linear-gradient(0deg, #9ac7f5 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
animation: border-dance 0.8s infinite steps(5);
filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
}
.outline-style-1a:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, #9ac7f5 3px, transparent 3px) 0 0,
linear-gradient(to right, #9ac7f5 3px, transparent 3px) 0 calc(100% - 3px),
linear-gradient(to left, #9ac7f5 3px, transparent 3px) calc(100% - 3px) 0,
linear-gradient(to left, #9ac7f5 3px, transparent 3px) calc(100% - 3px) calc(100% - 3px),
linear-gradient(to bottom, #9ac7f5 3px, transparent 3px) 0 0,
linear-gradient(to bottom, #9ac7f5 3px, transparent 3px) calc(100% - 3px) 0,
linear-gradient(to top, #9ac7f5 3px, transparent 3px) 0 calc(100% - 3px),
linear-gradient(to top, #9ac7f5 3px, transparent 3px) calc(100% - 3px) calc(100% - 3px),
linear-gradient(to right, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 3px 6px,
linear-gradient(to left, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 100% 3px,
linear-gradient(to left, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 100% 100%,
linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 3px 3px,
linear-gradient(to top, rgba(0, 0, 0, 0.5) 3px, transparent 3px) 3px 100%,
linear-gradient(to top, rgba(0, 0, 0, 0.5) 3px, transparent 3px) calc(100% - 3px) 100%;
background-repeat: no-repeat;
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px,
6px 6px, 6px 6px, 6px 3px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 3px 6px;
right: -3px;
bottom: -3px;
}
.outline-style-1b {
position: relative;
padding-top: 3px;
padding-left: 3px;
margin-top: -3px;
margin-left: -3px;
overflow: visible;
}
.outline-style-1b:hover::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(90deg, #9ac7f5 50%, transparent 50%),
linear-gradient(90deg, #9ac7f5 50%, transparent 50%),
linear-gradient(0deg, #9ac7f5 50%, transparent 50%),
linear-gradient(0deg, #9ac7f5 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
animation: border-dance 0.8s infinite steps(5);
filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.4));
}
.outline-style-2 {
position: relative;
overflow: visible;
padding: 6px 3px 3px 6px;
margin-left: 3px;
margin-bottom: 3px;
}
.outline-style-2:hover::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(90deg, #bdc7da 87.5%, transparent 12.5%),
linear-gradient(90deg, #bdc7da 87.5%, transparent 12.5%),
linear-gradient(0deg, #bdc7da 87.5%, transparent 12.5%),
linear-gradient(0deg, #bdc7da 87.5%, transparent 12.5%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 48px 3px, 48px 3px, 3px 48px, 3px 48px;
animation: border-dance-2 3s infinite steps(16);
filter: drop-shadow(3px 3px 0 rgba(62, 65, 71, 0.5));
}
These are available under CC0 1.0, which means they're dedicated to the public domain and freely available to use for your own projects!! Go and make the web beautiful ૮꒰ ˶• ༝ •˶꒱ა