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>

标签： html css stickynote

1条回答

▲ chillily

2楼-- · 2020-03-31 05:43

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

0人赞添加讨论(0) 举报

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

HTML

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间