Click here to Skip to main content
13,291,254 members (65,610 online)
Click here to Skip to main content
Add your own
alternative version


62 bookmarked
Posted 16 Mar 2011

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

, 15 Jun 2015
Rate this:
Please Sign up or sign in to vote.
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.


Working demo:"Apple Store in the New York City" slide show  (image links follow):

Fig 1. Slideshow thumbnails, demo screenshot

iPad 2 Slide Show CSS 3
Fig.2. Slide #1 implemented as CSS3 'Dark Box", sample 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="">
    <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 */
        /* ! target pseudo-class is the key to solution ! */
        .divDarkBox:target  { display:block; }
        /* virtual frame w/controls, image and caption */
        .divDarkBox div  
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        /* image caption  */
        .divDarkBox div h1  
            -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 */
            margin: 10px 0 0 0;
            -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
            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);        
        /* darkbox image */
        .divDarkBox img 
            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));
        img:hover, .divDarkBox ul a:hover 
            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  {
            border: solid 1px Gray;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        /* optional text: 45Deg */
        .divDarkBox .divDemo  {
            position absolute;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);

        .divPopUpMainContent  { margin-top:120px; }


    <h3>Click on the thumbnail image to start</h3>
    <!-- NAV THUMBNAILS -->
    <div id="divThumbnails">
        <a href="#divDarkBox1"><img src="" alt="APPLE® STORE" /></a>
        <a href="#divDarkBox2"><img src="" alt="iCIRCUIT" /></a>
        <a href="#divDarkBox3"><img src="" alt="ZENO-5000" /></a>
        <a href="#divDarkBox4"><img src="" alt="FRACTION CALCULATOR" /></a>
        <a href="#divDarkBox5"><img src="" alt="YOUTUBE PLAYER" /></a>

    <!--1st -->
    <div id="divDarkBox1" class="divDarkBox">
        <!--OPTIONAL TEXT 45 DEG-->
        <div class="divDemo">COOL DEMO!</div>
        <div class="divPopUpMainContent">
                <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-->
            <a href="" target="_blank"><img src="" alt="APPLE® STORE IN MANHATTAN NY" /></a>
            <h1>APPLE<sup>®</sup> STORE IN MANHATTAN, NY</h1>

    <div id="divDarkBox2" class="divDarkBox">
        <div class="divDemo">WOW, CIRCUIT!</div>
        <div class="divPopUpMainContent">
                <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-->
            <a href="" target="_blank"><img src="" alt="iCIRCUIT SCHEMATIC DIAGRAM" /></a>

    <!-- 3rd -->
    <div id="divDarkBox3" class="divDarkBox">
        <div class="divDemo">VERY NICE!</div>
        <div class="divPopUpMainContent">
                <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="" target="_blank">LINK</a></li>
            <a href="" target="_blank"><img src="" alt="ZENO-5000" /></a>
            <h1>SCIENTIFIC CALCULATOR <strong>ZENO-5000</strong> (TESTING MY STUFF:)</h1>

    <!-- 4th -->
    <div id="divDarkBox4" class="divDarkBox">
        <div class="divDemo">VERY USEFUL!</div>
        <div class="divPopUpMainContent">
                <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="" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            <a href="" target="_blank"><img src="" alt="FRACTION CALCULATOR" /></a>

    <!-- 5th -->
    <div id="divDarkBox5" class="divDarkBox">
        <div class="divDemo">YouTube Player</div>
        <div class="divPopUpMainContent">
                <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="" target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            <a href="" target="_blank"><img src="" alt="YOUTUBE PLAYER" /></a>
            <h1>EMBEDDED YOUTUBE PLAYER</h1>



  1. Demo Slideshow via CSS3: "iPad 2 weekend in New York City"
  2. HTML5/CSS 3 Modal Dialog Box; no JavaScript
  3. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  4. Hyperlinked Image in ASP.NET GridView[^]


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


About the Author

Founder Infosoft International Inc
United States United States
Dr. Alexander Bell is a seasoned full-stack Software Engineer (Win/Web/Mobile). He holds PhD in EE/IT, authored 37 inventions and published 300+ technical articles. Currently focused on Java/Javascript, .NET/C#, Android/Mobile, SQL, 'Big Data', Machine Learning, AI, IoT. Alex participated in App Innovation Contests (AIC 2102/2013) with multiple winning submissions. Portfolio samples:

  1. Real-time NY Bus Tracking Web App (IoT)
  2. Android Fraction Calculator "Fractal MK-12"
  3. Android Prime Factorization Calculator 18-digit)
  4. Semaphon™ semantic phone num-to-text converter
  5. Educational Web Portal
  6. Free Online NY Payroll Tax Calculator
  7. WebTV powered by YouTube Player powered by .NET API (#1 on Google)
  8. Engineering Calculator VOLTA
  9. Big Data: Facebook and YouTube
  10. NY City Trivia Quiz
  11. Publications by A. Bell

You may also be interested in...


Comments and Discussions

QuestionMy vote of 5 explained Pin
Member 1054303416-Jun-15 11:50
memberMember 1054303416-Jun-15 11:50 
AnswerRe: My vote of 5 explained Pin
DrABELL16-Jun-15 12:27
professionalDrABELL16-Jun-15 12:27 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun25-Feb-15 18:02
memberHumayun Kabir Mamun25-Feb-15 18:02 
GeneralRe: My vote of 5 Pin
DrABELL25-Feb-15 18:21
professionalDrABELL25-Feb-15 18:21 
GeneralOnline Slide Show Pin
Allseo15-Feb-15 0:57
memberAllseo15-Feb-15 0:57 
GeneralRe: Online Slide Show Pin
DrABELL15-Feb-15 5:23
professionalDrABELL15-Feb-15 5:23 
GeneralReason for my vote of 5 Really A Good Example Pin
onurag192-Feb-12 8:49
memberonurag192-Feb-12 8:49 
GeneralRe: Thank you for your note/vote! Pin
DrABELL2-Feb-12 10:09
memberDrABELL2-Feb-12 10:09 
GeneralReason for my vote of 5 Really useful one. Note: if some of... Pin
JH6410-Jan-12 10:44
memberJH6410-Jan-12 10:44 
GeneralRe: Many Thanks for your vote/note! Pin
DrABELL10-Jan-12 14:04
memberDrABELL10-Jan-12 14:04 
General<b>My vote of 5</b> Very nice article. More explanations on ... Pin
Akram El Assas5-Jan-12 11:55
memberAkram El Assas5-Jan-12 11:55 
GeneralRe: Many Thanks! I plan a series of full-size articles on this t... Pin
DrABELL5-Jan-12 13:36
memberDrABELL5-Jan-12 13:36 
GeneralReason for my vote of 5 cool Pin
beginner20112-Jan-12 16:49
memberbeginner20112-Jan-12 16:49 
GeneralRe: Thanks! Pin
DrABELL2-Jan-12 16:58
memberDrABELL2-Jan-12 16:58 
GeneralReason for my vote of 5 cool stuff Pin
Alexander Kouznetsov29-Dec-11 23:43
memberAlexander Kouznetsov29-Dec-11 23:43 
GeneralRe: Many Thanks! Pin
DrABELL30-Dec-11 3:41
memberDrABELL30-Dec-11 3:41 
GeneralReason for my vote of 5 Very Nice Pin
Yuval Dagan26-Dec-11 19:50
memberYuval Dagan26-Dec-11 19:50 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 6:09
memberDrABELL27-Dec-11 6:09 
Many Thanks!
GeneralReason for my vote of 5 Nice one. 5/5 Pin
rageit23-Dec-11 5:21
memberrageit23-Dec-11 5:21 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 6:08
memberDrABELL27-Dec-11 6:08 
GeneralReason for my vote of 5 this is very nice... Pin
ashishkumar0088-Sep-11 1:27
memberashishkumar0088-Sep-11 1:27 
GeneralRe: Thanks! Pin
DrABELL8-Sep-11 4:56
memberDrABELL8-Sep-11 4:56 
GeneralReason for my vote of 5 Great... Pin
ashishkumar00825-Jun-11 10:59
memberashishkumar00825-Jun-11 10:59 
GeneralRe: Thanks a bunch! Have a great weekend. My best, Alex. Pin
DrABELL25-Jun-11 13:38
memberDrABELL25-Jun-11 13:38 
GeneralReason for my vote of 5 Good one Pin
code in play23-Jun-11 19:52
membercode in play23-Jun-11 19:52 
GeneralRe: Many thanks! Pin
DrABELL24-Jun-11 7:48
memberDrABELL24-Jun-11 7:48 
GeneralIt is really simple and elegant. Also in regards to the labo... Pin
mathomp317-May-11 4:06
membermathomp317-May-11 4:06 
GeneralRe: Hi, Thanks a lot for your thoughtful comments! You are absol... Pin
DrABELL17-May-11 9:03
memberDrABELL17-May-11 9:03 
GeneralReason for my vote of 5 Excellents! Pin
Anyelo Roy4-Apr-11 4:27
memberAnyelo Roy4-Apr-11 4:27 
GeneralRe: Many thanks! Pin
DrABELL4-Apr-11 4:51
memberDrABELL4-Apr-11 4:51 
GeneralReason for my vote of 5 Great demo of the technology. Very c... Pin
Christian Mattix22-Mar-11 3:30
memberChristian Mattix22-Mar-11 3:30 
GeneralRe: Thanks a bunch, Christian! Pin
DrABELL22-Mar-11 3:47
memberDrABELL22-Mar-11 3:47 
GeneralWay too much manually intervention for a slideshow! so if yo... Pin
DaveAuld17-Mar-11 3:51
mentorDaveAuld17-Mar-11 3:51 
GeneralRe: Hi Dave, Thanks for you note. Any programmatic solution has ... Pin
DrABELL17-Mar-11 4:51
memberDrABELL17-Mar-11 4:51 
GeneralHTML, 5, or otherwise Pin
Dewey6-Apr-11 23:05
memberDewey6-Apr-11 23:05 
GeneralRe: HTML, 5, or otherwise Pin
DrABELL7-Apr-11 4:57
memberDrABELL7-Apr-11 4:57 
GeneralDemo Doesn't Work For Me Pin
John Simmons / outlaw programmer5-Apr-11 8:49
mvpJohn Simmons / outlaw programmer5-Apr-11 8:49 
GeneralRe: Demo Doesn't Work For Me ; Re: please refer to the Browser compatibility list Pin
DrABELL5-Apr-11 10:19
memberDrABELL5-Apr-11 10:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 15 Jun 2015
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid