• Home
  
• Copyright Law
  
• Oragami Elephant
  
• The Dragon King
  
• Donate
• Modularization Plan
• Site Plan
  
• Style Guide
• Learning Report 1
• Learning Report 2
• Learning Report 3
• Learning Report 4
• Learning Report 5
• Learning Report 6
• Learning Report 7
• Learning Report 8
• Colophon

Learning Report #6
Blending Corners With CSS

The resource I used was an html code tutorial from http://www.w3schools.com/css/css_background.asp and the open source image editing software GIMP.

What I learned

With css, image editing software and a little effort, you can give your website a softer look and a better feel by blending background images

Some of the benefits of transitioning parts of your site are:

• It is softer on the eyes.
• If done with CSS and server side includes, it appears all over your site with only one change.
• You can do a ton of custom cool looks using the same principle.

How I implemented header to nav and header to content blend:

I created a two images, both one pixel wide and five pixels tall. On these to images, I made the top pixel the color of my header and I made the bottom the color of my navigation bar or content box. Then I used the transition gradient function on the GIMP image editor to have the three middle pixels be various shades between the two colors. Then I uploaded the images to my server and used css to put them at the top of my nav and content divs.

I wanted them to only repeat horizontally, so I put "background-repeat:repeat-x;". It messed the background color up for me, so I then had to make sure that I specified the background color after I put the background image.

Images are not the best way to go in my opinion whenever possible, but one thing that is great about this, is that these two tiny images, taking a total of 342 bytes each are repeated hundreds of times and can siginifcantly improve the look of your website.