Sticky notes with CSS3

Http://robsobers.com/sticky-notes-with-css/ http://jsfiddle.net/rsobers/a9eFX/150/ What is a sticky notes with css3 How do you make a sticky notes with css3? This script and codes were developed by Hai Nguyen on 04 April 2022, Monday.

How do I make an sticky notes with css3?
  1. Sticky notes with CSS3 Previews
  2. Sticky notes with CSS3 HTML Codes
  3. Sticky notes with CSS3 CSS Codes
Sticky notes with CSS3 Previews

Sticky notes with CSS3 HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sticky notes with CSS3</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>

<ul id="notes">
    <li>
        <p>Push new feature to Kiln for code review</p>
    </li>
    <li class="kiln">
        <p>Browse hacker news for a bit</p>
    </li>
    <li>
        <p>Read JavaScript: The Good Parts by Douglas Crockford</p>
    </li>    
</ul>
  
  
</body>
</html>

Sticky notes with CSS3 CSS Codes

body {
    background: #B2CCCC;
}

#notes li {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin: 25px auto;
    padding: 60px 15px 15px 15px;
    background: #fff url(http://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px;
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #000;
    -webkit-transform: rotate(-.5deg); 
    -moz-transform: rotate(-.5deg); 
    -o-transform: rotate(-.5deg);     
}

#notes li:nth-child(even) {
    -webkit-transform: rotate(.5deg); 
    -moz-transform: rotate(.5deg); 
    -o-transform: rotate(.5deg);     
}

#notes li.kiln
{
    background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif);
}

#notes li p {
    text-align: center;
    font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif;
    color: #000;
    text-shadow: white 1px 1px 0px;
    overflow:hidden;
}

#notes li::before {
    content: ' ';
    display: block;
    position: absolute; 
    left: 115px;
    top: -15px;
    width: 75px;
    height: 25px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg); 
    -moz-transform: rotate(-6deg); 
    -o-transform: rotate(-6deg); 
}

#notes li:nth-child(even)::before {
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    -o-transform: rotate(6deg);
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.