Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw
Created October 16, 2013 08:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rileyjshaw/7004693 to your computer and use it in GitHub Desktop.
Save rileyjshaw/7004693 to your computer and use it in GitHub Desktop.
A Pen by Riley Shaw.
- for i in 1..8 do
div
p tomato

Stripey text

A very hack way of putting stripes on your text. Make sure to update the stripe # in both the markup (1..8) and the styles ($steps).

A Pen by Riley Shaw on CodePen.

License.

@import "compass"
$size: 300px
$stripes: 8
$stripe-height: $size / $stripes
$color: #00ffff
body
margin: 0
background: $color / $stripes * (ceil($stripes / 2) + 1)
div
height: $stripe-height
overflow: hidden
p
text-align: center
font-size: $size
line-height: 1em
font-weight: bold
@for $n from 1 through $stripes
div:nth-child(#{$n})
p
margin-top: -$stripe-height * ($n - 1)
color: $color / $stripes * $n
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment