Skip to content

Instantly share code, notes, and snippets.

@jcsrb
Created January 11, 2012 13:09
Show Gist options
  • Select an option

  • Save jcsrb/1594583 to your computer and use it in GitHub Desktop.

Select an option

Save jcsrb/1594583 to your computer and use it in GitHub Desktop.
Panel Styles
/**
* Panel Styles
*/
/*body_bg.png*/
body{ background: url(http://i.imgur.com/9OqsE.png);}
body > div{
margin-top:20px;
margin-left:20px;
min-height: 240px;
min-width: 240px;
line-height:240px;
}
div {
display:block;
min-height: 200px;
min-width: 200px;
background-color: white;
float:left;
line-height:200px;
text-align:center;
}
.content_panel {
border-radius: 4px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 3px;
}
.content_panel_shadowed{
border-radius: 4px;
padding: 20px;
box-shadow:
rgba(0, 0, 0, 0.50) 0px 1px 3px,
rgba(0, 0, 0, 0.55) 0 10px 10px -7px,
inset 0 0 8px rgba(255,255,255, 0.4);
background-image: linear-gradient(top, #f3f3f3 , #eee 53%, #fff);
}
.content_panel_inset{
border-radius: 7px;
padding: 20px;
box-shadow:
inset 0 1px 3px rgba(0,0,0, 0.75);
/*diagonal-noise-0.57.png*/
background-image: url(http://i.imgur.com/1hv8f.png), linear-gradient(top, #ebebeb , #fff);
}
.content_panel_embossed{
border-radius: 7px;
padding: 20px;
border: 1px solid #d9d9d9;
background-color: #f8f8f8;
box-shadow:
rgba(0, 0, 0, 0.44) 0px 1px 3px,
inset 0 0 15px #fff;
}
<div class="content_panel">content_panel</div>
<div class="content_panel_shadowed">content_panel_shadowed</div>
<div class="content_panel">
<div class="content_panel_inset">content_panel_inset</div>
</div>
<div class="content_panel">
<div class="content_panel_embossed">content_panel_embossed</div>
</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment