CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld
ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS
ロゴデータやカラーコード確認など、サイト・ブログ制作時に利用する機会が多いサービスのガイドラインリンク集 - NxWorld
サイト制作時にTwitterやFacebookなどのソーシャルメディアサービスのボタンを設置する機会が多いと思いますが、それらを特に独自デザインなどで実装する場合はロゴデータが必要だったり、どのようなカラーコードを使用しているかなどを調べることがあります。 自分もそのような場合は公式からデータをもらったりカラー確認したりするのですが、毎回ググるのが面倒なのとサービスによってはすぐに該当ページを見つけられないなんてことも稀にあるので、個人的にサイトやブログ制作時によく設置・利用されると思う各種サービスのガイドラインへのリンクを一覧化しました。 サービスによってはリンク先で全ての内容を確認できないものもありますが、ほとんどがロゴデータをダウンロードすることができ、ブランドカラーなども確認できるページとなっています。 また、利用条件や禁止事項についても同ページ内に記載されているところが多いので、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
