ふわふわぷかぷか

最近はイラレとAeにはまってます。

文章に合わせて背景画像を表示して、文字に縁取りをする。(吹き出しとか)

ある部分の文章に背景をつける場合。

文章の長さに合わせて背景画像の大きさが自動的に変わる方法。

吹き出しなどに便利かも?

 

html

<div class="kakudai block" style="background-image:url(背景画像.png)">
    <div class="block" style="padding:10px 20px 10px 20px">
            ここに文章を入力<br />
            改行したら、1番長い幅に合わせて画像も大きくなります<br />
    </div>
</div>

paddingを変更することで、文字の周りの空白を調節できます。

 

css

/* 背景画像を縦横比を保たずに拡大する */
.kakudai{
-moz-background-size:100% 100%;
background-size:100% 100%;
}

/* 横幅を文字幅に合わせる */
.block{
  display:inline-block;
}

こんな感じになりました。

f:id:fuwafuwapukapuka:20150131234412p:plain

背景が濃くて文字が見にくかったので、文字に縁取りをしてみました。

↓をcssに付け足しします。

.fuchidori{ 
    font-weight: bold;
    text-shadow: 1px 1px 1px #FFFFFF,
    -1px 1px 1px #FFFFFF,
    1px -1px 1px #FFFFFF,
    -1px -1px 1px #FFFFFF;
}

 htmlは、クラスだけ書き足しました。(fuchidori

<div class="kakudai block" style="background-image:url(img/babytuba/niziiro.png)">
    <div class="block fuchidori" style="padding:10px 20px 10px 20px">
            ここに文章を入力<br />
            改行したら、1番長い幅に合わせて画像も大きくなります<br />
    </div>
</div>

 文字が読みやすくなりました。

f:id:fuwafuwapukapuka:20150131234927p:plain

 

10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック

10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック