/* Upholstery Pattern Styles */
li#upholstery, b {
background-color: hsl(0, 100%, 10%);
/*
* You may notice that all the design elements come in pairs:
* This is to create the diagonal repeating pattern.
* Each design element comes with a twin that is offset by
* half of the pattern's width.
*
* The gradients themselves are all handled in background-image.
* Their position (where the offsets happen) take place in background-position.
* Finally, their sizes (which are all the same in this pattern) are in background-size.
*/
/* 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) 49%,
hsla(0, 100%, 45%, 0.7) 50%,
hsla(0, 100%, 20%, 0) 50%
);
/* Mozilla time! */
background-image:
/* Upholstery buttons */
-moz-radial-gradient(
hsl(0, 100%, 27%) 4%,
hsl(0, 100%, 18%) 9%,
hsla(0, 100%, 20%, 0) 10%
),
-moz-radial-gradient(
hsl(0, 100%, 27%) 4%,
hsl(0, 100%, 18%) 9%,
hsla(0, 100%, 20%, 0) 10%
),
/* Pillowy highlights */
-moz-radial-gradient(
hsla(0, 100%, 30%, 0.8) 20%,
hsla(0, 100%, 20%, 0)
),
-moz-radial-gradient(
hsla(0, 100%, 30%, 0.8) 20%,
hsla(0, 100%, 20%, 0)
),
/* Diagonal indent shadows */
-moz-radial-gradient(
hsla(0, 100%, 20%, 1) 35%,
hsla(0, 100%, 20%, 0) 60%
),
-moz-radial-gradient(
hsla(0, 100%, 20%, 1) 35%,
hsla(0, 100%, 20%, 0) 60%
),
/* Shadows over lines/highlights */
-moz-radial-gradient(
hsla(0, 100%, 15%, 0.7),
hsla(0, 100%, 20%, 0)
),
-moz-radial-gradient(
hsla(0, 100%, 15%, 0.7),
hsla(0, 100%, 20%, 0)
),
/* Crease lines */
-moz-linear-gradient(
45deg,
hsla(0, 100%, 20%, 0) 49%,
hsla(0, 100%, 0%, 1) 50%,
hsla(0, 100%, 20%, 0) 70%
),
-moz-linear-gradient(
-45deg,
hsla(0, 100%, 20%, 0) 49%,
hsla(0, 100%, 0%, 1) 50%,
hsla(0, 100%, 20%, 0) 70%
),
/* Crease highlights */
-moz-linear-gradient(
45deg,
hsla(0, 100%, 20%, 0) 50%,
hsla(0, 100%, 45%, 0.7) 50%,
hsla(0, 100%, 20%, 0) 51%
),
-moz-linear-gradient(
-45deg,
hsla(0, 100%, 20%, 0) 49%,
hsla(0, 100%, 45%, 0.7) 50%,
hsla(0, 100%, 20%, 0) 50%
);
background-position:
/* Upholstery buttons */
0 0,
50px 50px,
/* Pillowy highlights */
50px 0,
0 50px,
/* Diagonal Indent Shadows */
50px 0,
100px 50px,
/* Shadows over lines/highlights */
0 0,
50px 50px,
/* Crease lines */
0 0,
0 0,
/* Crease highlights */
1px 1px,
1px 1px;
background-size: 100px 100px;
}
body {
background-color: hsl(0, 0%, 10%);
/* Webkit time! */
background-image:
/* Upholstery buttons */
-webkit-radial-gradient(
hsl(0, 0%, 27%) 4%,
hsl(0, 0%, 18%) 9%,
hsla(0, 0%, 20%, 0) 9%
),
-webkit-radial-gradient(
hsl(0, 0%, 27%) 4%,
hsl(0, 0%, 18%) 8%,
hsla(0, 0%, 20%, 0) 10%
),
/* Pillowy highlights */
-webkit-radial-gradient(
hsla(0, 0%, 30%, 0.8) 20%,
hsla(0, 0%, 20%, 0)
),
-webkit-radial-gradient(
hsla(0, 0%, 30%, 0.8) 20%,
hsla(0, 0%, 20%, 0)
),
/* Diagonal indent shadows */
-webkit-radial-gradient(
hsla(0, 0%, 20%, 1) 35%,
hsla(0, 0%, 20%, 0) 60%
),
-webkit-radial-gradient(
hsla(0, 0%, 20%, 1) 35%,
hsla(0, 0%, 20%, 0) 60%
),
/* Shadows over lines/highlights */
-webkit-radial-gradient(
hsla(0, 0%, 15%, 0.7),
hsla(0, 0%, 20%, 0)
),
-webkit-radial-gradient(
hsla(0, 0%, 15%, 0.7),
hsla(0, 0%, 20%, 0)
),
/* Crease lines */
-webkit-linear-gradient(
45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 0%, 1) 50%,
hsla(0, 0%, 20%, 0) 70%
),
-webkit-linear-gradient(
-45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 0%, 1) 50%,
hsla(0, 0%, 20%, 0) 70%
),
/* Crease highlights */
-webkit-linear-gradient(
45deg,
hsla(0, 0%, 20%, 0) 50%,
hsla(0, 0%, 45%, 0.7) 50%,
hsla(0, 0%, 20%, 0) 51%
),
-webkit-linear-gradient(
-45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 45%, 0.7) 50%,
hsla(0, 0%, 20%, 0) 50%
);
/* Mozilla time! */
background-image:
/* Upholstery buttons */
-moz-radial-gradient(
hsl(0, 0%, 27%) 4%,
hsl(0, 0%, 18%) 9%,
hsla(0, 0%, 20%, 0) 10%
),
-moz-radial-gradient(
hsl(0, 0%, 27%) 4%,
hsl(0, 0%, 18%) 9%,
hsla(0, 0%, 20%, 0) 10%
),
/* Pillowy highlights */
-moz-radial-gradient(
hsla(0, 0%, 30%, 0.8) 20%,
hsla(0, 0%, 20%, 0)
),
-moz-radial-gradient(
hsla(0, 0%, 30%, 0.8) 20%,
hsla(0, 0%, 20%, 0)
),
/* Diagonal indent shadows */
-moz-radial-gradient(
hsla(0, 0%, 20%, 1) 35%,
hsla(0, 0%, 20%, 0) 60%
),
-moz-radial-gradient(
hsla(0, 0%, 20%, 1) 35%,
hsla(0, 0%, 20%, 0) 60%
),
/* Shadows over lines/highlights */
-moz-radial-gradient(
hsla(0, 0%, 15%, 0.7),
hsla(0, 0%, 20%, 0)
),
-moz-radial-gradient(
hsla(0, 0%, 15%, 0.7),
hsla(0, 0%, 20%, 0)
),
/* Crease lines */
-moz-linear-gradient(
45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 0%, 1) 50%,
hsla(0, 0%, 20%, 0) 70%
),
-moz-linear-gradient(
-45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 0%, 1) 50%,
hsla(0, 0%, 20%, 0) 70%
),
/* Crease highlights */
-moz-linear-gradient(
45deg,
hsla(0, 0%, 20%, 0) 50%,
hsla(0, 0%, 45%, 0.7) 50%,
hsla(0, 0%, 20%, 0) 51%
),
-moz-linear-gradient(
-45deg,
hsla(0, 0%, 20%, 0) 49%,
hsla(0, 0%, 45%, 0.7) 50%,
hsla(0, 0%, 20%, 0) 50%
);
background-position:
/* Upholstery buttons */
0 0,
50px 50px,
/* Pillowy highlights */
50px 0,
0 50px,
/* Diagonal Indent Shadows */
50px 0,
100px 50px,
/* Shadows over lines/highlights */
0 0,
50px 50px,
/* Crease lines */
0 0,
0 0,
/* Crease highlights */
1px 1px,
1px 1px;
background-size: 100px 100px;
}
body b {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
bottom: 0;
height: auto;
left: 0;
margin: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
width: auto;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
}
body.hover b {
opacity: 1;
}
/* These styles just make it look like a cool-ass button, ala http://leaverou.me/css3patterns/ */
li, b {
display: block;
position: relative;
width: 300px;
height: 300px;
margin: 0 0 50px;
opacity: 1;
list-style: none;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
-moz-box-shadow:
-3px -3px 10px 2px hsla(0, 0%, 0%, .3) inset,
0 0 0 15px hsla(0, 100%, 100%, .6) inset,
0 0 0 1px hsla(0, 0%, 0%, .5),
2px 2px 10px hsla(0, 0%, 0%, .6);
box-shadow:
-3px -3px 10px 2px hsla(0, 0%, 0%, .3) inset,
0 0 0 15px hsla(0, 100%, 100%, .6) inset,
0 0 0 1px hsla(0, 0%, 0%, .5),
2px 2px 10px hsla(0, 0%, 0%, .6);
-webkit-box-shadow:
0 0 0 15px hsla(0, 100%, 100%, .6) inset,
0 0 0 1px hsla(0, 0%, 0%, .5),
2px 2px 10px hsla(0, 0%, 0%, .6);
-webkit-transition: -webkit-box-shadow 1s, opacity 1s;
-moz-transition: -moz-box-shadow 1s, opacity 1s;
}
body.hover li {
opacity: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
/* Page styling */
html {
margin: 0;
padding: 0;
}
body {
background-color: hsl( 0, 0%, 20% );
color: hsl( 0, 0%, 80% );
font-family: monospace;
font-size: 18px;
margin: 0;
padding: 50px;
}
h1 {
font-size: 36px;
margin-bottom: 18px;
position: relative;
text-shadow: 2px 2px 0 hsl( 0, 0%, 0% );
}
p {
clear: left;
margin-bottom: 18px;
position: relative;
text-shadow: 1px 1px 0 hsla( 0, 0%, 0%, 0.5 );
}
a {
color: hsl( 0, 0%, 50% );
}
<b></b>
<li id="upholstery"></li>
<h1>Upholstery</h1>
<p>Sometimes, you just gotta keep it classy.</p>
$body = $( 'body' );
$( 'li' ).hover(
function() {
$body.addClass( 'hover' );
},
function() {
$body.removeClass( 'hover' );
}
);