In this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
|Prerequisites:||Before attempting this assessment you should have already worked through all the articles in this module.|
|Objective:||To test comprehension of the CSS box model and other box-related features such as borders and backgrounds.|
To get this assessment started, you should:
- Make local copies of the starting HTML and CSS — save them as
style.cssin a new directory.
Note: If you get stuck, you can reach out to us in one of our communication channels.
Your task is to create a cool, fancy box and explore the fun we can have with CSS.
- Apply the CSS to the HTML.
We'd like you to style the provided
<div>, giving it the following:
- A reasonable width for a large box, say around 200 pixels.
- A reasonable height for a large box, centering the text vertically in the process.
- Center the box horizontally.
- Center the text within the box.
- A slight increase in font size, to around 17-18 pixel computed style. Use rems. Write a comment about how you worked out the value.
- A base color for the design. Give the box this color as its background color.
- A contrasting color for the text and a black text shadow.
- A fairly subtle border radius.
- A 1-pixel solid border with a color similar to the base color, but a slightly darker shade.
- A linear semi-transparent black gradient that goes toward the bottom right corner. Make it completely transparent at the start, grading to around 0.2 opacity by 30% along, and remaining at the same color until the end.
- Multiple box shadows. Give it one standard box shadow to make the box look slightly raised off the page. The other two should be inset box shadows — a semi-transparent white shadow near the top left and a semi-transparent black shadow near the bottom right — to add to the nice raised 3D look of the box.
- Use the W3C CSS Validator to catch and fix mistakes in your CSS.