In this set of challenges we are going to use CSS to recreate various road signs.
By completing these challenges you will learn more about how CSS can be used to format information on the page.
We will be looking at:
- How to add borders, and border radius to create a rounded corner text frame.
- How to add a shadow to the text frame.
- How to add a gradient effect to our text frame
The first challenge consists of recreating this number plate using CSS:
Check the following code to see how the border was created using both the border and the border-radius CSS definitions. You can also investigate how the shadow was created using the box-shadow CSS definition.
For this challenge we are using exactly the same CSS definitions. By increasing the border-radius we are creating the round shape.
Try to recreate these road signs using CSS:
Extension Task: Using Gradients
To create the gradient we recommend using an online CSS gradient generator which will create the CSS code for you: e.g. http://www.colorzilla.com/gradient-editor/
Should you want to learn more about CSS, the next concept that you should focus on is the different types of selectors that can be used in CSS.