Создание заметок ( post-it)

Я проектирую веб-страницу.

И я хочу использовать заметки (пост-это) на моей странице. Где каждая заметка добавляется, когда мы нажимаем кнопку добавления... Цвет заметок должен меняться случайным образом, он должен быть наклонен и иметь некоторый эффект при наведении.

Как я могу это сделать? Только CSS и HTML должны быть использованы.

Я попробовал код, который я получил с сайта

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

Но у меня была какая-то часть моего веб-сайта в виде списка... поэтому, когда я использовал этот код, он также сделал элементы списка заметкой. Я хочу передать свойство только 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 ответ

Решение

Невозможно сгенерировать случайное число (и, следовательно, случайный цвет), используя только CSS и HTML. Javascript или серверный язык, как PHP будет необходимо.

Тем не менее, вы можете имитировать случайный цвет, имея список элементов и каждый примечание случайного цвета. Но выбранный случайный цвет будет одинаковым каждый раз, когда вы сбрасываете страницу.

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; }

В этом случае последовательность нот будет

красный, зеленый, желтый, зеленый, синий, зеленый, красный, зеленый, желтый, синий

Что дало бы пользователю впервые ощущение случайности.

Если 2n и 3n имеют одинаковые значения, 3n будет иметь приоритет, а 3n и 5n имеют одинаковые значения, 5n будет иметь приоритет и так далее.

Метод в ссылке, которую вы разместили, похож на то, что я написал. Смотрите этот раздел для случайного цвета

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;
}

Вы немного изменили вопрос, но если вы хотите применить тот же эффект к div вместо 'ul li, попробуйте изменить вхождения'.sticky li:nth-child'на'div.sticky:nth-child

Источник
Другие вопросы по тегам