|
![](/i/fill.gif) |
Orchid XP v8 wrote:
> http://wordpress.org/extend/themes/piano-black
>
> Now, if I can just figure out how it works...
The way it works is rather surprising.
There's a 5x5 pixel image that consists of grey with a black stripe
across it. This is tiled to form the stripey background.
There is an image named "top". This is the black slab with the rounded
corners and the drop shadow. The bit that the page title appears on top of.
Yes, that's right. Somehow they put text ON TOP OF an image. Not only
that, but somehow they put one image ON TOP OF another image, WITH
TRANSPARENCY. I have no idea how that's possible.
There's also an image that's blue in the center, and fades to
transparent towards the edges. This is somehow displayed ON TOP OF the
background image to generate the blue glow at the top of the page.
Then there's an image that's 2 pixels tall, just consisting of various
shades of grey. This is what generates the two-tone grey for the body
text and the sidebar. But it's TRANSPARENT, showing the stripe texture
through from below. (And also the blue glow.) And it has a drop shadow
at each end, which also blends through.
Finally, there's a "bottom" image, which implements the semicircular
bottom of the page. (You can just about make out where the edge of the
sidebar doesn't line up perfectly.)
In a similar way, there are a pair of "top" and "bottom" images
containing a black bar with a curved end; this is what implements the
black markers at the bottom of each post, where it tells you the number
of comments, etc. (This also explains why the curve isn't quite right.
You can also see a glitch in the dotted line where the two halves of the
image meet.)
Last time I checked, there are two ways to put an image into a web page.
You can use the IMG tag, which inserts an image in amoungst the text.
(But you cannot put anything over the top of this image.) Alternatively,
you can set the page background image, which is obviously behind
*everything*. That means you can put things over the top of it.
That gives you two ways to build a page like this:
1. Draw the entire page, with all the borders and lines you want, and
then use CSS to position the text into the spaces in the graphic. (This
means the page must be a fixed size, since the background graphics have
been drawn at a fixed size.)
2. Draw the entire page, and chop it into pieces. Use IMG tags to insert
each piece of the frame around the outside of the text, keeping the text
inside the frames. If you want the text itself to have a background,
things get tricky. But by using a repeating pattern, you might be able
to make the page semi-resizable.
This theme uses neither approach. Somehow it manages to combine multiple
layers of semitransparent images *at the client end* to produce the
final page. I have still to discover how that's possible. (Not to
mention how the hell you line all the text up nicely...) The fact that
the CSS code is litered with properties I've never even heard of is
probably the first clue. Unfortunately, it's not very readable in there...
(I have to find out what tags and classes exist in the HTML and what
they contain, then see where they end up on the rendered page, and then
see what CSS is applied to them, and lookup what images are being
referenced, and then see the JavaScript that's manipulating them, and...)
Post a reply to this message
|
![](/i/fill.gif) |