CSSでポイント時のリンクをピカッと光るように装飾

お気付きの方もいるかもしれませんが、CSS3のtext-shadowを使ってタイトルのリンクにポイントを合わせると光るようにしました。

全てのリンクにするとちょっと煩わしいですがタイトルくらいなら面白いかなと思いやってみました。個人的には結構気に入ってます。

【普段はこんな感じ】 text-shadow-tittle.png

【ポイントを合わせると光ります】 text-shadow-tittle-hover.png

ま、実際試せば分かるわけなんですが、IE(Internet Explorer)はtext-shadowに対応していないのでスクリーンショットを載せてみました。

相変わらずIEに悩まされるわけですが、このブログでのIEのシェアは3割程度(ちなみに1位はFirefox)で一般的なサイトと比べてもかなり少ないと思います。

けど、さすがに無視はできないですね。私も職場ではIEを使わざるを得ない状況ですし。ってことでIEには今までどおり下線を引いてみます。

【IEで見た場合】 text-shadow-tittle-hoverIe.png

で、コードはこんな感じにすると光るものと下線にうまく振り分けられます。

#header a{
  color : #fff;
  font-size : 26px;
  font-weight : bold;
  text-decoration: none;
  color : #fff;
}

#header a:hover{
  text-shadow: 0px 0px 1px #ffffff,
      0px 0px 10px #FFD700,
      0px 0px 20px #FFD700,
      0px 0px 30px #FFD700,
      0px 0px 40px #FFD700;
  text-decoration: underline\9;
}

まず、text-shadowは以下のような仕組みになっていて、カンマで区切ると複数の陰を表示することもできます。今回は同じ色でぼかし加減が違うものをたくさん並べて光る様子を表現しています。

text-shadow2.png

次にIEのみにunderlineを適応させます。これはいたって簡単。最後に「\9」を付けるだけです。

ちなみに、今回必要ないですがIEのバージョンごとに振り分けることもできます。

#test {
 color: red; /* 初期設定 */
 color : green\9; /* IE8以下のみに適応 */
 *color : yellow; /* IE7以下に適応 */
 _color : orange; /* IE6のみに適応 */
}

CSSハックは使わないに越したことはないですが、IEがCSS3に対応しきれるのはいつになるやら分からないですし様々な場面で使わざるを得ないですね。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加