Making your main content appear to cast a shadow on the background, is achieved in a similar way to
making vertical lines (see K2 Style Hints and Tips: Vertical Lines ) You could add a border to the elements but borders can only be solid, dotted, ridged etc and none of these give the appearance of a shadow. So we will create an image to use as the shadow and then apply it as the background to the .content elements in the style sheet.
Make an image 770px x 20px with the background colour of your page. Now make a gradient fading to the colour of the background about 10px wide at each end of the image. The one I made for the K2 Style Mellow Yellow is below (I changed the background colour to make it visible on this page) I called mine bg3.jpg. Upload it to the same folder as the style sheet.
To apply this image to the .content elements edit the following in the style sheet.
.content{background: #ffffff url(’bg3.jpg’) repeat-y;}
You will also need to add the gradient to the header and footer if these are present in your style.
My header looks like the image below
Make sure the width of the gradients are all the same and that they line up correctly when viewed in different browsers. I had to change the width of my footer to achieve this in IE.
#footer {font-size:110%;
background:url(’footer.jpg’) no-repeat center center !important;
width:770px !important: width:768px;
}
The first width (770px) is for most browsers. IE will ignore this value due to the !important tag and apply a width of 768px, which causes the image to line up correctly in my style. You will probably need to tweak your widths to get all the images you line up correctly.
I added a narrow line to the top of the header and the bottom of the footer to finish it off.
0 Responses to “k2 Style Hints & Tips: Shadowed Background”