Wednesday, 12 December 2012

Integrated CA- site elements part 2

In the first part I talked about my footer and the pseudo before and after CSS snippet.

I also used this to style my h1 which appear as a ribbon going across the page.

The code is very similar to the footer except I only use the before as I only need one curl. I also added a box-shadow to give the ribbon the effect that it is hovering above the white background.  fig.1

fig.1


I wanted to create a stylish way of displaying quotes on the site fig.2  .   I styled the quotation marks in photoshop using a different font. I didnt feel the quotation marks from museo sans had an impact so I used another font. I sliced them and saved them as a PNG image. I used the pseudo before and after to position the images. one to the left and right. I gave the original div a position of relative and the images absolute. One thing I forgot to mention earlier about the pseudo before and after is the CSS must have content: ' ' ; for it to work.

fig.2

We needed a table in the site and I decided to display some statics. I wanted to use the overall style of the site so used my colour swatch and font. throughout the site I gave the type a line - height so the font is vertically spaced out. It makes it alot easier to read. fig.1

Most users scroll over what they are reading so I added a hover style to the table. fig.2  It just changes the background colour but I like the effect. I originally planned to have no border on the table but after try one I thought it looks much better. 

fig.1

fig.2

No comments:

Post a Comment