付箋ぽい見た目をCSSで作る

付箋ぽい見た目でTodoリストとか作ったらかわいいなあと思って。

参考サイトをメモ。

himpotan.net

こちらのサイトを参考に、ちょっと変えて下記のコードを使うことにしました。

 .fusen {
    width: 400px;
    position: relative;
    z-index: 0;
  }
  
  .fusen ul li {
    font-size: 0.9em;
    margin: 1.6em 0;
    padding: 1em;
    position: relative;
    list-style-type: none;
    background: linear-gradient(to right, #ffffcc 0%, #fff1c1 0.5%, #fff1c1 13%, #ffffcc 16%);
  }
  
  .fusen ul li::after {
    content: "";
    display: block;
    position: absolute;
    left: 1px;
    z-index: -1;
    bottom: 5px;
    right: 0;
    height: 60%;
    width: 98%;
    /*background: rgba(0, 0, 0, 0.5);*/
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow:0px 0px 6px 3px #fcfcfc,1px 2px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0px 0px 6px 3px #fcfcfc,1px 2px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0px 0px 6px 3px #fcfcfc,1px 2px 2px 2px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
  }