文字が下の方で消えて行くCSS

2014-10-28 #Markup

See the Pen kemzo by u ( @is8r ) on CodePen .

最近2回程使ったのでMixinにしておいた。

=wordwrap-fadeout($h: 40px, $p: 10px, $c: #fff)
  position: relative
  overflow: hidden
  @if $p > 1
    &:before
      content: ''
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: $p
      background: $c
  &:after
    +background-image(linear-gradient(to top, rgba($c,1), rgba($c,0)))
    content: ''
    position: absolute
    bottom: $p
    left: 0
    width: 100%
    height: $h

案外力技だった。 そろそろ作り溜めた自分用Mixin達を整理しないと…

Profile
😛

石原 悠 / Yu Ishihara

デザインとプログラミングとヨーグルト作りが好きです。