We, web developers and designers, now have access to a plethora of new tools thanks to HTML5 and CSS3. Combining these two languages can help us to create awesome effects, build stunning interfaces, or, with the help of JavaScript, full- fledged programs. Today, we’ll see how to make some very cool looking sticky notes in a web browser using only HTML5, and CSS3. Ready? Let’s go.
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
STEP ONE:
The Basic Sticky Note
We’ll start by building some basic squares onto our page that will eventually become our sticky notes. Our framework for the notes is a simple unordered list containing 6 list items, each wrapped up into a link. Here’s what our simple HTML code looks like:
<ul>
<li>
<a href="#">
<h2> Title 1 </h2>
<p> text content 1 </p>
</a>
</li>
<li>
<a href="#">
<h2> Title 2 </h2>
<p> text content 2 </p>
</a>
</li>
<li>
<a href="#">
<h2> Title 3 </h2>
<p> text content 3 </p>
</a>
</li>
<li>
<a href="#">
<h2> Title 4 </h2>
<p> text content 4 </p>
</a>
</li>
<li>
<a href="#">
<h2> Title 5 </h2>
<p> text content 5 </p>
</a>
</li>
<li>
<a href="#">
<h2> Title 6 </h2>
<p> text content 6 </p>
</a>
</li>
</ul>
It’s simple to make our list items look more like sticky notes:
* {
margin: 0px;
padding: 0px;
}
body {
background-color:#616161;
}
h2 {
font-weight: bolder;
}
ul {
overflow: none;
position: relative;
top: 60px;
left: 60px;
width: 50em;
}
ul li {
list-style: none;
float: right;
margin: 15px;
}
ul li a {
background-color: #fcffa3;
color: black;
display: block;
height: 10em;
padding: 2em;
text-decoration: none;
width: 10em;
}
We first reset the margin and padding of all of the elements to avoid cross-browser headaches, and took away any styling of our list items such as bullets. We’ve also changed the background color so that the list items look a little bit more like sticky notes. Now if you load up the HTML file into your browser, you’ll already have some pretty good looking sticky notes:
Let’s make them even more impressive shall we?
STEP TWO:
Shadow and Fonts
We want our sticky notes to stand out from the page, so we’re going to add some drop shadows, and make our fonts look like real handwriting. The Google Fonts API provides a very simple way to implement fonts that you wouldn’t normally see in a web page, and is completely standards compliant. We’ll be using a font called “Reenie Beanie”, which looks a lot like my handwriting to be honest. Using it is just like using a style sheet. We simply need to add the following line into the head of our HTML file:
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
Now, we can call this font from anywhere we’d like to within our CSS file. We’ll go ahead and add this font to our list items like so:
ul li p {
font-family:'Reenie Beanie', serif;
font-size: 180%;
}
The next piece of the magic will be the CSS3 drop shadow. This will help our notes to stand out from the page, and give a bit of depth to our project:
ul li a {
background-color: #fcffa3;
color: black;
display: block;
height: 10em;
padding: 2em;
text-decoration: none;
width: 10em;
-moz-box-shadow: 5px 5px 5px #191919;
-webkit-box-shadow: 5px 5px 5px #191919;
box-shadow: 5px 5px 5px #191919;
}
So you can see that we’ve added the box-shadow declarations for all of the major browsers. If you refresh your page now, you’ll see some rather outstanding looking sticky notes:
STEP THREE:
Rotation
Next, we’ll give our sticky notes a bit of rotation. CSS3 provides us with a transform declaration that can do things like scale an element’s size, rotate an element, and much more. Here’s the code that we’ll add to our CSS file in order to make give our sticky notes some tilt:
ul li a {
background-color: #fcffa3;
color:black;
display: block;
height: 10em;
padding: 2em;
text-decoration: none;
width: 10em;
-moz-box-shadow:5px 5px 5px #191919;
-webkit-box-shadow:5px 5px 5px #191919;
box-shadow:5px 5px 5px #191919;
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
-o-transform:rotate(6deg);
}
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
Although this does look pretty cool, we’d rather have our sticky notes look randomly placed. In order to do this, we’ll use the nth-child selector provided by CSS. This selector allows us to select things like only even numbered children, only odd numbered children, etc. We’ll target our list’s even elements, 3rd element, and 5th element to get the desired random effect:
ul li:nth-child(even) a { -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg); -o-transform: rotate(4deg); position: relative; top: 5px; }
ul li:nth-child(3n) a { -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); position: relative; top: -5px; }
ul li:nth-child(5n) a { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); position: relative; top: -10px; }
STEP FOUR:
Zoom
When we hover over our sticky notes, we’d like them to appear as if we’ve zoomed in on them some. To achieve this effect, we’ll need to use the CSS transform scale property. Scale is simply the overall height and width of an element. It’s used just like the rotate property, only we pass in a value for how many times we’d like to multiply the original height and width. We’ll add this to our hover and focus selector:
ul li a:hover, ul li a:focus { background-color: #6CF; -moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7); -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); box-shadow: 10px 10px 7px rgba(0,0,0,.7); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position: relative; z-index: 5; }
You’ll see that we’ve also added the z-index property to make sure our zoomed in sticky note hovers above the rest of them. Now, if you load the page up in your browser and hover over a sticky note, you’ll see it rotate back to the original position, grow in size, and appear to hover.
STEP FIVE:
Transitions
The last step will be to add a CSS transition to our page. A transition basically says “Hey CSS don’t just switch to my hover styling immediately. Bring it in gradually, and make it look smooth!” This allows for an animation-like effect to take place when we hover instead of an instant switch. Here, we’ll add a CSS transition for each browser:
ul li a { background-color: #fcffa3; color: black; display: block; height: 10em; padding: 2em; text-decoration: none; width: 10em; -moz-box-shadow: 5px 5px 5px #191919; -webkit-box-shadow: 5px 5px 5px #191919; box-shadow: 5px 5px 5px #191919; -moz-transform: rotate(6deg); -webkit-transform: rotate(6deg); -o-transform: rotate(6deg); -moz-transition: -moz-transform .15s linear; -o-transition: -o-transform .15s linear; -webkit-transition: -webkit-transform .15s linear; }
That does it for our tutorial today! You now have 100% sexy sticky notes done in only CSS3 and HTML. We’ve even got a zoom effect implemented with no JavaScript required. There are several ways that CSS3 can spruce up a page and make our sites and applications look far better. Get used to the transforms and transitions, as we move into the future of the web I’m sure you’ll be seeing a lot more sites using these techniques.
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.