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 |
No comments:
Post a Comment