タグ

2017年1月17日のブックマーク (2件)

  • iOS風すりガラスだけじゃない!backdrop-filterのすごいCSS実装アイデア

    iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか? ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を取り上げます。 デモを含め、記事中のすべての画像の出典はPixabay.comです。 Backdrop-filterは従来のfilterプロパティとは別物 CSSフィルターのことは、よく知っているでしょう。おさらいをするなら『Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい』がおすすめの記事です。 従来のfilterプロパティは指定した要素にぼかし(blur

    iOS風すりガラスだけじゃない!backdrop-filterのすごいCSS実装アイデア
  • ロード時のスピナーとプログレスバー、どう使い分ける?

    お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じように、ユーザーは長い間スクリーン上のスピナー(通信やローディング時にくるくる回るアニメーション表示の)を見ていると、このような心理状況に陥ります。 スピナーは時間のかかる処理には適さない スピナーは、その処理が終わるまでどのくらいの時間を要するのかをユーザーに伝えません。長時間の処理にスピナーを使うと、最終的にユーザーはアプリに何か問題が起こったのではないかと疑問に思うでしょう。フィードバック無しでは不確実性が生じ、ユーザーは最悪の場合を想定することになります。 ユーザーは読み込みに時間がかかるだろうと考え、待つ気をなくすのです。そしてしびれを切らして、戻るボタンを押したり、またはアプリを終了したりするでしょう。 4秒ルール ユーザーをア

    ロード時のスピナーとプログレスバー、どう使い分ける?
    noisegate
    noisegate 2017/01/17
    微妙すぎる。時間じゃないよ。