- <div id="wrapper"> <!--contains the forest background image-->
- <div id="main"> <!--the white block containing the text and the 'holes'-->
- <h1>Holes In The Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscing lorem non tellus egestas nec suscipit nunc facilisis. Nam feugiat commodo cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, dolor vel pretium auctor, sapien elit aliquet quam, a porttitor orci dui molestie velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ullamcorper sodales turpis eu iaculis. Fusce in mi vitae lorem sollicitudin laoreet. Vivamus non lobortis quam. Ut imperdiet ante quis urna faucibus malesuada. Vivamus scelerisque augue viverra enim elementum vel eleifend eros semper. Maecenas consectetur imperdiet venenatis. Duis adipiscing posuere odio eget mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat suscipit fermentum. Nunc quis consequat magna.</p> - <section class="trans"></section> <!--this is the first hole-->
- <p> Vestibulum nibh ante, commodo eu bibendum a, mollis non lacus. Duis scelerisque est et ipsum cursus fringilla feugiat nibh porta. Mauris id tortor id purus suscipit interdum vel sit amet tortor. Ut congue enim id ante lacinia mollis. Phasellus eget risus ligula, quis tincidunt ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus a mi sapien, nec pellentesque nibh. Vivamus aliquam pulvinar est, id tempus ligula dignissim consequat. Mauris ullamcorper cursus justo, sit amet iaculis dui cursus at. Suspendisse potenti.</p>
- <p>Aenean venenatis interdum diam sed porttitor. Aenean laoreet quam in mi venenatis scelerisque. Donec imperdiet eros sed elit commodo pretium. Sed nec sem eu diam sagittis consequat. Nulla vulputate libero in ipsum molestie eu vestibulum ipsum posuere. Sed vehicula mattis ligula sed dapibus. Phasellus ac nisi nisi. Suspendisse eu massa in augue imperdiet placerat eu ac justo. Morbi vel dolor non quam laoreet convallis et eu est. Phasellus tempus, magna et tincidunt lobortis, diam dui porta tortor, ut eleifend urna dolor et orci.</p>
- <section class="trans"></section> <!--this is the second hole-->
- <p> Vestibulum nibh ante, commodo eu bibendum a, mollis non lacus. Duis scelerisque est et ipsum cursus fringilla feugiat nibh porta. Mauris id tortor id purus suscipit interdum vel sit amet tortor. Ut congue enim id ante lacinia mollis. Phasellus eget risus ligula, quis tincidunt ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus a mi sapien, nec pellentesque nibh. Vivamus aliquam pulvinar est, id tempus ligula dignissim consequat. Mauris ullamcorper cursus justo, sit amet iaculis dui cursus at. Suspendisse potenti.</p>
- <p>Aenean venenatis interdum diam sed porttitor. Aenean laoreet quam in mi venenatis scelerisque. Donec imperdiet eros sed elit commodo pretium. Sed nec sem eu diam sagittis consequat. Nulla vulputate libero in ipsum molestie eu vestibulum ipsum posuere. Sed vehicula mattis ligula sed dapibus. Phasellus ac nisi nisi. Suspendisse eu massa in augue imperdiet placerat eu ac justo. Morbi vel dolor non quam laoreet convallis et eu est. Phasellus tempus, magna et tincidunt lobortis, diam dui porta tortor, ut eleifend urna dolor et orci.</p>
- </div> <!--end of main-->
- </div> <!--end of wrapper-->
Grains of Sand CSS3 Demos - Holes In A Page
Use border and background-attachment:fixed to create holes in the background of your content.
What We're Aiming For
Step One
Add the content and the basic styling
HTML - this is the same for each step
CSS
- /***Reset the margins and paddings for any elements you use***/
html, body, p, h1, section, div{
margin:0;
padding:0;
} - /***Tell older browsers to treat any html5 elements you use as block elements***/
section{
display:block;
} - /***Style the body to give the general styling for the webpage***/
body{
background: #2b4926;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif; /*Arimo is available from Google Web Fonts*/
font-size: 0.875em;
color: #333;
} - /***Style the wrapper that contains the content is a fixed (or if you prefer flexible) width***/
#wrapper{
width: 960px; /*fits screens with resolution of 1024px wide or greater without horizontal scrolling*/
margin: 0 auto; /*centres the wrapper div*/
background:url(assets/holes-bg.jpg) left top repeat-y; /*if you want the background picture to cover the whole page then move this line and the following line to 'body'*/
background-attachment:fixed; /*prevents the background from scrolling with the page*/
overflow:hidden;
/*add a drop shadow to the wrapper*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
box-shadow: 0 0 10px rgba(0,0,0, .65);
} - /***This is the container for the text and the 'holes'***/
#main{
width: 600px;
float: right;
margin:50px;
/*Give the corners a curve*/
-webikit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
} - /***Style the text***/
#main h1{
font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
color:#606e2f;
padding:5px 0 10px 0;
background:#fff;
}
#main p{
padding:10px 0;
line-height:1.5em;
padding-bottom:10px;
background:#fff;
}
Result
Step Two
Add the holes
CSS FOR THIS STEP
- /***Add a border around the main content, change the sizes to suit your needs. The colour must be the same as the background colour of the text set in step one***/
#main{
border-top:10px solid #fff;
border-right:40px solid #fff;
border-bottom:10px solid #fff;
border-left:40px solid #fff;
} - /***Now set the height and width of the holes***/
section.trans{
width:800px;
height:145px;
}
Result
See a working demo of finished page
Support Section
Explanations Of The CSS3 Used In The Demo
Browser Support
The demo works in all the latest browsers, including IE9 and lower..
