CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

Read More

CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。

  • Posted on
  • Tips
CSSとテキストで実装するローディングアニメーションのサンプルコード

Read More

CSSとテキストで実装するローディングアニメーションのサンプルコード

CSSとテキストで実装したローディングアニメーションのサンプルです。サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。

  • Posted on
  • Tips
CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

Read More

CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。いずれも目新しい感じのものではないのですが、ひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。

  • Posted on
  • Tips
Sass:cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

Read More

Sass:cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

CSSでイージングを使用する際、`ease`や`linear`の場合はそのままその名前を値に記述すればいいですが、例えば`easeOutCubic`や`easeOutExpo`といったイージングを使用したいときは`cubic-bezier`を用いて記述する必要があります。ただ、それぞれどのような数値になるかいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので変数化してみた備忘録です。

  • Posted on
  • Tips
Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット

Read More

Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries(メディアクエリ)を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。

  • Posted on
  • Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。