jdsteinbach
9/6/2012 - 5:13 PM
border-top + box-shadow for content divider with depth illusion
border-top + box-shadow for content divider with depth illusion
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}<body>
<div id="container">
<h1>Page Title</h1>
<h3>Content Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl augue, faucibus quis varius eu, mattis et ante. Duis quis sollicitudin nunc. Maecenas vel feugiat mauris. Nam mauris eros, laoreet sed ultricies pretium, varius nec ipsum.</p>
<h3>Content Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl augue, faucibus quis varius eu, mattis et ante. Duis quis sollicitudin nunc. Maecenas vel feugiat mauris. Nam mauris eros, laoreet sed ultricies pretium, varius nec ipsum.</p>
<h3>Content Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl augue, faucibus quis varius eu, mattis et ante. Duis quis sollicitudin nunc. Maecenas vel feugiat mauris. Nam mauris eros, laoreet sed ultricies pretium, varius nec ipsum.</p>
<h3>Content Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl augue, faucibus quis varius eu, mattis et ante. Duis quis sollicitudin nunc. Maecenas vel feugiat mauris. Nam mauris eros, laoreet sed ultricies pretium, varius nec ipsum.</p>
</div>
</body>
/*
border-top + box-shadow for content divider with depth illusion
*/
* {
font-family: "Myriad Pro",Helvetica,sans-serif;
}
body {
background: #aaa;
}
#container {
width: 600px;
margin: 0 auto;
background: #ddd;
padding: 1em 2em;
-moz-box-shadow: 0 0 14px 0 #333;
-webkit-box-shadow: 0 0 14px 0 #333;
box-shadow: 0 0 14px 0 #333;
}
h3 {
margin-top: 1.6em;
padding-top: 1.6em;
width: 100%;
border-top: 1px solid #fff;
-moz-box-shadow: 0 -2px 0 -1px #bbb;
-webkit-box-shadow: 0 -2px 0 -1px #bbb;
box-shadow: 0 -2px 0 -1px #bbb;
font-family: "Palatino Linotype",Palatino,Georgia,serif;
}