Click here to Skip to main content
11,577,258 members (60,122 online)
Click here to Skip to main content

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

, 15 Jun 2015 CPOL 99.4K 111 61
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.

DEMO

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="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&reg; 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&reg; STORE IN MANHATTAN NY" /></a>
            <h1>APPLE<sup>&reg;</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. 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[^]

License

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

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran, published 300+ articles and authored 37 inventions, credited for 10+ Enterprise level projects (>250k code lines); currently focused on .NET/WPF, C#, HTML5, jQuery, SQL, 'Big Data', AI, Speech Tech and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample projects/pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
  4. Online 3 Fractions Calculator (#1 on Goog)
  5. Top-100 Digital Cameras (powered by iMark-DCAM rating engine)
  6. Engineering Calculator VOLTA-814 for Windows
  7. Pericles™ TTS-14 Text-to-Speech Synthesizer (Win)
  8. Semaphon™ SP-300 semantic phone number converter (Win)
  9. PaydayNY-2015 Payroll Tax Calculator (Win)
  10. 'Find Job Agency' Online Interactive Map (Microsoft Bing technology)

You may also be interested in...

Comments and Discussions

 
General<b>My vote of 5</b> Very nice article. More explanations on ... Pin
Akram El Assas5-Jan-12 10:55
memberAkram 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
memberDrABELL5-Jan-12 12:36 
GeneralReason for my vote of 5 cool Pin
beginner20112-Jan-12 15:49
memberbeginner20112-Jan-12 15:49 
GeneralRe: Thanks! Pin
DrABELL2-Jan-12 15:58
memberDrABELL2-Jan-12 15:58 
GeneralReason for my vote of 5 cool stuff Pin
Alexander Kouznetsov29-Dec-11 22:43
memberAlexander Kouznetsov29-Dec-11 22:43 
GeneralRe: Many Thanks! Pin
DrABELL30-Dec-11 2:41
memberDrABELL30-Dec-11 2:41 
GeneralReason for my vote of 5 Very Nice Pin
Yuval Dagan26-Dec-11 18:50
memberYuval Dagan26-Dec-11 18:50 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 5:09
memberDrABELL27-Dec-11 5:09 
GeneralReason for my vote of 5 Nice one. 5/5 Pin
rageit23-Dec-11 4:21
memberrageit23-Dec-11 4:21 
GeneralRe: Many Thanks! Pin
DrABELL27-Dec-11 5:08
memberDrABELL27-Dec-11 5:08 
GeneralReason for my vote of 5 this is very nice... Pin
ashishkumar0088-Sep-11 0:27
memberashishkumar0088-Sep-11 0:27 
GeneralRe: Thanks! Pin
DrABELL8-Sep-11 3:56
memberDrABELL8-Sep-11 3:56 
GeneralReason for my vote of 5 Great... Pin
ashishkumar00825-Jun-11 9:59
memberashishkumar00825-Jun-11 9:59 
GeneralRe: Thanks a bunch! Have a great weekend. My best, Alex. Pin
DrABELL25-Jun-11 12:38
memberDrABELL25-Jun-11 12:38 
GeneralReason for my vote of 5 Good one Pin
code in play23-Jun-11 18:52
membercode in play23-Jun-11 18:52 
GeneralRe: Many thanks! Pin
DrABELL24-Jun-11 6:48
memberDrABELL24-Jun-11 6:48 
GeneralIt is really simple and elegant. Also in regards to the labo... Pin
mathomp317-May-11 3:06
membermathomp317-May-11 3:06 
GeneralRe: Hi, Thanks a lot for your thoughtful comments! You are absol... Pin
DrABELL17-May-11 8:03
memberDrABELL17-May-11 8:03 
GeneralReason for my vote of 5 Excellents! Pin
Anyelo Roy4-Apr-11 3:27
memberAnyelo Roy4-Apr-11 3:27 
GeneralRe: Many thanks! Pin
DrABELL4-Apr-11 3:51
memberDrABELL4-Apr-11 3:51 
GeneralReason for my vote of 5 Great demo of the technology. Very c... Pin
Christian Mattix22-Mar-11 2:30
memberChristian Mattix22-Mar-11 2:30 
GeneralRe: Thanks a bunch, Christian! Pin
DrABELL22-Mar-11 2:47
memberDrABELL22-Mar-11 2:47 
GeneralWay too much manually intervention for a slideshow! so if yo... Pin
DaveAuld17-Mar-11 2:51
mentorDaveAuld17-Mar-11 2:51 
GeneralRe: Hi Dave, Thanks for you note. Any programmatic solution has ... Pin
DrABELL17-Mar-11 3:51
memberDrABELL17-Mar-11 3:51 
GeneralHTML, 5, or otherwise Pin
Dewey6-Apr-11 22:05
memberDewey6-Apr-11 22:05 
GeneralRe: HTML, 5, or otherwise Pin
DrABELL7-Apr-11 3:57
memberDrABELL7-Apr-11 3:57 
GeneralDemo Doesn't Work For Me Pin
John Simmons / outlaw programmer5-Apr-11 7:49
mvpJohn Simmons / outlaw programmer5-Apr-11 7:49 
GeneralRe: Demo Doesn't Work For Me ; Re: please refer to the Browser compatibility list Pin
DrABELL5-Apr-11 9:19
memberDrABELL5-Apr-11 9:19 

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

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

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