As many of you have probably noticed, the “Slideshow Series” contains little to no CSS styling. Soon after completing my previous post, I realized that some major work needs to be done to improve the general appearance of the show; indeed, many only view a slideshow because it looks good!
Follow along as I present an intricate (yet easy to code) slideshow styling.
I love recycling old code. That’s exactly why almost every single line in my previous example will be used. CSS constitutes the only main change.
To begin, let’s add a few inline reset styles:
* {
margin: 0;
padding: 0;
font: inherit;
}
I constantly use font: inherit;
in my reset to ensure that all form elements use my main body font.
Here is some quick styling for the typography used in our slideshow:
body {
font: 12px/18px Georgia, Serif;
}
A pleasing font is always great!
In order to place the slideshow in the center of the screen, we can add some minor modifications to ul.ppt
:
ul.ppt {
position: relative;
width: 524px;
margin: 0 auto;
}
The width
and margin:
properties accomplish this task.
At this point, I decided that captions for each photo would be a subtle, but informative addition:
<ul class="ppt">
<li><img src="mountain.jpg" alt="Ethernet Cable"></img><p>Lorem ipsum dolor sit amet consecutar adipliscing elit.</p></li>
<li><img src="lake.jpg" alt="Spectacles"></img><p>Senectus alquilam morbi tristique.</p></li>
<li><img src="trees.jpg" alt="Leaning Tower of Pisa"></img><p>Pellentesque habitant malesuada.</li>
</ul>
Each caption is contained in the <p>
tags. To provide some simple placement and color to the text, we can edit .ppt li
, .ppt img
, and add in custom styles to .ppt p
:
.ppt li {
position: absolute;
top: 0;
left: 0;
padding: 5px;
padding-bottom: 1px;
list-style-type: none;
background-color: #f2f2f2;
border: 1px solid #e7e7e7;
}
.ppt img {
border: 1px solid #222;
padding: 5px;
background-color: #444;
}
.ppt p {
color: #333;
text-align: center;
padding-bottom: 1px;
}
With these styles in place, each image obtains a simple caption with an eye-pleasing border.
To complete our slideshow, it’s imperative that we customize our buttons through two simple graphics:
#buttons {
width: 230px;
margin: 0 auto;
}
button {
padding: 2px;
background: url(input-top.jpg) repeat-x;
border: 1px solid #ccc;
width: 73px;
margin: 10px auto;
}
button:hover {
background: url(input-hover.jpg) bottom repeat-x;
}
These graphics are provided in the download located at the top of this page. Our code is now complete!
I’ve also updated the images used in the sample slideshow. I know most of you were bored of that ethernet cable.