Tag Archives: rgba

Jazzing up the Chrome

4 Replies

Its taken me a little while to put this post together. Not because I have done anything radical to the site which has taken tonnes of development. No simply put I’m pretty rubbish when it comes to design! As promised in my last post I wanted to start to look at colors for the site and this brought my lack of design skills to the fore. Coming up with a color scheme for the blog demands imagination of which I have little to no of. To try and overcome this I ‘ve been trying to utilise some online tools such as Adobe’s Kuler. Whilst a very cool tool I still found it a little difficult to go from the palette to design just in my head. After playing around with the tool for a while and coming up with a bright palette I caved in and decided this just wasn’t going to work for me and instead went back to the primary colours of red, white and blue (or shades there of), not very exciting I know…

I’ve applied these colors to various elements on the page but don’t think I really need to go into the details, the full CSS can always be viewed for this.

On my last update I was more or less happy with the overall look of the posts part of the page so I set about changing the chrome into something a bit more acceptable. This has meant I had to make one minor change to the posts, I’ve knocked back the border from 10px to 5px to reduce the emphasis. I’ve also removed the border round the whole page and instead I’ve opted for a subtle drop-shadow with a light blue gradient for the page.

Once again I have opted against using any images on the page to create my desired effects. Instead with the release of Firefox 3.6 last week I have been able to put into practice some new experimental CSS3 properties putting the job of generating these effects into the browsers court. Lets start off with the site background, I have decided to have a light blue gradient fading to even lighter blue as we drop down the page. I could have created a thin 3px-ish gradient in Photoshop and repeated it across the top of the page but in Firefox 3.6 we can use gradients as backgrounds. The CSS is pretty self explanatory:

background: -moz-linear-gradient(top, #c2daf1, #f2f7fc);

The first argument descibes where to anchor the gradient and the following arguments are the colors to use. There are plenty more things you can do with gradients in Firefox 3.6 so if you’re interested I suggest you take a look at Mozilla Hacks which has a great set of examples.

Next I wanted to add the drop-shadow to the overall page, this too can now be achieved in FF3.6 using the box-shadow property.

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.2);

This creates a 5px drop shadow with a very opaque background color, an approach which is inifinitely easier to achieve than with images. Lastly just for fun more than anything and just to have a play I’ve added an elliptical gradient to the header, although I doubt this will remain for very long…

#header {
  background: -moz-radial-gradient(top left, ellipse, #eee, #fff);
}

Overall the theme looks to be coming together nicely, and so far I haven’t had to use a single image in the theme. There’s still a lot to do over the coming weeks before the theme can be considered relatively complete.

Improving Posts

3 Replies

Now then my latest style additions have perked up the blog’s appearance somewhat. Its still way off being finished (if it ever is) and there are still a lot of aspects which need attention but the theme is now being built up a touch and becoming a bit more polished. For this revision I have focused purely on the posts themselves. This has given me the first opportunity to dabble in CSS3 selectors (more about them later).

The first and easiest aspect to focus on was the typography. At somepoint in the future I am going to take @font-face on a test drive, but for the moment I’m going to stick to good old web safe fonts. I’ve never been a fan of graphical headers, personally I don’t think they ever bring much to the party. Sure techniques like img replacement and tools such as SIFr and Cufón allow you to negate the cons of bad accessibility and bad SEO but for me these techniques are hacks for a problem that shouldn’t exist. Web safe fonts can be used very effectively to produce some nice striking typography, you just need to try a bit harder to make them look good. One good resource for this is Type Chart, which takes your standard fonts and displays them (complete with CSS) in a variety of ways. After some browsing of the commonly available fonts I have opted to use Georgia for both my post headings and body copy. For my fixed width font I have gone for Lucida Sans Unicode, falling back to good old Courier New for those people unlucky enough not to have Lucida installed. Hopefully you’ll agree that the end result is more than acceptable.

Now that I had my font styles I need to apply them to just the posts part of my blog. Luckily for me the default WordPress markup has some pretty good CSS hooks allowing me to target the posts very reliably. Boiled down the mark up for the posts section of a page is:

<div id="content">
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="navigation"></div>
</div>

Targetting the posts is as simple as hooking into <div> using the .post selector. This allowed me to create the post look that you see, however there was a small detail that targetting the posts generically I didn’t like. To achieve the gap between the posts I have used “margin-bottom: 14px;” this works great until we hit the last post, on this occasion I didn’t want the margin to appear. My first opportunity to use CSS3 selectors, however this didn’t turn out to be as easy as I thought it would be. I intended to use the selector :last-of-type, so I tried the following code:

div#content > div.post:last-of-type {
 margin-bottom: 0;
}

Unfortunately this didn’t work, it seems the :last-of-type selector only works on tags not class selectors. I couldn’t remove the .post part to div#content > div:last-of-type as this selected the navigation <div> which wasn’t what I wanted at all. Instead I changed the selector to :nth-last-of-type to select the second last <div> i.e.

div#content > div:nth-last-of-type(2) {
 margin-bottom: 0;
}

Not as elegant a solution as I had hoped for but it works for now. I have purposesly left the navigation unstyled as this is a detail I want to focus on in a future post.

Finally another detail which probably isn’t obvious at the moment but is another CSS3 snippet I have implemented is the border around the post. Not only have I used border-radius to achieve the rounded corners but the border color also use rgba() to define its color with a 50% opacity setting, how this plays out in the overall design I’m not sure yet but here’s the CSS:

div.post {
 padding: 10px;
 border: 10px solid rgba(0,0,0,0.5);
 background-color: #fff;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 margin-bottom: 14px;
}

As before here is a the full CSS file so far, next I shall be turning my attention to the site chrome and color scheme.