Adding Shadow to Modules
One border display effect in CSS is the box shadow. This shadow provides a definition that makes an object appear to have dimension on the page. In Digication, you can add a box shadow to the top or left navigation module to make your portfolio more visually appealing. If you coordinate the shadow color with your personal branding colors, the shadow will additionally pull the top navigation bar into the branded design of your banner.
How to Add Shadow Around the Top Navigation Module
Find the segment of code that looks like this:
#module_topnav{
border: 1px solid #ccc;
}
Within that method, add the following statement:
box-shadow: 3px 3px 1px 0px #000000;
You may adjust the four px values and the hex code to adjust the shadow size and color.
How to Add Shadow Around the Left Navigation Module
Add the following method to your CSS code: #module_leftnav{ margin-top:10px; border: 1px solid #cccccc; box-shadow: 3px 3px 1px 0px #000000; } .navigation_leftnav{ background-color:#f7f7f7; } Note that this method also adds a thin border line around the left navigation module and gives the module a background color. You may adjust this border in addition to the px values and hex code of the box-shadow statement. |
|
Video Tutorials
For a video tutorial on how to add shadow around the top navigation module, check out the CUPID Associates video below:
For a video tutorial on how to add shadow around the left navigation module, check out the CUPID Associates video below: