Patterns add flavor to your webpage, making it unique and unforgettable. As a pattern designer, you will probably want to make your patterns yourself, and all the Artlandia tools, SymmetryWorks, SymmetryShop, and SymmetryMill, will let you do that. But if you are in hurry, there’s a wealth of patterns on Pattern Central that you can deploy right away, either as is or tweaked to suit your needs.
To that end, for every shared pattern set, Pattern Central gives you a direct link to a pattern tile. The tile is exactly what you need for your page CSS (or the HTML style attribute).
For instance, to re-create the first pattern from a shared set, like “SymmetryMill Blending Modes,” get its tile image and upload it to your website or link directly to the tile. For a pattern to run through the body of a page, you can add this class to the body tag (the background-size property is optional and needed only if you want to scale the pattern):
.pattern {
background-image: url("http://artlandia.com/share/tile/17b819be244e76a");
background-repeat: repeat;
background-size: 30%;
}
Of course, you will pay attention to the license for patterns you plan to use. If the license requires attribution, you can satisfy it by providing a link to the pattern page, as is done in the above example.
It is easy to scale a pattern that you grab from Pattern Central (as you just saw) or change the pattern appearance by applying CSS filters. For instance, to convert a pattern created from a Nevit Dilmen’s photo to grayscale (desaturate), your CSS can contain:
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
When a pattern serves as a background for other content, such as overprinted text, you will often want to make the pattern rather subtle, which you can do by simply giving it a lower opacity:
.subtle {
opacity: .2;
}
And when you want to pin a specific point to the upper left corner of the pattern (rather than use whatever happens to be there in the original tile image), you can use the background-position property:
.position {
background-position: -120px 20px;
}
In most of the examples above, patterns scale with the window size, but if you want to keep a fixed repeat size, you can do that too:
.fixed-scale {
background-size: 100px;
}
We have not paid much attention to code organization in this post, but the sample code should be self-explanatory, and here’s a quick rundown for the curious:
- Patterns in the body of a page with text:
- Horizontal pattern bar: HTML | CodePen
- Sidebar pattern: HTML | CodePen
- Pattern clipped to a shape: HTML | CodePen
Happy patterning!
This post is a part of our series on pattern applications. The preceding post deals with using patterns in fashion-design and the next post is about using patterns in secure printing.
Last updated: September 3, 2017