Ajax Loader
×

Pure CSS3 Windows Notepad

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:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 Windows Notepad

    CSSDeck G+