「CSS」の記事一覧

カーソルを合わせたときにふわっと色が変わるリンク。意外と簡単にできるんです。 隠れかわいいもの好き。よっひー(@yosiakatsuki)です。 たった1行CSSを追加するだけでサイト内のリンクをふわっとさせるカスタマイズ方法を紹介します！ ふわっと変わるリンクにしてみよう！ 主にPCから見たときになりますが、リンクにカーソルを当てたとき、「ふわっと」色が変わるサイトってあるじゃないですか！ 「ふわっと」色が変わったり、大きさが変わったり、左右に動くとちょっと印象が違いますよね！ 最初はjavascriptやjQueryでアニメーションをつけるものと思ってましたが、CSSだけで簡単にできたんです！ ちょっと乱暴なカスタマイズになりますが、サイト内のリンクをふわっとさせるやり方を紹介します！ ふわっとしたリンクの作り方 transitionプロパティを使う！ ふわっとしたリンクを作りたいときに覚えておくCSSのプロパティは「transition」です！ transitionはふわっとさせるためのものだけではありませんが、簡単にふわっとしたアニメーションを作れるので、覚えておくとカスタマイズの幅が広がります！ このtransitionは4つに分けて書くことが出来るのですが、「上下左右」みたいにシンプルな別れ方をするわけじゃないので、transitionに4つ値を指定する形で覚えちゃったほうがわかりやすいと思います！ 実際に何を指定するのか。僕の覚え方を紹介します！ transitionに指定する値 僕は上の図のような覚え方をしています！ とりあえずここでは「ふわっと」させる事にフォーカスして説明してみますね！ 1つ目は「何をふわっとさせるか」です。 ここにはcolorとかbackground-colorなんかのCSSプロパティが入ります。 2つ目は「何秒かけてふわっとさせるか」です。 例えば0.5sと指定すれば0.5秒かけて文字色が赤から青に変わるみたいなアニメーションになります。 小さすぎると全然ふわっとしてくれないし、大きすぎるとなかなか変化しないなど、好みに合わせて調整が必要な部分です！ 3つ目は「どんな感じにふわっとさせるか」です。 指定できるのは次の6つ ease linear ease-in ease-out ease-in-out cubic-bezier() cubic-bezier()を使うといくつでもパターンを作れるのですが、話が難しくなるので今回は無しで！ 僕は変化の具合が一定なlinearがクセがなくていいかなぁと思って多用してます。 迷ったらlinearって感じです。デフォルトはeaseなんですけどね… 4つ目は「どれだけ遅らせてふわっとさせ始めるか」です。 ここに「2s」とか指定すると2秒遅れてからふわっとし始めます。 細かいアニメーションをさせるときは使うようになると思いますが、特別な狙いがなければ0でいいと思いますよ。 ではでは、実際にサイト内のリンクを乱暴にふわっとさせるサンプルを紹介します。 サイト内のリンクを乱暴にふわっとさせるサンプルコード サイト内のリンクを乱暴にふわっとさせるコードはこちら a { transition : all 0.5s linear 0s; } サイト内全体に適用されるaタグのスタイルにtransitionを1行足せばOKです。 サンプルでは、「何をふわっとさせるか」にallを指定しているので、何でもかんでもふわっとします！ 例えふわっとさせるつもりなかったところのリンクもふわっとするのでかなり乱暴なカスタマイズですね！ いいか悪いかは別にして、なんとなく「ふわっと」させたいと思っているならちょっと参考にしてみてください！ 参考 transitionプロパティについては次のページをいつも参考にしています。 transition－CSS3リファレンス 僕が「ふわっと」させるカスタマイズに目覚めるきっかけになったのは次のページです。 動くCSSのためのメモ。 かなりボリュームありますが色々と参考になります！ Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法posted with ヨメレバ谷 拓樹 インプレス 2014-07-24 Amazonで調べるKindleで調べる楽天ブックスで調べる アニメーションもやりすぎるとうっとおしくなるのでほどほどに！ 簡単に(そして乱暴に)ふわっとかわいいリンクにカスタマイズしてみてください！ ではまた。 [CSS]2pxのほのかな角丸でどことなくサイトを優しくする方法 レスポンシブなサイトの各横幅での表示を一気に確認できるChorme拡張機能「Emmet Re:View」が超絶便利！ ブログをスマホで表示したとき広告が切れないようにする為のWordPressの３行のコード

「CSS」の記事一覧

CSSの編集を効率化する！SASS・Compassの開発環境を構築する方法

SASS・Compassが「WEB屋じゃなくても絶対便利」だと感じる7つのポイント

[CSS]たった1行！サイト内のリンクを乱暴にふわっとかわいい感じにするカスタマイズ