tickerTXT site re-design: the engraved header text

It shouldn't be a problem, text / font effects such as text-shadow or font-effect were defined in CSS2 , omitted in 2.1 and re-introduced in CSS3.  Unfortunately only Chrome, Safari and Konquerer are supporting text-shadow.  Firefox only from 3.1 onwards and Internet Explorer, well...

The engrave effect using the text-shadow setting would be likte this

h1 {

text-shadow: 1px 1px white, -1px -1px #333;

}

But unfortunately, the only way to make shadow, engrave, emboss effects work for everybody is to use CSS-hacks (workarounds) or javascript. Just google "CSS-hack text-shadow" and you will find some, though to us they all look mighty complicated.  Mike Matas has used a Javascript and so will we.

tickerTXT site re-design: tweaking the background of Nexus5

The first task is to tweak the background of Amanda's Nexus5 template to this striking concrete background, that Mike Matas uses in his blog.

Now Mike is using a trick to emphasize the blog header.  The top of the background image is slightly lighter and therefore subtely enhancing the blog title.  How does he do that?

At first his solution appears to be quite quite normal.  By using a normal background "repeat" variable in the CSS, the image is "tiled" and therefore covering all background surface of the page.

The clever part is to "center" and "top" the starting point.  And then an additional CSS layer is superposing on top of the normal background.  In his case, for the basic background declaration he uses a CSS "html" definition, quite unusual, but it works.  On top of which is the "body" layer.  Here Mike set the image to "no-repeat".  Without any further declarations, the space of the body which is wider and longer than the image would appear as in a white colour or whichever background colour is defined.  So to undo this, Mike declares the "body-background" "transparent".

html {

background: #fff url(files/bg2.jpg) repeat scroll center top;

}

body {

background: transparent url(files/bg.jpg) no-repeat scroll center top;

font-family: "Helvetica Neue", Helvetica, Arial, sans;

line-height: 18px;

}   Mike Matas background CSS trick 

So at first we are simply tiling a concrete background image.

tickerTXT site re-design: the search of inspiration

Simplicity and easy navigation for the new tickerTXT site narrowed the focus to 1-column designs (at least for header and main content.  The default templates of blogger offer all 2-column designs.

The team's favourite for a visually stunning and yet simple design has quickly become the photo blog of Mike Matas. The concrete-look of the background helps the pictures to stand out.  The colours of the photos are enhanced by the simple white frame which look like an old-style photobook, even more when Mike plays with photos of a vintage plane, which seem like 1940s originals. Not to forget his beautiful and intriguing photos, which appear unnaturally sharp and colourful, yet they don't seem overly re-worked.  Just take a few moments and enjoy his site.

One free blogger template seemed to blend both single column design and a concrete look:  Falling Dreams.  As so often it is a wordpress them (by Razvan Teodorescu) which has been converted to blogger (by  by Naeem Noor) .  But in order to be used for tickerTXT, it would have needed quite a bit of tweaking.  Then we remembered Nexus5 by Amanda Fazani of BloggerBuster.com.

Nexus5  is beautiful in it's simplicity and ultra-"tweakable".  Amanda really has pulled quite a few stops.  The menu bar offers a nice way to be useful not just to CSS and HTML people.  The menu bar is integrated with the "Link-List" blogger gadget.  Great idea, nice execution.


So Nexus 5 is the basis, and the team wanted the looks to be inspired by Mike Matas' blog.  Let the tweaking begin.