The book I am currently reading has a decorative chapter heading as shown in the image. But the book creator simply scanned the chapter heading from the paper book and inserted the image into the book. There are 132 images. Also, when using a dark or sepia theme in the ebook, the white background in the jpg file is visible.
I created a CSS/HTML version of the same heading. But I think it is a bit messy and complex. Is there a neater way to do this?
My CSS code...
Spoiler:
PHP Code:
.box1 {
margin: auto;
width: 130px;
height: 100px;
border: 1px solid gray;
background-color: gray;
box-sizing: border-box;
text-align: center;
}
.box2 {
margin: auto;
width: 130px;
height: 10px;
border: 1px solid gray;
background-color: gray;
box-sizing: border-box;
text-align: center;
}
.box3 {
margin: auto;
width: 420px;
height: 20px;
border: 1px solid black;
background-color: black;
box-sizing: border-box;
text-align: center;
}
.chapterno {
font-size: 3.0em;
font-family: sans-serif;
color: white;
line-height: 0;
margin-bottom: 25px;
text-align: center;
}
.chapterword {
font-weight: bold;
font-size: .8em;
font-family: sans-serif;
color: white;
line-height: 0;
text-transform: uppercase;
text-align: center;
}
My HTML code...
Spoiler:
PHP Code:
<p class="box2"></p>
<p class="box3"><span class="chapterword">C H A P T E R</span></p>
<div class="box1">
<p class="chapterno">99</p>
</div>