Sometimes when writing little articles, reviews, tips, whatever for the web site it’s necessary to interject little snippets of code or short quotables. For instance, when giving example code, I’ve been doing the following:
man halt
The pretty <blockquote> box is created by the following bit of CSS code:
blockquote {
margin: 1em 4em 1em 0.5em;
padding: 0.5em 10px 0.5em 10px;
border-top: solid 1px #C0C0C0;
border-right: solid 1px #C0C0C0;
border-bottom: solid 1px #C0C0C0;
border-left: solid 4px #C0C0C0;
background: #EFEFEF;
font-size: 12px;
font-weight: normal;
text-align: left;
font-style: normal;
}
Using a bit of simple CSS we can also create nice little shadow boxes. To do this, we’ll rely on CSS’s relative positioning to create the shadow effect.
.shadowbox {
background: #ccc;
position: relative;
top: 2px;
left: 2px;
}
.shadowbox div {
background: #333;
border: 2px solid #000;
color: #fff;
padding: 10px;
position: relative;
top: -2px;
left: -2px;
}
After adding the code to your site’s style-sheet, creating the actual box is simple. For example, using the following code:
<div class="shadowbox">
<div>Simple example shadow box.</div>
</div>
We can create a shadow box that looks something like this:
Simple example shadow box.
Of course, the background colors and borders can be changed to ones that suit your particular need. Also, by simply adding a width line to the shadowbox class you can alter the width of the box. Feel free to experiment!
This entry was posted in Tips. Bookmark the
permalink. Both comments and trackbacks are currently closed.
Tip: Shadow Boxes with CSS
Sometimes when writing little articles, reviews, tips, whatever for the web site it’s necessary to interject little snippets of code or short quotables. For instance, when giving example code, I’ve been doing the following:
The pretty <blockquote> box is created by the following bit of CSS code:
Using a bit of simple CSS we can also create nice little shadow boxes. To do this, we’ll rely on CSS’s relative positioning to create the shadow effect.
After adding the code to your site’s style-sheet, creating the actual box is simple. For example, using the following code:
We can create a shadow box that looks something like this:
Of course, the background colors and borders can be changed to ones that suit your particular need. Also, by simply adding a width line to the shadowbox class you can alter the width of the box. Feel free to experiment!