Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML5
Tip/Trick

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

Rate me:
Please Sign up or sign in to vote.
4.97/5 (42 votes)
15 Jun 2015CPOL1 min read 281.2K   62   38
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

Image 1

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

  1. HTML5/CSS 3 Modal Dialog Box; no JavaScript
  2. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  3. Hyperlinked Image in ASP.NET GridView[^]

License

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


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
QuestionMy vote of 5 explained Pin
kingPuppy16-Jun-15 10:50
kingPuppy16-Jun-15 10:50 
AnswerRe: My vote of 5 explained Pin
DrABELL16-Jun-15 11:27
DrABELL16-Jun-15 11:27 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun25-Feb-15 17:02
Humayun Kabir Mamun25-Feb-15 17:02 
GeneralRe: My vote of 5 Pin
DrABELL25-Feb-15 17:21
DrABELL25-Feb-15 17:21 
GeneralOnline Slide Show Pin
Allseo14-Feb-15 23:57
Allseo14-Feb-15 23:57 
GeneralRe: Online Slide Show Pin
DrABELL15-Feb-15 4:23
DrABELL15-Feb-15 4:23 
GeneralReason for my vote of 5 Really A Good Example Pin
Anurag Sarkar2-Feb-12 7:49
Anurag Sarkar2-Feb-12 7:49 
GeneralRe: Thank you for your note/vote! Pin
DrABELL2-Feb-12 9:09
DrABELL2-Feb-12 9:09 
GeneralReason for my vote of 5 Really useful one. Note: if some of... Pin
JH6410-Jan-12 9:44
JH6410-Jan-12 9:44 
GeneralRe: Many Thanks for your vote/note! Pin
DrABELL10-Jan-12 13:04
DrABELL10-Jan-12 13:04 
General<b>My vote of 5</b> Very nice article. More explanations on ... Pin
Akram El Assas5-Jan-12 10:55
Akram El Assas5-Jan-12 10:55 
GeneralRe: Many Thanks! I plan a series of full-size articles on this t... Pin
DrABELL5-Jan-12 12:36
DrABELL5-Jan-12 12:36 
GeneralReason for my vote of 5 cool Pin
beginner20112-Jan-12 15:49
beginner20112-Jan-12 15:49 
GeneralRe: Thanks! Pin
DrABELL2-Jan-12 15:58
DrABELL2-Jan-12 15:58 
GeneralReason for my vote of 5 cool stuff Pin
Alexander Kouznetsov29-Dec-11 22:43
Alexander Kouznetsov29-Dec-11 22:43 
GeneralRe: Many Thanks! Pin
DrABELL30-Dec-11 2:41
DrABELL30-Dec-11 2:41 
GeneralReason for my vote of 5 Very Nice Pin
Yuval Dagan26-Dec-11 18:50
Yuval Dagan26-Dec-11 18:50 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 5:09
DrABELL27-Dec-11 5:09 
GeneralReason for my vote of 5 Nice one. 5/5 Pin
rageit23-Dec-11 4:21
rageit23-Dec-11 4:21 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 5:08
DrABELL27-Dec-11 5:08 
GeneralReason for my vote of 5 this is very nice... Pin
ashishkumar0088-Sep-11 0:27
ashishkumar0088-Sep-11 0:27 
GeneralRe: Thanks! Pin
DrABELL8-Sep-11 3:56
DrABELL8-Sep-11 3:56 
GeneralReason for my vote of 5 Great... Pin
ashishkumar00825-Jun-11 9:59
ashishkumar00825-Jun-11 9:59 
GeneralRe: Thanks a bunch! Have a great weekend. My best, Alex. Pin
DrABELL25-Jun-11 12:38
DrABELL25-Jun-11 12:38 
GeneralReason for my vote of 5 Good one Pin
pankajupadhyay2923-Jun-11 18:52
professionalpankajupadhyay2923-Jun-11 18:52 

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.