JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年09月 / 08月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>10月

アクセスランキング

[ジャンルランキング]
コンピュータ
334位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
54位
アクセスランキングを見る>>

CSS3を使ってみる...text-shadow

さて、今回は、text-shadow(文字に影をつける)を使ってみたいと思います。

しかし、現時点では、IE9.0では対応していないため、Firefox3.63で実験してみたいと思います。

text-shadow 1




使い方は、スタイルシートに、
text-shadow: 縦位置(0で本文と重なる) 横位置(左に同じ) ぼかしの度合い 色;

と単位付きで指定するだけです。

↑の画像の場合は、
text-shadow: 2px 2px 2px #000000;

と指定しています。

応用すれば、
text-shadow(2).png
のようなことも可能です。



サンプルソースは、「続きを読む」からお願いします。
more...

前回と同じく、少々文字は小さいですが、頑張って解読してください。




<html>
<head>
<title>CSS3.0</title>
<style type="text/css">
.shadow{
text-shadow: 2px 2px 2px #000000;
}
</style>
</head>
<body>
<br>
<br>
<br>
<p class="shadow">テキストに影をつける</p>
</body>
</html>





<html>
<head>
<title>CSS3.0</title>
<style type="text/css">
.shadow{
text-shadow: 30px 30px 3px #0000ff ,-30px -30px 3px #ff0000 ,30px -30px 3px #00ff00 , -30px 30px 3px #ffff00;
}
</style>
</head>
<body>
<br>
<br>
<br>
<p class="shadow" style="font-size: xx-large; text-align: center; ">テキストに影をつける</p>
</body>
</html>



では。
 


 
   CSS    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

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