Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です(※制限あり)。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感+高コントラストの要素にさらに background で背景色を指定します。 すると
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
きのう、川上量生さんというカドカワ代表取締役の人が、情報法制研究所(通称「JILIS」)に対してJILISと私に記事やツイートなど発言の削除と謝罪を求める抗議文らしきものを送付してこられた旨が、川上量生公式ブログで公表されました。 正直、私もJILISのメンバーも、川上量生さんが何の根拠で発言の削除や謝罪を求められているのか、良く分かりませんでした。 政府委員として、また、上場企業の代表取締役として、川上量生さんが公に通知している内容に対し、私が批評、意見論評を加えたのは事実です。しかしながら、仮にその私の意見が川上量生さんの意にそわなかったとしても、理由なく削除したり、川上量生さんに謝罪するべき性質のものではないからです。なんでそんなに怒ってプルプルしているのか理解できません。 理解できないので、このたび訴訟を提起しました。 差出人も、「インターネット上の海賊版対策に関する検討会議」(以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く