タグ

2020年2月4日のブックマーク (2件)

  • 最近注目されているニューモーフィズムの繊細なデザインでつくられたフォーム -Neomorphic Form

    ニューモーフィズム(Neuomorphism)が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。 このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。 Neomorphic Form ニューモーフィズムとは ニューモーフィズムの繊細なデザインでつくられたフォーム ニューモーフィズムのデモ ニューモーフィズムとは ニューモーフィズム(Neuomorphism)という言葉は、UIのトレンドで「新しいスキューモーフィズム」としてJason Kelleyがコメントした「Neuomorphism?」がその起源です。 その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズム

    最近注目されているニューモーフィズムの繊細なデザインでつくられたフォーム -Neomorphic Form
  • WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技

    マージンを片側に与えるのではなく、アイテム間に4remのギャップを確保するように実装すると期待通りに配置できます。 See the Pen Using min margins by Cyd Stumpel (@Sidstumple) on CodePen. クリック可能領域を広げるテクニック これについては以前にも説明しましたが、アンカータグ(<a>)に::beforeのような疑似要素を加えると、親のクリック機能を継承するため、クリック可能領域を広げることができます。 クリック可能領域の参照として使用する要素には、position: relative;を必ず追加してください。 下記のデモでは、.list-item全体にposition: relative;を、疑似要素にposition: absolute;を使用し、top, left, right, bottomを0またはwidth: 1

    WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技
    bleu-bleut
    bleu-bleut 2020/02/04
    3. クリック可能領域を広げるテクニック。