Jun.25th,2021
“fade()”関数
“fade()”関数は要素に収まらず切り取られるコンテンツに適用されるフェード効果の範囲を指定する関数です。“text-overflow”プロパティの値として使用することができます。
引数は“<percentage>”値、もしくは“<length>”値として記述します。
fade(〚フェード効果の範囲〛)
フェード効果はコンテンツが切り取られる端で完全に透明になるように指定された長さに適用されます。引数が“<percentage>”値である場合には行の長さを“100%”としてフェード効果を適用される範囲を指定します。
与えられた引数が行の長さよりも長い場合には“fade(100%)”とした場合と同じように扱われます。
使用例
“<length>”値
.width-fade-50px { width: fade(50px);}
.width-fade-100px { width: fade(100px);}
.width-fade-200px { width: fade(200px);}
.width-fade-300px { width: fade(300px);}
<p class="fade-50px">
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p class="fade-100px">
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p class="fade-200px">
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p class="fade-300px">
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
“<percentage>”値
.width-fade-25p { width: fade(25%);}
.width-fade-50p { width: fade(50%);}
.width-fade-75p { width: fade(75%);}
.width-fade-100p { width: fade(100%);}
<p class="fade-25p">
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>
<p class="fade-50p">
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
</p>
<p class="fade-75p">
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
</p>
<p class="fade-100p">
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
</p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
