タグ

あとで読むとblurに関するnibushibuのブックマーク (1)

  • Liquid CSS!まるで液体のようなデザインを実装するCSS技

    Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です(※制限あり)。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感+高コントラストの要素にさらに background で背景色を指定します。 すると

    Liquid CSS!まるで液体のようなデザインを実装するCSS技
  • 1