Online Slide Show as Pure HTML5/CSS3 Solution: NO JavaScript

DrABELL

4.97/5 (42 votes)

15 Jun 2015CPOL1 min read

293.9K

111

SAY IT WITH CSS3! - Online slide show implements darkbox pop-up using pure CSS3/HTML5 features

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

HTML

<!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">
       /* pop-up div covers entire area */
        .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;
        }
        
        /* ! target pseudo-class is the key to solution ! */
        .divDarkBox:target  { display:block; }
        
        /* virtual frame w/controls, image and caption */
        .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;
        }
        
        /* image caption  */
        .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); 
        }        

        /* thumbnais container */
        #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));
        }

        /* thumbnails image */
        #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;
        } 
         
        /* darkbox image */
        .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));
        }

        /* darkbox nav: highest z-index */
        .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;
        }
        
        /* optional text: 45Deg */
        .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>
    <!-- NAV THUMBNAILS -->
    <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>

    <!--1st -->
    <div id="divDarkBox1" class="divDarkBox">
        <!--OPTIONAL TEXT 45 DEG-->
        <div class="divDemo">COOL DEMO!</div>
        <div class="divPopUpMainContent">
            <ul>
                <li><a href="#">&#8855</a></li> <!--CLOSE SYMBOL-->
                <li><a href="#divDarkBox5">&#9666;</a></li> <!--BACK ARROW: MOVE BACK|LAST-->
                <li><a href="#divDarkBox2">&#9656;</a></li> <!--FORWARD ARROW: MOVE NEXT-->
                <li><a href="#divDarkBox5">&#9656;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <!--FULL SIZE IMAGE: ON CLICK MOVE NEXT-->
            <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>

    <!--2nd-->
    <div id="divDarkBox2" class="divDarkBox">
        <div class="divDemo">WOW, CIRCUIT!</div>
        <div class="divPopUpMainContent">
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9666;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox1">&#8678</a></li>
                <li><a href="#divDarkBox3">&#8680</a></li>
                <li><a href="#divDarkBox5">&#9656;&#9646;</a></li> <!--MOVE LAST-->
            </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>

    <!-- 3rd -->
    <div id="divDarkBox3" class="divDarkBox">
        <div class="divDemo">VERY NICE!</div>
        <div class="divPopUpMainContent">
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9666;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox2">&#8678</a></li>
                <li><a href="#divDarkBox4">&#8680</a></li>
                <li><a href="#divDarkBox5">&#9656;&#9646;</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>

    <!-- 4th -->
    <div id="divDarkBox4" class="divDarkBox">
        <div class="divDemo">VERY USEFUL!</div>
        <div class="divPopUpMainContent">
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox3">&#8678</a></li>
                <li><a href="#divDarkBox5">&#8680</a></li>
                <li><a href="#divDarkBox5">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://infosoft.biz/Fractions.aspx" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </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>

    <!-- 5th -->
    <div id="divDarkBox5" class="divDarkBox">
        <div class="divDemo">YouTube Player</div>
        <div class="divPopUpMainContent">
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox4">&#8678</a></li>
                <li><a href="#divDarkBox5">&#8680</a></li>
                <li><a href="#divDarkBox5">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://infosoft.biz/download.aspx" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)