Creating a Rooftop Panel - Exercise

Contact Us or call 1-877-932-8228
Creating a Rooftop Panel - Exercise

Creating a Rooftop Panel

Duration: 20 to 30 minutes.

In this exercise you will use some of the techniques you have learned to create rounded corners to create a rooftop panel that looks like this: Rooftop Panel Image

  1. Open CssBackgroundTricks/Exercises/rooftop.html in your editor.
  2. Fill in the three empty rules to create a rooftop panel as shown in the screenshot above.
  3. You will need to make use of rooftop.gif in the Images folder. The image is 350 x 20 pixels.

Solution:

CssBackgroundTricks/Solutions/rooftop.html
---- C O D E   O M I T T E D ----
<style type="text/css">
body {
	margin:10px;
	font: 1.2em/1.1;
	background:#fff;
}
p {
	margin:15px 20px;
}
.panel {
	position:relative;
	width:350px;
	background-color:#cef;
	padding-bottom:10px;
}
.panel .bg {
	position:absolute;
	height:20px;
	width:100%;
	top:0px;
	left:0px;
	background: transparent url('Images/roofTop.gif') no-repeat;
}

.panel h2 {
	padding-top:15px;
	text-align:center;
	font-size:2em;
	font-variant: small-caps;
	background-color:#add;
	color:#006;
}
</style>
---- C O D E   O M I T T E D ----

Next