Creating sticky-notes ( post-it ) [closed]

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/18118722/creating-sticky-notes-post-it

标签

html

css

stickynote