スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS3のtransitionとtext-shadowで作る様々なリンク装飾

CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。

transition(時間的変化をつける)

hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能になります。

css3-transition.png

適応するプロパティの「all」、変化の仕方「ease」、変化の始まるタイミングの「0」は初期値となるので省略しても大丈夫です。

transitionはFirefoxとwebkit系のChromeやSafariで先行実装されている機能ですので、-moz-や-webkit-などのベンダープレフィックス付ける必要があります。

text-shadow(テキストに影をつける)

その名の通りテキストに陰を付けることができます。カンマで区切ると複数の陰をつけることができますので、うまく組み合わせると表現の幅が広がります。

css3-textshadow.png

ちなみに、text-shadowはIE以外のブラウザでは標準装備されています。

ということで、このページはFirefox、Chrome、Safariの最新バージョンでご覧ください。

HTML構造

で、HTMLはすべて以下のような構造で、CSSでそれぞれ装飾しています。

html
<div id="id-name">
  <a href="#">テキスト</a>
</div>

サンプルとCSS

オンマウスでロゴがズームします。テキストの中心でズームするようにボックスにtext-align:center;とvertical-align:middle;を指定しています。

CSS
#zoom{
  width: 100%;
  background: #000;
  vertical-align: middle;
  text-align: center;
  padding:50px 0;
}
#zoom a{
  background:#000;
  font-size: 40px;
  font-weight: bold;
  color: #777;
  text-decoration: none;
  -moz-transition: all 0.2s linear 0;
  -webkit-transition: all 0.2s linear 0;
}
#zoom a:hover{
  left: 0px;
  top: 0px;
  font-size: 50px;
  text-shadow: 1px 1px 1px #bbb;
}

このブログでも使用している、ピカッと光るエフェクトです。同じ色でぼかしの度合いが違う影を重ねています。

CSS
#lightning{
  width: 100%;
  background: #000;
  padding: 50px 0;
  text-align: center;
}
#lightning a{
  font-size: 42px;
  font-weight: bold;
  text-decoration: none;
  color: #777;
  -moz-transition: all 0.3s linear 0;
  -webkit-transition: all 0.3s linear 0;
}
#lightning a:hover{
  color:#fff;
  text-shadow:
    0px 0px 10px #FFD700,
    0px 0px 20px #FFD700,
    0px 0px 30px #FFD700,
    0px 0px 40px #FFD700,
    0px 0px 50px #FFD700,
    0px 0px 60px #FFD700;
}

同方向に影を重ねて立体感を出しています。position、top、leftを設定しないと、影が下に伸びます。飛び出す感じにするためにしたいので設定しています。

CSS
#stereoscopic{
  width: 100%;
  background: #fff0f5;
  padding: 50px 0;
  text-align: center;
}
#stereoscopic a{
  left: 10px;
  top: 10px;
  color: #ffccff;
  position: relative;
  text-shadow:
    1px 1px 0px #ff3333,
    2px 2px 0px #ff3333,
    3px 3px 0px #ff3333;
  font-size: 48px;
  font-weight: bold;
  text-decoration: none;
  -moz-transition: all 0.2s linear 0;
  -webkit-transition: all 0.2s linear 0;
}
#stereoscopic a:hover{
  left: 0px;
  top: 0px;
  text-shadow:
    1px 1px 0px #ff3333,
    2px 2px 0px #ff3333,
    3px 3px 0px #ff3333,
    4px 4px 0px #ff3333,
    5px 5px 0px #ff3333,
    6px 6px 0px #ff3333,
    7px 7px 0px #ff3333,
    8px 8px 0px #ff3333,
    9px 9px 0px #ff3333,
    10px 10px 0px #ff3333,
    11px 11px 0px #ff3333,
    12px 12px 0px #ff3333,
    13px 13px 0px #ff3333;
}

先ほどと似ていますが、こちらはRGBAカラーで透明度を使って3Dっぽくしています。

