(番外編)簡単htmlで装飾の仕方を教えてます

HTML装飾方法

↑これの使い方を教えたいとたいと思います

html

 

<div style="background: #ffccd5; background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px;   font-size: 100%; padding: 20px;"> HTML装飾方法</div>

これをコピペすると上のタイトルになります。

 

html装飾その2

html

 

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> html装飾その2 </div>

 

＊タイトル

ここに本文を入れます♪

html

 

<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#ffc0c0;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">＊タイトル</div><div style="background:rgba(255,255,255,0);border:solid 3px #ffc0c0;border-radius:0 5px 5px;padding:20px;font-size: 100%;">ここに本文を入れます♪</div>

 

これを使うととても便利になることだと思います

 

にほんブログ村