Last Updated: February 25, 2016

Canvas Pattern in CSS

Reading Jenifer Tidwell's Designing Interfaces, which is a book on design patterns for UI design, I learned a name for interfaces like MS Paint, and similar: The Canvas Pattern.

What I wanted to do is create a full screen canvas, with "toolbars" docked left and right.

HTML:

<div class="canvas-pattern">
 <div class="canvas-pattern-left"></div>
 <div class="canvas-pattern-canvas"></div>
 <div class="canvas-pattern-right"></div>
</div>

CSS:

/* canvas-pattern */
/** full screen */
.canvas-pattern-canvas{
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: -10;
 background-color: lightblue;
}

/*** centered within fullscreen */
.canvas-pattern-canvas > div {
 width: 300px;
 position: fixed;
 top: 50%;
 left: 50%;
}

/** docking ... */
.canvas-pattern{
 position: relative;
}

/*** ... right */
.canvas-pattern-right{
 position: absolute;
 top: 0;
 right: 0;
}

/*** ... left */
.canvas-pattern-left{
 position: absolute;
 top: 0;
 left: 0;
}

Enjoy!

#css

#html

#canvas-pattern