Jive Factory: Creating CSS Gradient Patterns

Topics covered in this Mobile & Responsive Web Design tutorial:

Editing the visual indicator for each media query, Fun with RGBA, Anatomy of a CSS gradient, Linear-gradients & repeating-linear-gradients, Linking to Google’s free web fonts

Exercise Preview

Exercise Overview

Now that we have a working wireframe, we can start adding real content to it. In this exercise, we’ll add a background pattern using pure CSS gradients. We’ll also choose a couple of Google-hosted fonts to enhance the typographic style of the site. Let’s get started!

Getting Started

1. If you completed the previous exercises, you can skip the following sidebar. We recommend you finish the previous exercises (2D–3A) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (2D–3A)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class.
   3. Delete the Jive folder if it exists.
   4. Select the Jive Wireframe Done folder.
   5. Duplicate the folder.
   6. Rename the folder to Jive.

2. In your code editor, open main.css if it isn’t already open (Jive > css).

   The main objective of the exercise is to create a background pattern for the page using CSS gradients. That said, we’d still like there to be a noticeable color change when moving from breakpoint to breakpoint, so instead of using background colors on the body, let’s change the visual aid to a colored border.

3. As shown below, edit the body rule in the PROJECT STYLES section (around line 13):

   body {
      margin: 0;
      padding: 25px 15px 5px;
      border-top: 5px solid red;
   }
   

4. Edit the body rule in the min-width: 480px media query (around line 36):

   body {
      border-color: yellow;
   }
   

5. Edit the body rule in the min-width: 740px media query (around line 47):

   body {
      border-color: green;
   }
   

6. Edit the body rule in the min-width: 1024px media query (around line 65):

   body {
      border-color: blue;
   }
   

7. Save and preview index.html in a browser. Resize the window to see the new border at the top change colors.

Preparing the Page for a CSS Gradient Background

It’s worth noting that a CSS gradient is not a series of CSS color values. Instead, the CSS gradient function creates an image that represents a gradient of colors. The CSS gradient image has no set dimensions. Its size will match the size of the element it applies to.

We often set the body element as the target of the background style but, technically, body is a child of the html element. The html element is a more reliable target for backgrounds. It represents the root of the HTML document.

1. Return to main.css. Let’s start by adding a new rule for html at the top of the PROJECT STYLES section (around line 13):

   html {
   
   }
   body {
      margin: 0;
      padding: 25px 15px 5px;
      border-top: 5px solid red;
   }
   

2. We should specify a default background color for the page. This will be our fallback color in case a browser doesn’t support the repeating gradient pattern. Add the following property to the rule for html:

   html {
      background-color: #333;
   }
   

3. Save the file.

4. Preview index.html in a browser. You should see a dark gray background, but let’s finalize the module style so we’ll be able see the background gradient as it will truly look in the final page.

5. Back in main.css, edit the .module rule (around line 21) as shown below:

   .module {
      background: rgba(15,15,15, .5);
      border: 1px solid #b08101;
      box-shadow: 0 0 3px #000;
      padding: 20px;
      margin: 0 10px 20px;
      line-height: 9;
   }
   

6. Save and preview index.html in a browser. Now we’ll be able to see the gradient, but the text is kind of getting lost. Let’s set the default text color and font-size for the content.

7. Back in main.css, edit the html rule in the PROJECT STYLES section (around line 13):

   html {
      color: #fff;
      font-size: 14px;
      background-color: #333;
   }
   

8. Save and preview index.html in a browser. We’re ready to build the gradient background pattern.

Creating a CSS Gradient Pattern

1. Return to main.css. Let’s first have some fun with learning the syntax for CSS gradients. Add the following new background-image property declaration:

   html {
      color: #fff;
      font-size: 14px;
      background-color: #333;
      background-image: radial-gradient(red, orange, yellow, green, blue, violet);
   }
   

   NOTE: We are writing longhand for background-color and background-image so that browsers that do not support the gradients we are using will properly fall back to the solid hex value. The gradient pattern is just a progressive enhancement to the aesthetics of the page; its absence will not negatively affect the user experience.

2. Save and preview index.html in a browser. Woah. Very Ben & Jerry’s, but let’s tone that down. We can also try a linear, rather than radial gradient.

3. Return to main.css. Edit the gradient style and trim down the rainbow as follows:

   background-image: linear-gradient(red, orange, yellow);
   

4. Save and preview index.html in a browser. The gradient fills the page and goes from top to bottom by default. Let’s change the gradient to go from left to right.

5. Return to main.css. Edit the gradient as follows:

   background-image: linear-gradient(to right, red, orange, yellow);
   

6. Save and preview index.html in a browser. Cool. Let’s try to put this on an angle.

