In this assessment you'll get some more practice in creating cool-looking boxes, by trying to create an eyecatching box.
| Prerequisites: | Before attempting this assessment you should have already worked through all the articles in this module. |
|---|---|
| Objective: | To test comprehension of CSS box model, and other box-related features such as borders and backgrounds. |
Starting point
To get this assessment started, you should:
- Make local copies of the starting HTML and CSS — save them as
index.htmlandstyle.cssin a new directory.
Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <style> element in the head of the document.
Project brief
Your task is to create a cool, fancy box, and explore what fun we can have with CSS.
General tasks
- Apply the CSS to the HTML.
Styling the box
We'd like you to style the provided <p>, giving it the following:
- A reasonable width for a large button, say around 200 pixels.
- A reasonable height for a large button, centering the text vertically in the process.
- Centered text.
- A slight increase in font size, to around 17-18px computed style. Use rems. Write how you worked the value out in a comment.
- A base color for the design. Give the box this color as its background color.
- The same color for the text; make it readable using 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 towards the top left corner. Make it completely transparent at the start, gradiating 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.
Example
The following screenshot shows an example of what the finished design could look like:
Assessment
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!