Tag : CSS

- 128 Articles -

CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

Read Article

CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

新たなデザイントレンドとして特に海外では去年の年末ぐらいから注目されているNeumorphism(ニューモーフィズム)を取り入れたデモを、CodePenで公開されている中からいくつか紹介します。実装・デザイン時のポイントとなるシャドウの使い方はもちろん、ボタンならhover時とactive時、フィールドならfocus時といったようにデモによってはユーザーの行動に応じて見栄えを変化させているものもあ…

  • Tips
CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法

Read Article

CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法

ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。1行・複数行関係なく使えるアニメーション付きアンダーライン(下線)を実装したい場合は、以下のように`linear-gradient()`と`background-size`を組み合わせること…

  • Tips
イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

Read Article

イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル

要望があってサンプルとしていくつか作ってみたのをシェアします。パッと見は1枚のイメージなのですが、そこにホバーすると複数枚のイメージがあるように見せるアニメーションをCSSで実装したものです。リンク先でイメージが複数枚あるとかクリックすると複数枚表示するイメージモーダル(ライトボックス)が開くのを伝えたいときに使えるかと思います。

  • Tips
CSS Snippets #7

Read Article

CSS Snippets #7

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという…

  • Tips
CodePenで公開されている、CSSを使ってIsometric(アイソメトリック)な見栄えを実装したデモ 15

Read Article

CodePenで公開されている、CSSを使ってIsometric(アイソメトリック)な見栄えを実装したデモ 15

CSSを使って要素を斜め上から見ているようなIsometric(アイソメトリック)な見栄えを実装しているデモをCodePenで公開されているものから紹介します。基本的にこのような見栄えを実装したいときによく使われる`transform`の`rotateX()`と`rotateZ()`を組み合わせたもので、そこに+αを加えて見栄えや動きを作っている感じです。

  • Tips
CSS:ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10

Read Article

CSS:ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10

自分用に一覧化したものがほしくて作ったのでシェアします。ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。

  • Tips

Close the search window,
please press close button or esc key.