This is the first 'theme' I designed. I call it The Long Book, as it is supposed to mimic a book, and turns out to be rather long....
It's probably not a good blog theme-the color is too bright and distracting, the layout is too rigid and the features I used are too new to make this theme work in older browsers.
The HTML mark-up is rather straight-forward:
We first apply some CSS to make it a two-column page. 'table-cell' ensures that the two column will have the same height.
To make each column look 'bookish', we then apply a horizontal gradient and a border-radius at one side of each column.
Take the left side for example:
Notice that there are three color-stops in the gradient. The gradient goes from slightly dark to light near the end, then to very dark at the end. This creates a feeling of different heights along the 'page'. The same gradient and border-radius can be applied to the right side, but with the horizontal direction inverted.
Now we can add some 'decoration' around the two sides to create a feeling of 'depth' - that there are many pages underneath - as well as to add a 'book cover' below. To do so, we can use the ::before and ::after hack.
First add a
display:relative to both #body-left and #body-right. Then apply the following CSS code:
Note that without specifying 'content', ::before will not be shown at all!
This is a 'classic' thick transparent border hack. The most basic form is the CSS triangle.
By specifying a height larger than 0 (in this case there is a distance between top and bottom), one can easily create a trapezoid. This code thus creates a darker trapezoid at the left of the left side to mimic a number of pages underneath. The larger border-top-width is a tweak to make it look more realistic.
Again, the same code can be applied to the right side, with the horizontal direction inverted.
The 'book cover' is easier - just a rounded rectangle behind each sides.
Lastly, a little bit of shadow below both sides to make the feeling of depth more realistic.
We don't use #body-left and #body-right due to the rounded corner at the side. And we use #main-body::before instead of #main-body because this allows use to shrink to size of the shadow in the vertical direction and enlarge in the horizontal direction to accommodate the 'irregular' shape of the two sides.
That's it! A simple mark-up with some fanciful CSS3 hacks. No use of images at all.
This way of styling clearly ignores the principal of Progressive Enhancement since the page look really really terrible in browsers that don't support gradient and border-radius (such as IE8 and below). It looks OK on IE9, but since IE9 doesn't support linear-gradient, the appearance is still a bit weird.
Aside from that, there seems to be a bug in both IE9 and IE10 that the absolute alignment of ::before of both sides only match the height of the contents rather than the block, thus leaving behind a piece of black shadow. Very annoying indeed!