This solution demonstrates CSS3 coding technique implementing online slide show with "darkbox" (optionally- "lightbox") pop-up effects as pure CSS3 and HTML5; it does not use any JavaScript/jQuery.
DEMO
Fig 1. Slideshow thumbnails, demo screenshot
The entire demo is encapsulated into a single .htm file (see code Listing 1). In addition to the darkbox effect and slide navigation, it also demonstrates various aesthetic enhancements via CSS3/HTML5 features, like:
- color gradients
- rounded corners
- box shadow
- text shadow
- text rotate
Browser Compatibility
Essentially all web browsers supporting HTML5 standard would be able to run this application and its derivatives. In particular, the list of all major browsers fully/partially compatible with HTML5 follows:
- Mozilla FireFox 4 and higher
- Google Chrome 10 and higher
- Microsoft IE 9 and higher (some issues noticed with color gradients and text rotation)
- Apple Safari 5 and higher
HTML 5 and CSS 3
The entire application has been encapsulated in a single text file mostly for didactic purpose providing the holistic view of the solution. In practice, CSS styles can be placed in a separate file adhering to the programming paradigm of separation of concerns (i.e. separating content from formatting and functionality).
Listing 1. HTML5/CSS3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SLIDE SHOW CSS3</title>
<meta name="Description" content="ONLINE SLIDE SHOW AS PURE HTML5/CSS3 SOLUTION, NO JAVASCRIPT" />
<meta name="Keywords" content="web design development, slide show CSS3, apple store ny " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Author" content="Alexander Bell" />
<meta http-equiv="Copyright" content="2010-2015 Infosoft International Inc" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta name="Robots" content="all" />
<meta name="Distribution" content="global" />
<style type="text/css">
.divDarkBox
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
.divDarkBox:target { display:block; }
.divDarkBox div
{
position:fixed;
top:10%;
left:25%;
width:50%;
height:60%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:102;
}
.divDarkBox div h1
{
font-size:0.9em;
color:#bababa;
font-weight:normal;
margin-top:20px;
z-index:103;
-moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.9);
-webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
text-shadow: 3px 4px 6px rgba(10,10,10,0.9);
}
#divThumbnails
{
position:relative;
margin: 10px 0 0 0;
height:150px;
padding-top:30px;
background-color:#cacaca;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 49%, #909090 50%, #cacaca 50%, #cacaca 90%, #ababab);
background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.49, #cacaca), color-stop(0.50, #909090), color-stop(0.50, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
}
#divThumbnails img
{
min-width:50px;
max-width:100px;
height:100px;
padding:10px;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
z-index:1;
}
.divDarkBox img
{
padding:20px;
z-index:105;
border: solid 1px gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #303030 50%, #101010);
background: -webkit-gradient(linear, center top, center bottom, from(#dadada), color-stop(0.05, #505050), color-stop(0.5, #bababa), color-stop(0.5, #303030), to(#101010));
min-height:300px;
min-width:300px;
max-height:60%;
max-width:80%;
}
img:hover, .divDarkBox ul a:hover
{
background:#505050;
background: -moz-linear-gradient(top, #eaeaea, #505050 50%, #303030 50%, #404040);
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea),
color-stop(0.5, #505050), color-stop(0.5, #303030), to(#404040));
}
.divPopUpMainContent ul li {display:inline;}
.divPopUpMainContent ul a {
padding:3pt;
font-size:28pt;
font-weight:700;
color:Yellow;
text-decoration:none;
border: solid 1px Gray;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:110;
}
.divDarkBox .divDemo {
position absolute;
top:15%;
left:0%;
font-size:4em;
color:Olive;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.divPopUpMainContent { margin-top:120px; }
</style>
</head>
<body>
<h3>Click on the thumbnail image to start</h3>
<!--
<div id="divThumbnails">
<a href="#divDarkBox1"><img src="http://infosoft.biz/Img/AppleStore/Apple-GEDC3429_small.JPG" alt="APPLE® STORE" /></a>
<a href="#divDarkBox2"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3477_small.JPG" alt="iCIRCUIT" /></a>
<a href="#divDarkBox3"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3446_small.JPG" alt="ZENO-5000" /></a>
<a href="#divDarkBox4"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3453_small.JPG" alt="FRACTION CALCULATOR" /></a>
<a href="#divDarkBox5"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3455_small.JPG" alt="YOUTUBE PLAYER" /></a>
</div>
<!--
<div id="divDarkBox1" class="divDarkBox">
<!--
<div class="divDemo">COOL DEMO!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li> <!--
<li><a href="#divDarkBox5">◂</a></li> <!--
<li><a href="#divDarkBox2">▸</a></li> <!--
<li><a href="#divDarkBox5">▸▮</a></li> <!--
</ul>
<!--
<a href="http://infosoft.biz/bus.aspx?bus=M1" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/Apple-GEDC3429.JPG" alt="APPLE® STORE IN MANHATTAN NY" /></a>
<h1>APPLE<sup>®</sup> STORE IN MANHATTAN, NY</h1>
</div>
</div>
<!--
<div id="divDarkBox2" class="divDarkBox">
<div class="divDemo">WOW, CIRCUIT!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◂</a></li> <!--
<li><a href="#divDarkBox1">⇦</a></li>
<li><a href="#divDarkBox3">⇨</a></li>
<li><a href="#divDarkBox5">▸▮</a></li> <!--
</ul>
<a href="http://infosoft.biz/download.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3477.JPG" alt="iCIRCUIT SCHEMATIC DIAGRAM" /></a>
<h1>iCIRCUIT SCHEMATIC DIAGRAM EDITOR</h1>
</div>
</div>
<!--
<div id="divDarkBox3" class="divDarkBox">
<div class="divDemo">VERY NICE!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◂</a></li> <!--
<li><a href="#divDarkBox2">⇦</a></li>
<li><a href="#divDarkBox4">⇨</a></li>
<li><a href="#divDarkBox5">▸▮</a></li>
<li><a href="http://infosoft.biz/volta.aspx" target="_blank">LINK</a></li>
</ul>
<a href="http://infosoft.biz/volta.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3446.JPG" alt="ZENO-5000" /></a>
<h1>SCIENTIFIC CALCULATOR <strong>ZENO-5000</strong> (TESTING MY STUFF:)</h1>
</div>
</div>
<!--
<div id="divDarkBox4" class="divDarkBox">
<div class="divDemo">VERY USEFUL!</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◄</a></li> <!--
<li><a href="#divDarkBox3">⇦</a></li>
<li><a href="#divDarkBox5">⇨</a></li>
<li><a href="#divDarkBox5">►▮</a></li><!--
<li><a href="http://infosoft.biz/Fractions.aspx" target="_blank">LINK</a></li><!--
</ul>
<a href="http://infosoft.biz/Fractions.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3453.JPG" alt="FRACTION CALCULATOR" /></a>
<h1>MOBILE FRACTION CALCULATOR</h1>
</div>
</div>
<!--
<div id="divDarkBox5" class="divDarkBox">
<div class="divDemo">YouTube Player</div>
<div class="divPopUpMainContent">
<ul>
<li><a href="#">⊗</a></li>
<li><a href="#divDarkBox1">▮◄</a></li>
<li><a href="#divDarkBox4">⇦</a></li>
<li><a href="#divDarkBox5">⇨</a></li>
<li><a href="#divDarkBox5">►▮</a></li><!--
<li><a href="http://infosoft.biz/download.aspx" target="_blank">LINK</a></li><!--
</ul>
<a href="http://infosoft.biz/download.aspx" target="_blank"><img src="http://infosoft.biz/Img/AppleStore/iPad2-GEDC3455.JPG" alt="YOUTUBE PLAYER" /></a>
<h1>EMBEDDED YOUTUBE PLAYER</h1>
</div>
</div>
</body>
</html>
References
- HTML5/CSS 3 Modal Dialog Box; no JavaScript
- HTML 5, CSS3 aesthetic enhancement: buttons[^]
- Hyperlinked Image in ASP.NET GridView[^]
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
. And so true, the anchor tag can do a lot of tricks 
