Sliding Borders
This pen uses one rule set which can be inherited to create several different components with the same visual style: a subtle color changing background.
The base style stretches the colored pseudo-element to cover the entire base
element, then moves it behind with z-index
. Combined with a background color
on the base element, this creates the thin border of the code block (notice
pre
only sets a background and spacing).
Alternatively, the blockquote
and a
elements resize the pseudo-element for
other effects. This is acheived by changing the sizing options on the
::before
selector.
One thing to note is the importance of the definition of the linear-gradient
.
In order to get the image to tile properly at a 45deg angle, you need to supply
the color list as indicated—($colors, $colors, $first)
. Ending with the
first ensures that it wraps around correctly, and including two copies of the
list makes sure the ends line up when tilted.
Preview
HTML
<blockquote>
<p>This song goes out to anybody here that believes that maybe, just maybe,
we were all born with the moral obligation to leave this world a better
place than the world that we've found.</p>
<cite>Tim McIlrath</cite>
</blockquote>
<pre>
<code>
func thisIsSomeCode() bool {
return true;
}
</code>
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. You can find out
more about this topic <a href="#">here</a>. Vestibulum molestie justo
laoreet dolor finibus, et tristique ipsum elementum.</p>
Sass
\:root
--gradient-start: #ff00ff
--gradient-end: #00ffff
$size: 800px
$colors: (#ff00ff, #00ffff, #ffff00)
$first: #ff00ff
%sliding-border
position: relative
&::before
content: ''
background: linear-gradient(45deg, $colors, $colors, $first)
position: absolute
animation: sliding-border-anim 5s linear infinite
background-size: $size $size
top: -2px
bottom: -2px
left: -2px
right: -2px
z-index: -1
@keyframes sliding-border-anim
0%
background-position: 0% $size
100%
background-position: 0% 0%
p
margin: 0 0 1em
pre
@extend %sliding-border
background: #111
padding: 0 1em
margin: 1em 0 3em
blockquote
@extend %sliding-border
padding: 1em 0em 1em 3em
margin: 1em 0 3em
font-size: 1.25em
&::before
width: 1rem
cite
width: 100%
text-align: right
display: block
a
@extend %sliding-border
color: white
text-decoration: none
&:hover
color: var(--gradient-end)
&::before
height: 1px
top: 90%