Latest Pages:
You are at Home / DreamWeaver / Liquid Swatches
Liquid Swatches
In my previous post I noted a number of the design differences between my INTMA and WATMA pieces. In this short article we'll look at how this page has used a few small changes to the CSS to create a liquid layout and how the colour scheme was created.
First off, let's look at liquidity.
Liquid CSS Layout
In order to incorporate a liquid layout, I needed to make a few small changes to the design. I'll summarise these:
- The main wrapper DIV in the previous layout had created a fixed width. This was superceded with a wrapper2 derivative. I also created further descendent selectors where appropriate to override the fixed width design settings without having to create a new stylesheet. You can see these as #wrapper2 #.... etc styles.
- The central header banner required changing from a fixed with to a variable size design. Due to W3C CSS2.0 syntax not using curves, the background-image that had supplied these was altered to create a tiling effect.
- The two column layout requires floats and I now needed to make these percentage based rather than pixel based. These are great examples of the #wrapper2 descendent CSS selectors I mentioned earlier since I didn't want to rewrite my stylesheet completely.
Swatch My Colours
My colour swatch for this website has been to use a simple two colour palette throughout, combined with four variences of shade:
The shade tones will be predominantly for typography and layout which leaves the red and orange a fiery combination for my branding!
The foundation colour is #900 which is found in both the screen shot of my INTMA and the swatch image on the homepage. I therefore incorporated it as my tagline colour on my WATMA logo. I've also used it reinforcingly on headers.
#F90 on the other hand has become my link signifier and it's variously used on links and mouse over interactions throughout to support the notion that this colour signifies things you can interact with.