Thursday January 28, 2021 By David Quintanilla
Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

On this tutorial, you will learn to rework an HTML record right into a wall of “sticky notes” that look and work like the next:

The impact is constructed up progressively and works on all of the up-to-date browsers like Chrome, Safari, Firefox and Opera. Older browsers merely get some yellow squares.

Step 1: The HTML and Primary Squares

We can be utilizing some frequent CSS properties that work throughout all browsers. As we’re utilizing HTML5 for the impact, the fundamental HTML of our sticky notes is an unordered record with a hyperlink containing all the opposite components in every record merchandise:

Discover that every word is surrounded by a hyperlink. This can be a a great factor to make use of for interactive objects, because it routinely signifies that our notes turn out to be keyboard accessible. If we used the record merchandise for the impact we would must set a tabindex property to get the identical entry.

The CSS to show this into the yellow squares is easy:

We reset issues the browser usually provides us like margins and paddings and the record model to eliminate the bullets of the record.

We wish the record objects to be facet by facet. We’d have used the float property to realize this some time again. Nonetheless, we will now use the far more highly effective flexbox structure module now. This makes it very simple for us to position components in a two-dimensional structure.

All we have now to do is about the show property to flex on the ul factor. It will place all our record objects in a single row. The record components will begin to overflow sooner or later. One of the best ways to keep away from that’s to make use of the flex-wrap property and set its worth to wrap. Additional components will now maintain transferring to subsequent row as an alternative of overflowing.

We model the hyperlink as a yellow rectangle and float all the record objects to the left. The result’s a collection of yellow containers for our record:

Sticky Notes: Basic Yellow Boxes

Flexbox is supported in all main browsers right now. This covers round 98.5% users on the time of scripting this tutorial. If you must assist older browsers, you may think about using float to put out the weather.

Step 2: Drop Shadows and Scribbly Font

Now it’s time to add a drop shadow to the notes to make them stand out and to make use of a scribbly, hand-written font because the word font. For this we use Google Fonts and the fonts they supply us with, referred to as “Reenie Beanie” and “Lato”.

Google Fonts

Utilizing this, we get a easy line of HTML to incorporate this new font into the web page. That is supported by all fashionable browsers.

We then can set some padding to the headings within the sticky notes, and set the font of the paragraphs to the brand new font we included. Discover that Reenie Beanie must be huge to be readable:

With the intention to give the sticky notes a shadow to make them stand out from the web page, we have to apply a box-shadow. Most browsers in use right now assist this property with out use of prefixes.

The box-shadow property units the offset, unfold and colour of the shadow. On this case a darkish gray with an opacity of 70%. Along with the brand new font our sticky notes now appear like this:

Sticky Notes: Box Shadow

Step 3: Tilting the Notes

Each the tilting of the notes and the zooming we’ll add within the subsequent step had been already defined prior to now, in this article by Zurb. So huge because of them for publishing this trick.

With the intention to tilt a component you utilize the transform:rotate property of CSS3, once more including the prefix for every of the browsers:

This tilts all of the hyperlinks by six levels to the left. Now to make the sticky notes seem like randomly tilted, we will use the nth-child property of CSS3:

This tilts each second hyperlink 4 levels to the proper, and offsets it a bit by 5 pixels from the highest. Each third hyperlink will get tilted by three levels to the left and pushed up 5 pixels. And each fifth hyperlink will get rotated 5 levels to the proper and offset ten pixels from the underside. All in all this gives the look of random sticky notes:

Sticky Notes: Random Rotations

Step 4: Zooming the Sticky Notes on Hover and Focus

To make a sticky word stand out we use a bigger drop shadow and the scale transformation of CSS3.

We additionally add the next z-index to make sure that the enlarged sticky word covers the others. As we apply this on hover and focus, it signifies that transferring the mouse over or tabbing to a hyperlink now makes it stand out:

Zooming the Sticky Notes

Step 5: Including Clean Transitions and Colours

The final step is to make the change from tilted to zoomed easy and interesting moderately than sudden. For this we use the CSS3 transition module in its totally different browser vendor implementations:

In essence this says: if one thing is to vary to this factor, don’t simply swap to that different definition however do it progressively throughout 1 / 4 of a second. As one other additional, let’s add some colour into the combo by making each second sticky word inexperienced and each third mild blue:

Your sticky notes ought to now appear like this picture:

Stixky Demo: Random Colors

Step 6: Making the Sticky Notes Editable

The best technique to make the sticky notes editable is to make use of the contenteditable attribute on all of the hyperlinks. It will permit customers to click on contained in the title or the content material of the sticky notes and alter it.

Nonetheless, the modifications will not stick if the person reloads the web page. We are able to change that by utilizing some JavaScript. Load the most recent model of jQuery on the webpage and add the next JavaScript after that.

We can be utilizing localStorage to retailer the information about our sticky notes. The key can be primarily based on the index of our record merchandise and its worth would be the title and content material of the sticky word.

The above code attaches a keyup occasion to all of the sticky notes. At any time when, a person varieties one thing contained in the title or content material of a sticky word, we get its content material utilizing the textual content() methodology. This knowledge is saved within the localStorage of the browser by utilizing the index of the sticky word as a key.

Storing the up to date record in localStorage serves no objective if we will not retrieve it and present it to customers. The next code will loop by way of all of the record objects and test for his or her corresponding keys in localStorage. If the important thing exists, we extract our title and content material from it and replace the HTML of our record merchandise.

With this code in place, it is best to now attempt to edit any of the sticky objects and reload the pages to see if the modifications stick. Here’s a screenshot of my sticky notes.

Sticky Notes: Saved Data

Right here is the entire JavaScript code that you must use in a single place. Please just be sure you have are also additionally loading jQuery on the web page.


There you’ve got it—easily animating and tilted sticky notes. Alll supported by Firefox, Opera, Safari and Chrome and falling again to a set of yellow containers in older browsers. By intelligent use of the nth-child selector and CSS transformations and transitions, we saved ourselves some scripting. Additional, Google’s Internet Font API made it simple to make use of a customized font. Utilizing each hover and focus for the impact additionally signifies that keyboard customers can observe the outcomes as effectively.

We had been additionally ready so as to add some helpful performance to the sticky notes with use of some JavaScript.

When you’re right here, take a look at a few of our different CSS tutorials right here on Envato Tuts+.

This publish has been up to date with contributions from Monty Shokeen. Monty is a full-stack developer who additionally loves to write down tutorials, and to find out about new JavaScript libraries.

Source link