サイト内検索

...タグ・小技・etc...

文字を重ねる

line-height・letter-spacingを指定

[サンプル]

line-height:40%;を指定します。
かさなる文字
かさなる文字
文字のサイズを変えてline-height:20%;・letter-spacingを指定します。
重なる文字
重なる文字
背景色を指定
重なる文字
重なる文字
WEB OKANOs Customize」を参照させて頂きました。

サンプルのソース

[headの中]

<style type="text/css">
<!--
.sample1{
line-height:40% ;

.sample2{
color:#d8511a; font-size:60px;
}
.sample3{
color:#ffa500; font-size:58px;
}
.sample4{
line-height:20%; padding-bottom:40px;
}
.sample5{
color:#d8511a; font-size:60px; font-weight: bolder;
}
.sample6{
letter-spacing:2.8px; color:#ffa500; font-size:58px; font-weight: bolder;
}
.sample7{
line-height: 40%;
background-color: #ffff8e;
padding:30px 260px 30px 30px;
}
.sample8{
color: #d8511a; font-size: 30px;
}
.sample9{
color:#ffa500; font-size: 28px;
}
-->
</style>

[bodyの中]

「line-height:40%;」を指定
<div class="sample1">
<span class="sample2">かさなる文字</span>
<br />
<span class="sample3">かさなる文字</span>
</div>

文字のサイズを変えて「line-height:7%;」・「letter-spacing」を指定

<div class="sample4">
<span class="sample5">重なる文字</span>
<br />
<span class="sample6">重なる文字</span>
</div>

背景色を指定

<div class="sample7">
<span class="sample8">重なる文字</span>
<br />
<span class="sample9">重なる文字</span>
</div>

Copyright c 2007.10.01 luc All rights reserved.