CSS Code Patterns

Page One of Five

Page Content Carousel

All of the CSS patterns shown on this page can first be seen in the content carousel. Just tap through the illustrations until you find a pattern that you are interested in - then click on the image and you'll be taken to a coded version of the pattern with the CSS which you may copy or adapt. In some cases you will also discover some of my own experimentations with the CSS patterns.




Designer's Quotation

Have nothing in your house that you do not know to be useful, or believe to be beautiful.

William Morris

An extract on Patterns

Pattern exists in nature as well as in designed objects; it is useful to look at the parallels. A Harvard biologist named Peter S. Stevens has published a book entitled "Patterns in Nature" in which he claims that there are only a finite number of ways that patterns can be structured. He starts with the idea of a grid as the foundation for any structure or image. He presents a set of ways in which the points of a grid can be connected. These modes of connection become classes of pattern, which he claims can be seen in any situation, in nature and in made images, and from the microscopic to the cosmic scale. Charlotte Jirousek, “Art, Design & Visual Thinking”


‘CSS Patterns’


Social Profiles

Feel free to connect to any of the iopan design and/or Richard Proffitt's Social Profiles.