Web Design (17) CSS Box Element (2)

‘Box’ Web Site (1) Insert a navigation bar into the index.html file and create links to ‘index.html’, ‘pageone.html’ and ‘pagetwo.html’ (2) Now save the index.html file as ‘pageone.html’ and then as ‘pagetwo.html’ (3) Check that navigation between the pages works. (Try to put into your index page all that will be common to all your html pages, before ‘saving as’)

Rounded corners with border-radius (1) As with other properties, there are individual corner properties as well as a border-radius shorthand Try some of these in your ‘box’ web site: border-radius: 10px; border-radius: 50px; border-radius: 5px 20px 40px 60px; border-top-right-radius: 30px; border-bottom-left-radius: 50px;

Rounded corners with border-radius (2) So far, the corners we’ve made are sections for perfect circles, But you can also make a corner elliptical by specifying two values: The first for horizontal radius and the second for vertical radius. e.g. border-top-right-radius: 100px 50px; border-top-left-radius: 100px 50px; Try these out in your ‘box’ web site.

Rounded corners with border-radius (3) If you want to use the shorthand property, the horizontal and vertical radii get separated by a slash: e.g. border-radius: 60px / 40px;

Margins (1) The last remaining component of the element box is its margin, Which is an optional amount of space that you can add on the outside of the border. Margins keep elements from bumping into one another or the edge of the browser window.

Margins (2) The side-specific and shorthand margin properties work much like the padding properties. Some examples: Margin: 15px; Margin-top: 5px; margin-bottom: 5px; Margin: 5px 10px 5px 10px;

Margins (3) ‘Collapsing margins’ – something to be aware of! The top and bottom margins of neighbouring elements ‘collapse’. So, if the top element has a bottom margin of 4px and the following element has a top margin of 2px, the resulting space will not be 6px, but only the larger of the two values – 4px. (Note: This does not happen to the left and right sides.)

Drop Shadows (1) You’ve learned about the text-shadow property, which adds a drop shadow to text. The box-shadow property applies a drop shadow around the entire visible element box (excluding the margin)

Drop Shadows (2) As with text-shadow, you can specify the horizontal and vertical offset distances, the amount the shadow should blur and a color. For box-shadows, you can also specify a spread amount, which increases (or decreases with negative values) the size of the shadow.

Drop Shadows (3) Three examples to try out: box-shadow: 6px 6px #666; (adds 6px of shadow to the right and down, without blur or spread) box-shadow: 6px 6px 5px #666; (adds blur value of 5px to the above) box-shadow: 6px 6px 5px 10px #666; (adds a 10px spread value to the above)

Drop Shadows (4) You can also make the shadow render inside the edges of the visible element by adding the inset keyword. Try the following adjustment to the above code: box-shadow: inset 6px 6px 5px #666;

Drop Shadows (5) Finally, just one word of warning: box- shadows and text-shadows take a lot of processor power, so use them sparingly in order to avoid the slower performance of your web pages.

Exercise From what you have just learned, now experiment with: ‘border-radius’, ‘margins’ and ‘drop shadows’ in your ‘box’ web site. (Notice that changes made in the external ‘box.css’ file change the look of all the html pages.)