Creating sticky-notes ( post-it )

Question

I am designing a web page.

And i want to use sticky-notes (post-it) in my page. Where, each sticky-note is added when we click an add button... Color of sticky notes must change randomly, and it must be tilted and must have some hover effect.

How can i do that ? Only CSS and HTML must be used.

I tried the code which i got from a website

http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/

But, i had some part of my website as list..so when i used this code, it also make the list items as sticky note.. i want to give property only to a div

HTML

<html>
<head>

<ul>

    <li> Not to use sticky note </li>
 </ul>

<div class="sticky"> -------------want to give property to this div only
<ul class="sticky">  
<li > 
<p >Stickynote1</p>  
</li>  
<li class="r" >  
stickyonote2  
</li>  
</ul>
</div>
<div>
</div>  

</div>
</div>
</div>
</div>
</body>
</html>

You can't do things like "colored randomly" and doing anything with an "add button" without JavaScript. — Brigand, Aug 08 '13 at 05:50
@shivan raptor I updated with the code.. Please go through the link for sticky-note code — Vaisakh Cp, Aug 08 '13 at 05:57
@FakeRainBrigand It can be done...please go through the link http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/ — Vaisakh Cp, Aug 08 '13 at 05:58
@VaisakhCp, transitions, rotations, box-shadows, and hover styles can all be done with CSS -- I know. However the two parts you want to change require JavaScript. — Brigand, Aug 08 '13 at 06:00
Are you saying you want to apply the same styling as the link but to a div instead of an li? If so just change occurances of '.sticky li:nth-child' to 'div.sticky:nth-child' — Philip Kirkbride, Aug 08 '13 at 06:02

Philip Kirkbride · Accepted Answer · 2013-08-08T06:10:45.493

It's not possible to generate a random number(and thus random color) using only CSS & HTML. Javascript or a server side language like PHP would be needed.

However you could simulate random colour by having a list of items and have each note a random colour. But random colour chosen would be the same every time you reset the page.

HTML

<ul class="sticky">
<li>Note text</li>
<li>Note text</li>
<li>Note text</li>
</ul>

CSS

.sticky li { background-color: red; }
.sticky li:nth-child(2n) { background-color: green; }
.sticky li:nth-child(3n) { background-color: yellow; }
.sticky li:nth-child(5n) { background-color: blue; }

In this case the note sequence would be

red, green, yellow, green, blue, green, red, green, yellow, blue

Which would give the first time user a feeling of random.

Where 2n and 3n have the same values, 3n will take precedence, and where 3n and 5n have the same values, 5n will take precedence, and so on.

Method in the link you posted is similar to what I wrote. See this section for random color

ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

You've changed the question quite a bit but if you want to apply the same effect to the div instead of 'ul li try changing occurrences of '.sticky li:nth-child' to 'div.sticky:nth-child

Thanks for your response. But i cant use the code below .sticky ul li:nth-child(even) a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); position:relative; top:5px; background:#cfc; } .sticky ul li:nth-child(3n) a{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; backgroud:#ccf' } how can i do that ? — Vaisakh Cp, Aug 08 '13 at 06:13
To get a better response from this community you should organize your own project into smaller programming questions. That way others could find the question/answer useful at a later date. ALSO see my other comment/note at end of my question about replacing .sticky li with div.sticky — Philip Kirkbride, Aug 08 '13 at 06:17

Creating sticky-notes ( post-it )

HTML

1 Answers1

Linked