CSS3 cork board with sticky notes!

CSS is rather useful these days.  With the web getting more visual each day CSS3 is taking a central role in visualizing data.  Within this post one covers the basics to create a  This could be used to display your facebook friends, latest tweets or a virtual to-do list. Lets’s start with a screen-shot of the finish product:

css3-message-board-with-sticky-notes


A working version of the above can be viewed here. The HTML markup to create this page consists of the following:

<body>
		<div id='frame'>
			<a class="note sticky1">
				<div class='pin'></div>
				<div class='text'>Sed ut perspiciatis unde omnis iste natus error sit.</div>
			</a>
			<a class="note sticky2">
				<div class='pin'></div>
				<div class='text'>Ut labore et dolo</div>
			</a>
			<a class="note sticky1">
				<div class='pin'></div>
				<div class='text'>At vero eos et accusamus et iusto odio dignissimo</div>
			</a>
			<a class="note sticky3">
				<div class='pin'></div>
				<div class='text'>Blanditiis praesentium voluptatum deleniti atque</div>
			</a>
			<a class="note sticky4">
				<div class='pin'></div>
				<div class='text'>Nam libero tempore, cum soluta nobis est !<br> x x</div>
			</a>
			<a class="note sticky3">
				<div class='pin'></div>
				<div class='text'>Temporibus autem</div>
			</a>
			<a class="note sticky1">
				<div class='pin'></div>
				<div class='text'>Itaque earum rerum hic tenetur a sapiente </div>
			</a>
			<a class="note sticky3">
				<div class='pin'></div>
				<div class='text'>Soluptatibus maiores.</div>
			</a>
			<a class="note sticky0">
				<div class='pin'></div>
				<div class='text'>Perferendis doloribus asperiores repella.</div>
			</a>
		</div>
	</body>

The HTML above is simple. The CSS included on line five contains the styles to create the sticky notes effect. Below this include you will also notice a google font include. This permits me to use a font which looks like natural hand-writing.

The cork board is styled by setting its id attribute to ‘frame’. This CSS rule consists of the following styles:

div#frame {
	background: url(cork_board.gif) no-repeat;
	width: 800px;
	height: 600px;
	padding-top: 35px;
	padding-left: 35px;
}

This assigns a raster image to be the background property of the ‘frame’ div. It also sets its height, width and padding. The padding ensures the content is rendered within the bounds of the frame. The end result of this is:

Cork board

Each sticky note is then rendered onto the board. The HTML elements for each are identical except for the class assignment and inner text. An example of one of the sticky notes follows:

			<a class="note sticky1">
				<div class='pin'></div>
				<div class='text'>Sed ut perspiciatis unde omnis iste natus error sit.</div>
			</a>

Each anchor element represents one sticky note. The main class applied to each is the ‘note’ class. This is joined by an additional class which controls the colour and rotation properties of the note. These classes implement the following CSS rules:

.note {
	width: 160px;
	height: 160px;
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	float: left;
	margin: 8px;
	border: 1px solid rgba(0,0,0,.25);
}

.sticky1 {
	transform: rotate(-3.5deg);
	-webkit-transform: rotate(-3.5deg);
	-moz-transform: rotate(-3.5deg);
	background-color: #CBFAFA;
}

The generic ‘note’ class sets the height, width, margin and border. It also instructs each note to float to the left of its container. This ensures the notes wrap within its container. Finally the ‘notes’ class applies a box shadow effect around the sticky note.

The ‘stickyX’ class – were the X represents a number from zero to five – applies the background colour of the sticky note and applies a transform. The background colours chosen are either sky-blue, baby-pink, cream or white. The transform chosen applies a rotation factor of -3.5 degrees. This gives the sticky note a tilt effect. The result of which is:

Sticky note with CSS

The pin rendered over the sticky note is assigned one class: imaginatively called ‘pin’. The style of this class is applied using CSS3’s :nth-child selector e.g.

div#frame a:nth-child(3n) .pin {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 50%, black 100%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, black);
	background-image: radial-gradient(yellow 50%, black 100%);
}

This class uses the :nth-child selector to draw a circle with a gradient fill. The colours for the fill are yellow to black. It is applied onto every third child og the elements matching the rule ‘div#frame a’. This applies visual depth to the pin:

pin

The text on the note is assigned the ‘text’ class. This makes use of the Google font included in the header. The class used contains the following:

.text {
	margin: 10px;
	font-family: 'The Girl Next Door', cursive;
}

This applies the natural handwriting effect, giving the sticky note a real-life feel:

natural hand writing

Finally, I’ve applied a transition to each sticky note when the mouse hovers over each element. This applies a scale and rotation effect on the sticky note. Again this is done in the CSS. The class that achieves this follows:

div#frame a:hover.note {
	border: 1px solid rgba(0,0,0,.75);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
}

That concludes one’s experiment with CSS. I hope this helps someone out there. Again, a working version of the above can be viewed here. If you have any feedback please comment below.

Advertisements

10 thoughts on “CSS3 cork board with sticky notes!

  1. Very impressive, thank you for sharing it. While I understand the potential of CSS at a programmer level, I don’t have much of an eye for creating nice-looking stuff, so examples like this are great.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s