CSS
#three-d{
  width: 100%;
  background: #000;
  padding: 50px 0;
  text-align: center;
}
#three-d a{
  left: 13px;
  top: 13px;
  position: relative;
  color: rgba(0,204,255,1);
  background: #000;
  font-size: 52px;
  font-weight: bold;
  text-decoration: none;
  -moz-transition: all 0.2s linear 0;
  -webkit-transition: all 0.2s linear 0;
}
#three-d a:hover{
  left: 0px;
  top: 0px;
  color: rgba(0,255,255,.6);
  text-shadow: 1px 1px rgba(0,128,255,.5),
  2px 2px rgba(0,128,255,.5),
  3px 3px rgba(0,128,255,.5),
  4px 4px rgba(0,128,255,.5),
  5px 5px rgba(0,128,255,.5),
  6px 6px rgba(0,128,255,.5),
  7px 7px rgba(0,128,255,.5),
  8px 8px rgba(0,128,255,.5),
  9px 9px rgba(0,128,255,.5),
  10px 10px rgba(0,128,255,.5),
  11px 11px rgba(0,128,255,.5),
  12px 12px rgba(0,128,255,.5),
  13px 13px rgba(0,128,255,.5);
}

テキストが分裂します。

CSS
#css3link{
  width: 100%;
  background: #fff0f5;
  padding: 50px 0;
  text-align: center;
}
#css3link a{
  position: relative;
  color:rgba(204,0,102,.75);
  font-size: 62px;
  font-weight: bold;
  text-decoration: none;
  -moz-transition: all 0.3s linear 0;
  -webkit-transition: all 0.3s linear 0;
}

#css3link a:hover{
  left: -3px;
  top: -3px;
  color:rgba(255,0,0,.5);
  text-shadow: 6px 6px rgba(0,0,255,.5);
}

くぼんだ状態からオンマウスで浮き出します。逆もいいかも。

CSS
#letterpress{
  width: 100%;
  background: #999;
  padding: 50px 0;
  text-align: center;
}
#letterpress a{
  position: relative;
  left: 1px;
  top: 2px;
  color: #504f4f;
  background:#999;
  font-size: 60px;
  font-weight: bold;
  text-shadow: 1px 2px 1px #bbbaba;
  text-decoration: none;
  -moz-transition: all 0.2s linear 0;
  -webkit-transition: all 0.2s linear 0;
}
#letterpress a:hover{
  left: 0px;
  top: 0px;
  color: #666;
  text-shadow: 1px 2px 1px #333;
}

燃え上がってます。

CSS
#fire{
  width: 100%;
  background: #000;
  padding: 50px 0;
  text-align: center;
}
#fire a{
  text-decoration: none;
  color: #fff;
  background: #000;
  font-size: 42px;
  font-weight: bold;
  -moz-transition: all 0.2s linear 0;
  -webkit-transition: all 0.2s linear 0;
}
#fire a:hover{
  text-shadow:
    0px  0px  10px #fefcc9,
    3px -3px  15px #feec85,
   -6px -6px  20px #ffae34,
    6px -9px  25px #ec760c,
   -6px -12px 30px #cd4606,
    0px -15px 35px #973716,
    3px -18px 40px #451b0e;
}

以前にtext-shadowを使ったロゴとして紹介したものもありますが、今回の使い方の方が実用的かなと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
こんにちは
text-shadow(テキストに影をつける)
で紹介しているtext-shadowのプロパティの順番が
水平方向と垂直方向で逆になっているようですね 
【2011/05/26 12:34】 | すっぽん #- | [edit]
すっぽんさん

ご指摘ありがとうございます!
こんな初歩的なミスをしてしまうとは情けないです。。
家に帰ってから修正したいと思います。

みなさまにはご迷惑をおかけしました。
【2011/05/26 12:46】 | 管理人 #E2ywrYdA | [edit]









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。