Pure CSS3 Windows Notepad

Taufik Nurrohman

• 15484
• 22
• 4

A Notepad illustration with pure CSS. All the effects in it are made by the dominance of CSS box-shadow and a linear-gradient. Inset box-shadow is used to create shiny effect around the darker border color. Something like this:

div {
  background-color:#666;
  border:1px solid #333;
  box-shadow:inset 0px 1px 0px white, inset 0px -1px 0px white, 1px 0px 0px white, -1px 0px 0px white;
}

I should be able to use an easier way like this:

div {
  background-color:#666;
  border:1px solid #333;
  box-shadow:inset 0px 0px 0px 1px white;
}

But, unfortunately I made this when I was don't quite understand about how the box-shadow works completely T_T

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room