7. Return to main.css. Edit the gradient as follows:

   background-image: linear-gradient(45deg, red, orange, yellow);
   

8. Save and preview index.html in a browser. Fancy that. And you can use any angle you like. What about specifying the size of each gradient color to create less of a rainbow gradation and more of a stripe effect? We can do that.

9. Return to main.css. Let’s start with red, and continue with red until 40px. Edit the gradient as follows:

   background-image: linear-gradient(45deg, red, red 40px, orange, yellow);
   

10. Next, set orange to start at 40px (exactly where the red ends) and continue to 80px:

    background-image: linear-gradient(45deg, red, red 40px, orange 40px, orange 80px, yellow);
    

11. Then set yellow to start at 80px (exactly where the orange ends) and continue to 120px:

    background-image: linear-gradient(45deg, red, red 40px, orange 40px, orange 80px, yellow 80px, yellow 120px);
    

12. Save and preview index.html in a browser. If needed, scroll to the bottom of the page to see the small red and orange stripes (the rest of the page should be yellow). We want this to repeat as a pattern, not just appear as a single tiny stripe effect in the bottom-left corner.

13. Return to main.css and add repeating, as follows:

    background-image: repeating- linear-gradient(45deg, red, red 40px, orange 40px, orange 80px, yellow 80px, yellow 120px);
    

14. Save and preview index.html in a browser. Yowza. Now that we know how to make stripes, let’s tone this down a bit. Let’s create a series of gray stripes by using the gray background of the page and alternating it with stripes that are a semi-transparent overlay.

15. Return to main.css. Replace the color red with transparent, as follows:

    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, orange 40px, orange 80px, yellow 80px, yellow 120px);
    

16. Save and preview index.html in a browser. You can see through to the gray background in these transparent areas. Great! We only want two colors for the pattern, dark gray and a not-so-dark gray. Let’s get rid of the yellow stripe to pare things down.

17. Return to main.css. Delete the yellow values as follows:

    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, orange 40px, orange 80px);
    

18. Save and preview index.html in a browser. Spooky. But closer to what we want. Now let’s use RGBA to create a lighter gray in the second stripe.

19. Return to main.css. Replace the orange value with the following RGBA values:

    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(0,0,0, .3) 40px, rgba(0,0,0, .3) 80px);
    

20. Save and preview index.html in a browser. Sweet! Cool stripes. Feel free to experiment with the width of the stripes and the angle. Here are a couple of nice options to try:

    • Thin vertical stripes:

      background-image: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(0,0,0, .3) 5px, rgba(0,0,0, .3) 10px);
      

    • Thinner horizontal stripes:

      background-image: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0, .3) 2px, rgba(0,0,0, .3) 4px);
      

21. Here’s the final pattern we want for our design:

    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0, .3) 35px, rgba(0,0,0, .3) 70px);
    

22. Save and preview index.html in a browser.
23. If your screen is tall enough to show some space below the content, notice the zig zag in the stripes just below the content. As we’ve seen in an earlier exercise, that’s because the background does not fill the entire screen. It ends at the bottom of the content and then repeats.

24. The fix is the same as we saw before. Add the following code shown in bold:

    html {
       color: #fff;
       font-size: 14px;
       background-color: #333;
       background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0, .3) 35px, rgba(0,0,0, .3) 70px);
       background-attachment: fixed;
    }
    

25. Save the file and reload the browser to see your final background.

Adding Google Fonts

Our design calls for custom fonts. We’ll use Google Fonts, the leader in free web fonts. Google hosts hundreds of fonts and provides the code to make it all work.

1. In a new browser tab, go to Google Fonts at: fonts.google.com
2. In the search at the top right of the page, type in the font we want to add: Monda
3. Click the  button to the right of the Monda font name.
4. At the bottom of the page, notice there’s a bar that says 1 Family Selected.
5. In the search at the top right of the page, search for Bree Serif.
6. Click the  button to the right of the Bree Serif font name.
7. At the bottom of the page, click the 2 Families Selected bar to open it.
8. Click on the CUSTOMIZE tab.
9. Under Monda, check the box next to bold 700.
10. Go back to the EMBED tab.

11. Under Embed Font, copy the link:

    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Monda:400,700" rel="stylesheet">
    

12. Return to index.html in your code editor.

13. Paste the link around line 7, as shown in bold below:

    <title>The Jive Factory</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Monda:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
    

14. Save the file.

15. Switch to main.css and apply the Monda font to everything in the page by adding the following code shown in bold:

    html {
       font-family: 'Monda', sans-serif;
       color: #fff;
    

16. Save and preview index.html in a browser to see the new font.

17. If you get done early, check out the Animating a CSS Background Gradient bonus exercise (near the end of this book) for more fun with with CSS gradients.