CSS: Gradients
Illustration by John Hersey

Using gradients to create patterns


From:

CSS: Gradients

with Justin Seeley

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Using gradients to create patterns

If you've been watching this course from the start, you know that I referenced earlier that we could actually create repeatable patterns using CSS3 gradients and that's what we are going to be talking about in this movie; how to create a very simple CSS3 pattern that you can use on your backgrounds. Now this is not going to be as complex as the ones that Lea Verou has aggregated on her side. If you want more information about that, you can go back to that movie and take a look at the gallery of awesome patterns that she has collected on her site. But in this case I am just going to be creating a very simple one and it's just going to be sort of like a checker pattern that we create in the background of our site.
please wait ...
Watch the Online Video Course CSS: Gradients
1h 13m Beginner Feb 15, 2013

Viewers: in countries Watching now:

Join Justin Seeley as he introduces gradients, a somewhat hidden strength of CSS that allows you to add depth and texture to your web designs while reducing load times—creating a better viewing experience for your visitors versus static images. Discover how to create simple linear and radial gradients; apply them to backgrounds, buttons, and text; and write browser-specific syntax to ensure your designs look the same across multiple platforms. The course also shows how to create metallic textures, diagonal gradients, and repeatable patterns. Along the way, Justin demonstrates real-world uses for gradients and techniques to extend them beyond the basics.

Topics include:
  • Exploring browser compatibility
  • Creating horizontal and vertical gradients
  • Adding extra color stops
  • Exploring radial gradient syntax
  • Using transparency
  • Creating fallbacks
  • Generating gradients via the web
Subject:
Web
Software:
CSS
Author:
Justin Seeley

Using gradients to create patterns

If you've been watching this course from the start, you know that I referenced earlier that we could actually create repeatable patterns using CSS3 gradients and that's what we are going to be talking about in this movie; how to create a very simple CSS3 pattern that you can use on your backgrounds. Now this is not going to be as complex as the ones that Lea Verou has aggregated on her side. If you want more information about that, you can go back to that movie and take a look at the gallery of awesome patterns that she has collected on her site. But in this case I am just going to be creating a very simple one and it's just going to be sort of like a checker pattern that we create in the background of our site.

So I am just working on the body tag here and what I am going to do is I am going to start off by typing out background. That's of course the portion that we are going to target. And then we are going to type out webkit-linear- gradient, and of course you would append the other browser prefixes as you go. But in this case I'm working in Chrome so I don't need to do anything else other than webkit for now. And so in the argument statement what I want to do now, I just want this to go from top to bottom, so I don't need to define any directionals, and I'm then going to use RGBA to define the colors. So basically what I am dong here is defining a RGB value which you can get by sampling colors in Photoshop or something like that, and then an alpha value which allows me to put through some transparency on these colors, which is going to allow them to shine through and almost look like a crosshatch or cross-stitch kind of pattern.

So what I am going to do here is type out RGBA and then I want open and close parenthesis again, so I have got RGBA, open close parenthesis, and in between these two parentheses here I want to type out 253, 153. So I have got some red and I have got some green. I am not going to have any blue. So essentially this is going to be kind of yellowish color, and then I am going to do a comma, and then we are going to do 0.5, that's the alpha value, so it's going to be 50% transparency. Then we are going to do 0%, that is the defining point for this, the starting point for this, so it's going to start right at the beginning, and then we are going to do a comma, and then after that I am going to type out rgba again, open and close parenthesis this time, we are going to do the same colors, 253, 153, 0, 0.5, and then we are going to go outside the parenthesis. So it's exact same color, and then this time we are going to position this to be 50% of the way across, and then a comma, and then rgba again, open and close parenthesis, 253, 153, 0, this time 0.7, giving a little transparency, going outside that parenthesis, typing out 50%, here we go, and then a comma.

One last color value here; rgba, open and close parenthesis, 253, 153, 0, 0.7 and then outside, 100%. So I have now defined couple of different columns here, and then I am going to type a comma after that parenthesis and then we are going to go down and we are going to create another gradient. So I will just tab over webkit and you know what, this is actually going to save me some time if I just do this right here. Because this is going to be the same pattern, I want the same pattern repeating left to right as I do top to bottom.

I'll just take this top gradient, the whole thing, I'll tab over and I'll paste it in the exact same gradient, and then right here on the front end, right after it says webkit-linear-gradient, right inside that parenthesis, just type left and a comma. Because you are going to do the same pattern going left to right as you are top to bottom. And so, then at the very end of this, instead of a comma at the very end, just take that off and put in a semicolon. Then we are going to define how big these tiles need to be, so we are going to do background-size, and you are going to do 100 pixels and 100 pixels, and then if you are using this in other browsers, you would use stuff like moz-background-size, and so forth.

So same basic principle, but just some browsers need that prefix. And so there we go and you would add the prefixes for all the gradients as well. And then once I go into my browser, watch what happens when I refresh. There is my nice checker pattern. Since I added the transparency to this, you can actually see where they overlap, which makes for a nice crosshatched, cross-stitched looking pattern. And you could change the colors for this. You can change the Opacity values for this and really tweak it to your liking. But I just wanted to give you an idea of what's possible with these gradients and how easy it is to create a nice repeatable pattern that will scale in most modern browsers, and will work in most modern browsers in a very good way and save you a lot of load time when it comes to dealing with this, versus dealing with images.

There are currently no FAQs about CSS: Gradients.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Gradients.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.