久しぶりのcssネタです。 今回はcss3から追加されたtext-shadowを使って、画像を使わずにタイトルなどに使えそうな文字デザインを学んでみたいと思います。 遊んでみよう text-shadowはcss3で追加されたプロパティです。 記述方法は下記の通りです。 text-shadow : 5px 10x 15px #666; 左から横方向へのズレ、縦方向へのズレ、ボカシ度合い、影の色を指定します。 *1横方向は右がプラス、左がマイナスです。 *2縦方向は下がプラス、上がマイナスです。 #text-shadowの指定方法 text-shadow : [横方向] [縦方向] [ボカシ具合] [色]; 下準備 ベースとなるhtmlとcssを準備します。 webフォントを利用していますが、必須ではありません。 <!DOCTYPE html> <html lang="ja-JP"> <hea
![CSS3のtext-shadowで色々な文字デザインを試してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/108965a64a2d25376b18b4acb71dad7a7bd1ae1e/height=288;version=1;width=512/http%3A%2F%2Ffrogegg.jp%2Fwp-content%2Fuploads%2F2014%2F04%2Ftext-shadow1.png)