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

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

The impact is constructed up steadily 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 Fundamental Squares

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

Discover that every word is surrounded by a hyperlink. This can be a a great component to make use of for interactive objects, because it routinely implies 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 straightforward:

We reset issues the browser usually offers us like margins and paddings and the record model to do away with the bullets of the record.

We would like the record objects to be aspect by aspect. We might have used the float property to attain this some time again. Nevertheless, we are able to now use the rather more highly effective flexbox format module now. This makes it very straightforward for us to position parts in a two-dimensional format.

All we’ve to do is about the show property to flex on the ul component. It will place all our record objects in a single row. The record parts will begin to overflow sooner or later. The easiest way to keep away from that’s to make use of the flex-wrap property and set its worth to wrap. Further parts will now hold 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 sequence of yellow containers for our record:

Sticky Notes: Basic Yellow Boxes

Flexbox is supported in all main browsers at this time. This covers round 98.5% users on the time of scripting this tutorial. If you want to 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 large to be readable:

With a view 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 at this time 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 to be 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 have been already defined up to now, in this article by Zurb. So large because of them for publishing this trick.

With a view 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 look like randomly tilted, we are able to use the nth-child property of CSS3:

This tilts each second hyperlink 4 levels to the appropriate, 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 appropriate 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 a better z-index to make sure that the enlarged sticky word covers the others. As we apply this on hover and focus, it implies that transferring the mouse over or tabbing to a hyperlink now makes it stand out:

Zooming the Sticky Notes

Step 5: Including Easy Transitions and Colours

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

In essence this says: if one thing is to alter to this component, don’t simply swap to that different definition however do it steadily 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 to be this picture:

Stixky Demo: Random Colors

Step 6: Making the Sticky Notes Editable

The simplest strategy 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.

Nevertheless, the adjustments will not stick if the consumer reloads the web page. We will change that through the use of some JavaScript. Load the most recent model of jQuery on the webpage and add the next JavaScript after that.

We might be utilizing localStorage to retailer the info about our sticky notes. The key might be based mostly 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. Every time, a consumer 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 information is saved within the localStorage of the browser through the use of the index of the sticky word as a key.

Storing the up to date record in localStorage serves no goal if we won’t retrieve it and present it to customers. The next code will loop by all of the record objects and examine 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, you must now attempt to edit any of the sticky objects and reload the pages to see if the adjustments stick. Here’s a screenshot of my sticky notes.

Sticky Notes: Saved Data

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


There you have 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 Net Font API made it straightforward to make use of a customized font. Utilizing each hover and focus for the impact additionally implies that keyboard customers can observe the outcomes as properly.

We have 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 submit has been up to date with contributions from Monty Shokeen. Monty is a full-stack developer who additionally loves to put in writing tutorials, and to find out about new JavaScript libraries.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *