Red Upholstery #2
So damn classy. (Higher contrast.)
by nate
CSS
body {
background-color: hsl(0, 100%, 10%);
/* Webkit time! */
background-image:
/* Upholstery buttons */
-webkit-radial-gradient(
hsl(0, 100%, 27%) 4%,
hsl(0, 100%, 18%) 9%,
hsla(0, 100%, 20%, 0) 9%
),
-webkit-radial-gradient(
hsl(0, 100%, 27%) 4%,
hsl(0, 100%, 18%) 8%,
hsla(0, 100%, 20%, 0) 10%
),
/* Pillowy highlights */
-webkit-radial-gradient(
hsla(0, 100%, 30%, 0.8) 20%,
hsla(0, 100%, 20%, 0)
),
-webkit-radial-gradient(
hsla(0, 100%, 30%, 0.8) 20%,
hsla(0, 100%, 20%, 0)
),
/* Diagonal indent shadows */
-webkit-radial-gradient(
hsla(0, 100%, 20%, 1) 35%,
hsla(0, 100%, 20%, 0) 60%
),
-webkit-radial-gradient(
hsla(0, 100%, 20%, 1) 35%,
hsla(0, 100%, 20%, 0) 60%
),
/* Shadows over lines/highlights */
-webkit-radial-gradient(
hsla(0, 100%, 15%, 0.7),
hsla(0, 100%, 20%, 0)
),
-webkit-radial-gradient(
hsla(0, 100%, 15%, 0.7),
hsla(0, 100%, 20%, 0)
),
/* Crease lines */
-webkit-linear-gradient(
45deg,
hsla(0, 100%, 20%, 0) 49%,
hsla(0, 100%, 0%, 1) 50%,
hsla(0, 100%, 20%, 0) 70%
),
-webkit-linear-gradient(
-45deg,
hsla(0, 100%, 20%, 0) 49%,
hsla(0, 100%, 0%, 1) 50%,
hsla(0, 100%, 20%, 0) 70%
),
/* Crease highlights */
-webkit-linear-gradient(
45deg,
hsla(0, 100%, 20%, 0) 50%,
hsla(0, 100%, 45%, 0.7) 50%,
hsla(0, 100%, 20%, 0) 51%
),
-webkit-linear-gradient(
-45deg,
hsla(0, 100%, 20%, 0)...
JavaScript
q