Graffiti Wall using CSS

The aim of this challenge is to create an eye-catching digital graffiti wall using HTML and CSS. By doing so we will improve our CSS skills focusing on CSS positioning, images and text formatting.

Learning Outcomes

In this tutorial, you will learn how to:

• Position elements using absolute positioning
• Resize images using CSS
• Rotate images and text
• Apply transparency effects
• Import and use custom Google Fonts
• Add text shadows and styling effects

Starter Code

We have started the graffiti wall using some HTML and CSS code. You will be able to edit this wall by clicking on the “Edit on Codepen” button.

The HTML code already contains all the images and text elements that will be placed on the wall.

<img src="https://www.101computing.net/wp/wp-content/uploads/arrow.png" id="arrow">
<img src="https://www.101computing.net/wp/wp-content/uploads/peace.png" id="peace">
<img src="https://www.101computing.net/wp/wp-content/uploads/tape.png" id="tape">
<img src="https://www.101computing.net/wp/wp-content/uploads/lightning-strike.png" id="lightning">
<img src="https://www.101computing.net/wp/wp-content/uploads/spraycan.png" id="spraycan">
<img src="https://www.101computing.net/wp/wp-content/uploads/dj-artist.png" id="dj-artist">
<img src="https://www.101computing.net/wp/wp-content/uploads/skateboarder.png" id="skateboarder">
<img src="https://www.101computing.net/wp/wp-content/uploads/astronaut.png" id="astronaut">

<div id="street-artist">#Street Artist</div>

Step 1: Creating the Brick Wall

We have started our CSS code to give our page a brick wall background using the following CSS code:

BODY {
  background-image: url(https://www.101computing.net/wp/wp-content/uploads/brick-wall.jpg);
  background-repeat: repeat;
} 

What does this do?

Step 2: Positioning & Resizing Objects

We have started to position a couple elements including the peace symbol. To do so we are using absolute positioning in CSS which let us specify the exact position of our element on the page using the top and and left properties in CSS.

#peace {
  position: absolute;
  top:120px;
  left:600px;
  width: 160px;
}

Your turn
Use different selectors such as #arrow, #dj-artist, #astronaut and use the relevant CSS properties to reposition and resize all the images to cover your graffiti wall.

Step 3: Rotating Objects

transform: rotate(20deg);

Step 4: Flipping Images

transform: scaleX(-1);

Step 5: Layering Images

z-index: 2;

Step 6: Importing Google Fonts & Formatting Text

For more exciting fonts that the standard web-safe fonts (Arial, Verdana, Times New Roman, etc.), we recommend importing your selection of Google fonts.

For instance, in the example provided, our text “StreetArtist” is formatted using the Frijole font from Google Fonts.

To import it and be able to use it within your CSS code, add the following line at the top of your CSS code:

@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');

You can then use some CSS code to change the font family, size and colour of your text:

#urban {
  font-family:"Frijole";
  font-size:40pt;
  color:#441111;
}

Step 7: Adding a Shadow to the Text

It is possible t create a shadow effect to your text which can help improve the contrast and make your text easier to read especially when a page has a background picture.

text-shadow: 2px 2px #ffffff;

CSS Summary

Here is a summary of the CSS properties this challenged focused on: