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

2014-10-28 /Development #CSS 2 users

この記事は最終更新日から10年以上経過しています。

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 &gt; 1
    &amp;:before
      content: ''
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: $p
      background: $c
  &amp;: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達を整理しないと…