Using gradients to create patterns
Video: Using gradients to create patternsIf 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.
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.
- 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
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.