Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Inline Decoration

HTML

<h1>Inline Decoration</h1>

<div>You can use Inline Decoration to do the following:

<ul>

<li>Insert colored<span class="deco-solid"> </span> decoration.</li>

<li>Insert patterned<span class="deco-groove"> </span> decoration.</li>

<li>Insert imaged<span class="deco-spear"> </span> decoration.</li>

</ul>

</div>

CSS

div { font-size:18px; }

.deco-solid { padding-left:40px;

font-size:0.4em; vertical-align:middle; line-height:24px;

margin-left:3px; margin-right:-15px;

background-color:gold; }

.deco-groove { padding-left:10px;

font-size:0.4em; vertical-align:middle; line-height:24px;

border-left:20px groove black; border-right:20px ridge black;

margin-left:3px; margin-right:3px;

background-color:lightgray; }

.deco-spear { padding-left:100px;

font-size:1em; vertical-align:-3px; line-height:24px;

margin-left:3px; margin-right:3px;

background-image:url("spear.jpg"); background-position:top right; }