Sliding Borders

  • Published

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%