Road Signs in HTML / CSS

In this set of challenges we are going to use CSS to recreate various road signs.

Learning Objectives

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

Challenge #1

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.

See the Pen Post-it notes by 101 Computing (@101Computing) on CodePen.

Challenge #2

For this challenge we are using exactly the same CSS definitions. By increasing the border-radius we are creating the round shape.

See the Pen Number Plate by 101 Computing (@101Computing) on CodePen.

Challenge #3

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/

See the Pen Number Plate by 101 Computing (@101Computing) on CodePen.

Further Reading…

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.