Join Justin Seeley for an in-depth discussion in this video Examples of gradients in design, part of CSS: Gradients.
Before we actually get into the nuts and bolts of creating our own gradient objects, I want to first show you some real-world examples of gradients out in the wild, so you can see exactly what other people are doing with them and how you can translate that into your own workflow. The first example is a WordPress theme called Blocco that was developed by my friend Jason Schuler over a press75.com, and over on the right-hand side of the Blocco theme you'll notice all these little buttons over here, and when you hover over them, they have a little transition that happens, and they've also got a nice gradient effect on them.
And when you're looking at them you might think that that is an image in the background, but it's actually not. All of these buttons were created using nothing but CSS, and so if I were to right-click on one and choose Inspect Element, now I'm inside of Chrome, I'll scroll down over here on the right and you can see here are the background elements, and you can see all of the code that relates to the CSS gradient, that's a part of that. They've also got a nice hover effect on these buttons, so that when I hover over one, it slightly changes color. It gives them a little bit more interactivity and then of course the gradient also helps to add a little bit of depth to the button to make it look a little more three-dimensional as well.
Overall, a very nice use of gradients and a very good example of what you can create using a gradient as well. Let's jump on over here to a ThemeZilla demo. This is of a theme called block, which was developed by ThemeZilla; a great guy named Orman Clark that develops these, and this is of a couple of their shortcodes they include inside of the WordPress themes, and one of them is a button shortcodes. You can see here that all of these buttons have different shapes and different sizes, but they all utilize the same gradient. And so when I hover over these, again they've used some great gradients here, and hover effects along with some border radius, some outlines, things like that, to make these buttons look three-dimensional, but they are all controlled by that CSS gradient in the background.
There is no imagery going on here. If I right-click on one, choose Inspect Element, go over here, you can see all of the different gradient code is right there on the right-hand side. And so, as I said, these are just some examples of how people are using gradients in every day life on the Internet. Now these are just the basics. Let's talk about some of the crazy stuff that people are doing with CSS gradients. I am going to jump over here to this website and it's by someone called Lea Verou, and Lea has compiled this awesome CSS3 patterns gallery.
When you first look at this you might think, "Oh okay, some cool patterns here. I can create that in Photoshop." Yeah, you could, but these are not created in Photoshop. These are all done with nothing but CSS code. And so if you look at these examples, if the pattern was created by someone else she gives attribution underneath there. If there's no attribution link that means that she herself, Lea created the pattern. If you want to see one of these patterns in a bigger window, just click on them and it takes you to a full screen view of that pattern and then directly here in these window, gives you a code sample, so you could actually copy this and save it into your CSS document and use this pattern in your own designs.
So you have got something like this which is sort of like in Microbial Mat that he calls it. You have got things like the zigzag--I really like this one. You've also got some really cool ones down here towards the bottom like the Argyle pattern. You have got here a Brick. You've got this Lined paper by Sarah Backhouse which is very good. You've got a Blueprint grid which is done by Lea and there's also a Tablecloth, and I think this one is really cool as well. And so all of these patterns were created using CSS gradients, and I think they are absolutely amazing, and I'm constantly amazed at what people are coming up with.
And while we're not going to be getting as in-depth as this in this course; this is just an introduction to CSS gradients, I am going to be talking about later on how to create a repeatable pattern in CSS, so hopefully you can take that knowledge and expand on it as you continue to learn more about gradients, and you can create something that maybe would be worthy of being submitted to this site. And if you ever do, there is a submission process here, you can submit a new one right here on this link, and if it matches the criteria, they'll put it up here. So this is a great way to come and learn, you just click on these things, explore the code, see how people are writing them and you can learn a ton just by looking at this one site.
So hopefully by now you have a better understanding of how people are using gradients in real-world scenarios and how crazy you can really get with these things, and how creative you can be with these as well. This is a great example of what people are doing, how they're doing it, and by coming in and picking these things apart, you can learn it and add it to your workflow as well.
- 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