Shapes and patterns can be leveraged in user interfaces to guide your users, draw attention to content, lend weight or emphasis, or just for aesthetics and decoration.
Layout and styling on the web is typically handled using CSS, however mastering CSS to the level where you can confidently take advantage of more advanced features is definitely not easy. I’ve been developing for the web almost full-time for a decade and I’m still pretty crap when it comes to doing complex stuff with CSS.
That said, some people have done some mindblowing things using CSS and just a single div element.
The Subtle Patterns website has been around for years - it’s a great resource for discovering and accessing nice textures and backgrounds for your creations. There are also some nice libraries in CSS that let you describe patterns programmatically, and this comes with the added performance advantages that CSS provides (as browsers are pretty performant when it comes to CSS).
pattern.css (created by bansal-io) is a great little CSS-only library for adding simple, but effective, patterns to your websites. For example, backgrounds for elements, false “block” shadows, or even within the text itself. All that’s needed are a few extra classes on your elements and the small (less than 1Kb when gzipped) library will do the rest.
To get started, you can add the library to your project using your normal JavaScript package manager (e.g. yarn add pattern.css). Then either include the CSS file in your HTML or, if you’re using React or another framework/builder that allows you to import CSS directly, you can:
import 'pattern.css/dist/pattern.css'
Once that’s done it’s just a matter of adding classes to your markup. All the pattern.css classes start with pattern, followed by the type of pattern (e.g. -diagonal-stripes), followed by the “size” of the pattern (e.g. -sm).
For example, to build a div with a chunky zig-zag patterned background you just need to use:
<div class="pattern-zigzag-lg">
...
</div>
To change the colour of the pattern just set a color style on the element. If the element also has a backgroundColor then this will display through the transparent bits:
<div class="pattern-diagonal-stripes-md" style="color: red; backgroundColor: yellow">
...
</div>
Have a read through the documentation for examples and further pattern types. It’s quick to get the hang of and far more effective to use if - like me - you find some of the complexities of CSS hard to get your head around!