Use image and css to define section style

Sometimes I need to use a simple section with numbers instead of a title of some text. I found a section style very interesting from a blog. Based on html inspection, I create css codes for this type of numeric section. I use this style in this blog.

Here are what I did.

01

First, I use an image as background, a horizontal radiation or shadow line, named as css class numericSection

02

Then, I use css to draw two circles: one outer circle with light gray colour and one inner circle with grey colour, and the text colour in inner circle is white.

This the outer circle, named as css class numericSectionOuterCicle:

The inner circle, named as css class numericSectionInnerCircle, is smaller than the outer circle above:

and two are combined together:

T

03

My numeric section is a combination of above image and css classes.

1. /* Numeric Section Style */
2. div .numericSection {
3.  margin: 1.5em auto;
4.  padding-top: 0.5em;
5.  padding-bottom: 0.5em;
6.  white-space: normal;
7.  border: none;
8.  text-align: center;
9.  width: 100%;
10.  background-image: url(http://2.bp.blogspot.com/.../section.png);
11.  background-size: 100%;
12.  background-position: 50% 50%;
13.  background-repeat: no-repeat no-repeat;
14. }
16. div .numericSectionOuterCicle {
17.  width: 60px;
18.  min-height: 60px;
19.  border-radius: 50%;
20.  background: lightgray;
21.  display: inline-block;
22. }
24. div .numericSectionInnerCicle {
25.  width: 50px;
26.  min-height: 50px;
27.  margin: 5px auto;
28.  background-color: gray;
29.  color: white;
30.  font-size: 150%;
31.  line-height: 50px;
32.  border-radius: 50%;
33. }

The above css styles are added to my blogger html template. Here is an example of html for numeric section 01:

1. <div class="numericSection">
2.  <div class="numericSectionOuterCicle">
3.  <div class="numericSectionInnerCircle">
4. 01
5.  </div>
6.  </div>
7. </div>