[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Padding、border-radiusでアイコンを作ろう。

Paddingは大変便利です。
border-radiusと組み合わせて｢アイコンのように見せる｣ために使ったりしています。
わざわざ画像作成する必要もなく、簡単にアイコンっぽく見せることができるので、ページナビとかにも使えて便利です。

※SAMPLE

ポイントとしては、
1.アイコン化したい文字をタグで囲みます。

<span class="marker1">CHECK!</span>

2.そこにCSSを適用させます。

span.marker1{
background-color:#009933;
padding:3px 7px 3px 7px;
border-radius:8px;
font-size:13px;
color:#ffffff;
}