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

2014-10-28 /Development #CSS 2 users
この記事は最終更新日から8年以上経過しています。

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達を整理しないと…

Comment
comments powered by Disqus
Profile

石原　悠 / Yu Ishihara

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

関連記事