sh19eのブックマーク - はてなブックマーク

ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
sh19e 2017/06/15
table

CSS
リンク
お探しのページは見つかりませんでした | mkasumi.com
普段はWebプロダクト周りのデザインをしている森田かすみの技術ブログです。Webプロダクトを改善していくにあたり、学んだことや体験したことを記録しています。
sh19e 2014/09/17
amcss

CSS

Architecture

Performance
リンク
SVGのアニメーション | mkasumi.com
CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。 SVGでアニメーションさせるには3つの方法があります。 SMILアニメーション Javascript CSSアニメーションどんなことができる？ Shape Hover Effect with SVG jQuery Rain | Border Animation Effect with SVG jQuery Rain | Circular Progress Button with SVG How to style SVG with CSS - part 2/3 | Le blog de Studio.gd hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。「SVGのアニメーショ
sh19e 2014/06/22
SVG

animation

Tutorial
リンク
1