CSS3 ちょっといじってみる。 Vol.2

2011.04.30 Sat

またCSS3をちょっといじってみました。テキストに影を付けることができるtext-shadowです。

text-shadow <ドロップシャドウ>

dakkie.com

.text_shadow {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <へこみ>

dakkie.com

.text_shadow_2 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは下記のような指定の方法です。

text-shadow: 右方向へのズレ, 下方向へのズレ, ぼかし具合, 影の色;

右方向へのズレ、下方向へのズレはマイナスの値を指定すれば、左方向へのズレ、上方向へのズレになります。
また、ぼかし具合は0から値を指定することができます。値を0に指定した場合は、線のようになります。マイナスの値は指定できません。

このtext-shadowは、「,(コンマ)」で区切ることによって複数の値を指定することもできます。

text-shadow <縁取り>

dakkie.com

.text_shadow_3 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 0 -1px 0 #ffffff, 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff;
  font-size: 124%;
  color: #222222;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <立体的>

dakkie.com

.text_shadow_4 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 0 #cccccc, 2px 2px 0 #cccccc, 3px 3px 0 #333333;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <エンボス>

dakkie.com

.text_shadow_5 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 0 #ffffff, 1px 1px 0 #222222;
  font-size: 124%;
  color: #0066cc;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは、かなり使えそうですね。CSSだけである程度テキストの装飾ができてしまいます。


no comments

leave a comment




comment