Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using gradients to create patterns

From: CSS: Gradients

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.

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.

Show transcript

This video is part of

Image for CSS: Gradients
CSS: Gradients

23 video lessons · 8841 viewers

Justin Seeley
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.