Slidey background

code | March 7, 2014

See the Pen Slidey Background by Katy DeCorah (@katydecorah) on CodePen.

Each box above is an anchor tag with a linear-gradient. On hover, the background-position changes to reveal the second half of the link’s gradient.

Creating the gradient

I created an even gradient for each link where the lighter color ends at 50% and the darker color starts at 50%. The gradient doesn’t repeat, but it’s twice it’s size on either the x or y axis. For example, the up (↑) link has background-size: 100% 200%. Unless I change the background-position, then the second half of the gradient will stay hidden because it’s clipped by the size of the element.

See the Pen Slidey Background: Demo 1 by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of the gradient

The demo above illustrates:

  1. The actual size of the gradient.
  2. The size of the element clips the gradient to reveal the first half of the gradient.
  3. Changing the background-position pulls the second half of the gradient into view.

Hover

On hover, I set the background-position to move 100% on the same axis that I doubled in size. For the up (↑) link, the rule is background-position: 0 100%;. The new position paired with a transition pulls the second half of the gradient into view.

Fat lip

Did you notice the lip of the darker gradient peaking in? The lip is adjustable on $start. Try changing the value. If the variable is 0, then the lip of the second half of the gradient disappears.

Thoughts

I love the sliding between the left (←) and right (→) links. It looks like they are both tugging at the same rectangle. I’ll have to hold onto this idea.

Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.