- Jun 25, 2009
- 36 Comments
- Tutorials
How to Make a Slideshow with a Transparent PNG Frame
Today’s tutorial is headed back to the basics.
We’re focusing on a common question for those inexperienced to working with layered PNG’s in web layouts. The end result probably won’t do much new to excite veterans, but it will hopefully save you a headache in the long run — especially if you’re new to the idea.
Side Note: The slideshow today was inspired after building one for the new One Mighty Roar site, which will be up in a matter of days. In the mean time you can consider this a “teaser” of sorts.
The Goal
By the end of this tutorial we’ll have created a basic slideshow that uses a combination of PNG transparency and layered positioning to create the effect of each slides being held in by the bottom corners.
Download Project Files
If you’re following along step by step, this project will make use of several custom images and the jQuery Cycle plugin for slide shows. You’ll need to download both to keep up.
If you’re more interested in getting a copy of the results, you can just download the completed project files using the link above.
Why not a GIF?
I’m not suggesting that the PNG is a complete replacement for the GIF. That being said, there is a difference that makes the PNG format better to use in most transparency cases. The PNG format can display a varying level of transparency (e.g. 50%) while the GIF can only display transparency as “on” or “off”. As a result it’s often better to work with PNG, especially when semi-transparent elements like fading gradients and shadows are involved.
The Stack Up
Here’s a look at how this slideshow comes together:
As you can see it’s made of three different layers, but only the PNG will require some extra work. Layers two and three will be made up of an unordered list where each item contains an image. Also, don’t be concerned about the “raggedness” of the PNG layer image — it won’t matter when everything is placed.
The HTML
Start by making a new HTML document. After loading in the jQuery assets and pointing to the stylesheet, we’ll need to build the slideshow structure. I’ve done it here with an unordered list named “slideshow” that has been nested inside the “billboard” div, which will house the backdrop image for the show.
Below that is a div called “edge-holders” which we will use to display our PNG image containing the corners. Don’t worry about its positioning yet; we’ll be fixing it in the CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Slideshow with PNG Frame Layer</title> <link rel="stylesheet" href="png-slideshow.css"/> <!--Load in jQuery Assets--> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> </head> <body> <div id="top-zone"> <div id="billboard"><!--Container for slideshow elements--> <ul class="slideshow"> <li><img src="images/slide-one.jpg" alt="Baffling, isn't it?"/></li> <li><img src="images/slide-two.jpg" alt="What's the metric system?"/></li> </ul> </div> <div class="edge-holders"><!--Overlay onto slideshow--></div> </div><!--End of Top Zone--> </body> </html> |
The CSS
There are a couple notable things going on in this CSS. Once you’ve copied the code below into your project files, meet down below for further explanation.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
*{margin:0; padding:0; border:0;} body{background:#FAFAFA;} /* Slideshow & Billboard Images */ #top-zone{overflow:hidden; width:960px; margin:0 auto; height:420px;} /*Here to keep images hidden in IE mostly*/ #billboard{width:940px; height:400px; margin:10px 10px 20px 10px; overflow:hidden; background:url('images/billboard-bg.jpg') no-repeat top center;} .slideshow{width:920px; height:360px; margin:10px; overflow:hidden;} .slideshow li{list-style:none; float:left; display:inline; position:relative;} .edge-holders{width:940px; height:400px; background:url('images/edge-holders.png') no-repeat top center; position:relative; margin:10px; z-index:10; top:-420px;} |
Adding a position of “relative” to key slideshow elements allows us to position it freely without having to mess with margins and padding.
Remember how the edge-holders div was below the slideshow area before? With a combination of z-index (to keep it on the top layer) and positioning, we’ve now placed it directly on top of the whole thing.
By now you can see a much more layered effect going on without having to save awkwardly shaped slides. Notice that only the slides themselves are being loaded in through actual image tags. Since the slideshow structure images are design helpers, it makes more sense to simply include them as background images instead.
You’d probably be fine removing some of the “overflow:hidden” styles placed on these elements. I only have them in place to ensure that it plays well with more complicated layouts, but it still may be excessive.
The jQuery
Since the focus of this tutorial is not on the jQuery side of things, we’ll be keeping it simple. The code below simply takes the contents of our “slideshow” class unordered list and makes a slideshow out of each item using a sliding transition. It can be pasted into the head tag of your HTML page, or added into an external javascript file.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> |
Internet Explorer and Overflow Hidden
Internet Explorer does many things well. CSS is not one of them. In order to get the overflow hidden working correctly with images in Internet Explorer, you must make sure that the element has a defined height. In the case of this slideshow the “top-zone” div tag is responsible for this fix.
A Word on Backwards Compatibility
It seems that whenever PNG format is brought into the equation, a concern about compatibility inevitably comes up. Let’s be clear: the PNG format works with all popular modern browsers. When you hear about “PNG fixes”, they are typically referring to methods that allow old browsers to display the transparency correctly. Most commonly this includes Internet Explorer 6, which is at a <15% usage and plummeting.
Because of this, I won’t be covering how to fix these problems for older browsers. A simple Google search should offer plenty of help if this applies to you.
