BreathTake/ホームページ作成の小技・CSS篇

*
ホームページ作成の小技タイトル・CSS篇・イメージ写真
CSSの小技 文字の影付き

CSSの小技 文字の影付き 見本

TENTEN TENTEN

■文字の位置(画像の下端位置からの距離) :
■文字の位置(画像の左端位置からの距離) :

写真サイズ … 幅 600px 高さ 400px : 文字サイズ … 幅 90px 高さ 40px
左・上に移動させるにはマイナスを入力してください

CSSの小技 文字の影付き プログラムソース

<STYLE TYPE = "text/css">
<!--
.caption01_box {
   position : relative;#相対配置
   top : -395px;
   left : -85px;

   position : absolute;にすると、絶対配置となります

   border-style : solid;
   border-color : powderblue;
   border-width : 1px;
   font-family : impact;
   font-size : 30px;
   color : red;
}

.caption02_box {
   position : relative;#相対配置
   top : -390px;
   left : 15px;

   position : absolute;にすると、絶対配置となります

   border-style : solid;
   border-color : powderblue;
   border-width : 1px;
   font-family : impact;
   font-size : 30px;
   color : black;
}

.pic_box {
   border-style : solid;
   border-color : powderblue;
   border-width : 1px;
   position : relative;
   top : 10px;
   left : 10px;
}
-->
</STYLE>

<IMG CLASS = "pic_box" SRC="cat.jpg">
<SPAN CLASS = "caption01_box">TENTEN</SPAN>
<SPAN CLASS = "caption02_box">TENTEN</SPAN>

Copyright © 2011 BreathTake All Rights Reserved