5 Easy Steps to Create a Sticky Note Effect with CSS3 and HTML5

With this HTML5 CSS3 tutorials you will learn to create a sticky note effect. In recent you must be acquainted with feature and achievements of css3 html5 which are useful and quiet worthy to create various impressive and innovative html5 and css3 effects.

If you are literally avid to learn how to render an HTML list to a wall of “sticky notes” which delivers an illusion and function like following. However, this effect is created gradually and works with latest browsers like Firefox, Opera and Webkit browsers which includes Safari and Chrome as well as some other browsers are also available who get some yellow squares in very easy way.

Step 1: The HTML and Basic Squares

In order to initiate, we will opt to go with a simplest version which is supported by almost all browsers. However, as to achieve this effect we are going to employ HTML5. The basic HTML for sticky notes is available in an unordered list incorporating a link which is accompanied by all other components in every list item:

Here, one noticeable thing is that each and every note is incorporated with a link which eventually helps us to employ this automatically. It means that our notes will be interestingly accessible by keyboard. In order to acquire an identical access, if we employ the list item for that effect which we would like then set a tabindex property.

In order to transform the CSS into yellow squares is very simple:

You are supposed to reset all things usually offered by browsers such as paddings, margins and the style of list in order to get rid of the bullets style of the list. Next, we convey some padding to UL element and compile its overflow property to hidden – this ensure that  when you will attempt to float the list items later on which they are retained in the list as well the elements in document listed below will tends to clear the float automatically. Now, we are going to style the links as a yellow rectangle and float all items of list to the left. The result appears is a series of yellow boxes for our list.

It is supported by almost each browser including IE6 and works excellently.

Step 2: Drop Shadows and Scribbly Font

Here, you arrived at this turning point where in order to render a note stand out as well as employing a scribbly and a hand written illusion of note font, you can include a drop shadow effects to the notes. Simply, you are supposed to make a little bit of efforts of employing the Google Fonts API. Here, the font we have employed is called as “Reenie Beanie”. To play with the Google font previewer is most affable way to implement this API.

In account of employing this, we would get a simple HTML line in order to incorporate this new font style to the page. Also, it works with almost all modern browsers available.

Now, in the sticky notes, we are required to define some padding to the headings as well as implement that font we have included to the paragraphs. With reference to the above picture you may notice that Reenie Beanie fonts required being something big for easy readable:

However, you are avid to convey a shadow effect to the sticky notes which make it full of contrast from the pages; you are required to implement a box-shadow. Thus towards this endeavor you can include a line for each of distinct browsers you wish to buttress the links style:

Fortunately, the syntax is identical for each: spread, offset and color – Here, a dark grey of 70% opacity with new font deliver look identical to below specified image.

Step 3: Tilting the Notes

In the context of tilting an element you are supposed to employ transform:rotate property of CSS3, again by including the prefix for every browsers:

However, it results in tilting the links by 6 degrees to left. Moreover, in order to transform the sticky notes which should appear as randomly tilted, you can employ nth-child property of CSS3:

In this obvious impression of random sticky notes, these tilts link four degree to right at every second as well as pushed up by five pixels from the top. Every third link tilted tilts towards left by 3 degrees and offset by five pixels. Later every 5th links rotated towards right by 5 degrees and offset 10 pixels from bottom.

Step 4: Zooming the Sticky Notes on Hover and Focus

In account of larger drop shadow and CSS3’s scale transformation you can render a sticky note more marked and captivating. Next, there is necessity to define these for every distinct browsers:

You are also supposed to include a higher z-index in order to ensure that the enlarged sticky note wrapped with others. As we implement this and focus as well as hover over this, it says that moving the mouse over to tabbing to a link make it rolled out.

Step 5: Adding Smooth Transitions and Colors

Now, finally you are going to perform last action towards rendering tilted to appealing and zoomed smooth instead of sudden. Towards this direction you may employ CSS3 transition module throughout distinct browser vendor implementations:

At nub it states that if something is to be transformed to this element, you can gradually perform in a quarter of second rather than of switching to another definition.

Eventually, without any employment of JavaScript or images you got smoothly animating and tilted sticky notes. Also, it is supported by Firefox, Safari, Opera and Chrome as well as falling back to yellow boxes sets in earlier browsers. In account of employment of nth-child selector and CSS transitions and transformations, you saved yourself some scripting. Moreover, Google’s Web Font API render it it very simple and affable to implement a custom font. However, in account of both focus and hover effect it ensures those users

Rinniee Ginsburg

Rinniee Ginsburg is a email template developer and writer at EmailChopper. Her technical competency has helped the professionals explore the new techniques in practicing the innovative email development. She has written various articles that accentuate the importance of PSD to Email conversion, smart procedure for responsive email template development & many more. All her writeups have become a source for many professionals and business players to grab the valuable information.