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

transition（時間的変化をつける）

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

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

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

text-shadow（テキストに影をつける）

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

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

HTML構造

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

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

サンプルとCSS

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

#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;
}

---

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

#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を設定しないと、影が下に伸びます。飛び出す感じにするためにしたいので設定しています。

#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っぽくしています。

#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);
}

---

テキストが分裂します。

#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);
}

---

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

#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;
}

---

燃え上がってます。

#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を使ったロゴとして紹介したものもありますが、今回の使い方の方が実用的かなと思います。