The student will discover a variety of fun and easy ways to add depth and interest to element backgrounds using the Principles of Pattern and Gradation.
- [Instructor] In the wake of the flat design trend, what's old is suddenly new again. Namely, many designers have started adding depth and interest to elements in their web layouts by applying principles of pattern and gradation to element backgrounds. To refresh your memory about pattern and gradation, pattern offers you a way to keep your design organized, as well as providing a sense of harmony through the use of repeating elements, while gradation refers to any gradual change that occurs by a series of stages, steps, or degrees.
With CSS three, and SVG, you can use these principles to add style to the background of nearly any element. While there are several easy ways to apply patterns and gradients to web element backgrounds, I'd like to share a few of my favorites. The first method, shown here in the second row, uses a simple CSS repeat to tile a graphic. Tiles are generally designed to be seamless, so that when they repeat, you can't identify the start or end. Tiles can repeat along the X or Y axis only, as well as filling the entire element by repeating across and down.
In this example, I've used a simple five by five pixel angle line tile that gives this row a sense of depth and texture. You can easily make your own tiles, or find free tiles online from sites like subtlepatterns.com, and pattern8.com. This next method is one of the simpler, yet elegant ways to add interest to an element using radial gradients. When the color shift is subtle, like this one, it can create a really nice vignette effect that highlights the content in the center of the element.
CSS three gradients can have soft, feathery transitions, or hard edges. Here, I'm using a three color gradient blend at a 45 degree angle. By contrast, this next area uses hard edge transitions to create a bold, two color angled stripe. Creating CSS gradients by hand can be a little time-consuming, so to save time, try using a CSS gradient generating tool, like this one, on CSSmatic.com.
Similar to CSS tiled backgrounds, you can also create a pattern with SVG code. Once you create the artwork, you can save it as an SVG file, then specify that file as the background image for an element with CSS. One huge benefit of SVG over CSS is its crispness on Hi-Rez screens, and the fact that it is supported by more browsers, including IE9. In this example, the browser is drawing a rectangle with stroke and fill colors, as well as transformations, to skew the angle of the lines.
This example effect uses three separate sets of CSS class styles, a short script, and links to three external JS files. The next method uses a CSS pattern where the browser draws the pattern based on the CSS rules applied to an element via a class attribute. For instance, you can add a simple polkadot pattern using background color, paired with a radial gradient. Here, the background is set to beige, and the dots are created using little radial gradients set to pink.
Let's take a look at the code. While the color and edge hardness is set by the radial gradient, the size of each dot is controlled by the background size, and the background position. Here, the size numbers refer to the width and height, and the position numbers refer to the X and Y coordinates of the two radial gradients. Definitely play with the values to create more unique patterns. Even a simple change can produce an entirely different pattern.
This last technique uses CSS to create pattern using a set of linear gradient and background color style rules. In this example, I've stacked four instances of linear gradient properties with different degrees to build this hard edged angled line pattern against a lighter background. To make your own CSS patterns, check out Lea Verou's CSS three patterns website, Where you can view and edit code for a handful of existing patterns, and then quickly generate your own.
As you are working and creating your patterns and gradients, bear in mind that you might need to make several fine tune adjustments to get them looking exactly the way you want them to. Keep playing around with the CSS until you are satisfied.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices