Project Description

The solution demonstrates CSS3 coding technique, which allows to implement online slide show with "darkbox" (or "lightbox") effects using pure CSS3 and HTML5; it does not require any Javascript/jQuery coding.

Working DEMO [1] at: http://webinfocentral.com/iPad2/iPad2.htm

Introduction

Entire solution is encapsulated in a single .htm file (see the commented code in Listing 1). In addition to the darkbox (or lightbox) effect and slide navigation, it also demonstrates various aesthetic enhancements achieved via CSS3/HTML5 new features:

  • color gradients
  • rounded corners
  • box shadow
  • text shadow
  • text rotate

Web Browser compatibility

Solution is fully compatible with all major web browsers

Sample screen shot

iPad2 Slide Show

References

  1. Slide Show CSS "iPad 2 weekend in New York City"
  2. HTML5 Modal Pop-Up

| CSS 3 | HTML 5 | Apple iPad 2 | Slide Show CSS 3 | DarkBox | LightBox | RIA | Rounded Corners CSS 3 | Color Gradients CSS 3 | Text Shadows CSS | Box Shadows CSS 3 | Text Rotate CSS 3 | DOCTYPE | Apple Store NY |

Listing 1.

<!DOCTYPE HTML>
<html>
<head>
    <title>SLIDESHOW CSS3 | HTML5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011 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" />

    <meta name="Keywords" content="APPLE iPAD 2, SLIDE SHOW CSS 3, DARKBOX CSS 3, 
    LIGHTBOX CSS 3, Apple Store Manhattan NY, 
    RIA, HTML 5, NO Javascript, NO jQuery />

    <meta name="Description" content ="APPLE iPAD 2 SLIDE SHOW WITH DARKBOX EFFECT, 
    CSS 3, HTML 5, NO Javascript, Apple Store in Manhattan NY" />

    <style type="text/css">

	    html, body {
	        font-family:Arial, Calibri; 
	        background-color:#bababa; 
	        margin:0; 
	        padding:0; 
	        text-align:center;
	        overflow:hidden;
	    }
	    
	    /*** horizontal list applied to thumbnails, nav controls ***/
         ul {
            float:left;
            width:100%;
            margin: 0px 0px 20px 0px;
            padding:0;
            list-style-type:none;
        }
        li {display:inline; margin-right:5px;}  
	    
	    /*** pop-up div to cover entire area ***/
	    .divDarkBox  {
	        position:fixed;
		    top:0;
		    left:0;
		    width:100%;
		    height:100%;
		    
		    /*! critical !*/
		    display:none;
		    
		    /* last attribute set darkness on scale: 0...1.0 */
		    background-color:rgba(0,0,0,0.8);
		    text-align:center;
		    z-index:101;
	    }
	    
	    /*** ! target attribute does the job ! ***/
	    .divDarkBox:target  { display:block; }
        
        /*** virtual frame containing controls, image and caption ***/
	    .divDarkBox div  {
	       /* either absolute or fixed */
		    position:fixed;
		    top:10%;
		    left:25%;
		    width:50%;
		    height:60%;
            /* rounded corners */
	        -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:102;
	    }
	    
        /*** header used as main image caption  ***/
        .divDarkBox div h1  {
            font-size:0.9em;
            color:#bababa;
            font-weight:normal;
            margin-top:20px;
            z-index:103;
            /* add shadows to text */
            -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); 
        }	    

        /*** div serves as thumbnais container  ***/
        #divThumbnails {
            position:relative;
            margin: 60px 0 0 0;
            height:150px;
            padding-top:30px;
            background-color:#cacaca;
             /* add shadows */
            -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);
             /* gradient effect with color-stop */
            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));
        }
        
        /*** div contains related apps ***/
        #divRelate {
            padding-top:20px;
        }
        
	    /*** thumbnails/relate div share image style ***/
        #divThumbnails img, #divRelate img
        {
            padding:10px;
            border: solid 1px gray;
            /* rounded corners */
        	-moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* add shadows */
            -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;
        } 
        
        /*** thumbnails specific image style ***/
        #divThumbnails img {
            min-width:50px;
            max-width:100px;
            height:100px;
        } 

    	/*** relate-specific image style ***/
        #divRelate img  {
            max-height:400px;
            max-width:250px;
            max-height:300px;
        }     
        
        /*** main image style ***/
        .divDarkBox img {
            padding:20px;
            z-index:105;
            border: solid 1px gray;
            /* rounded corners */
        	-moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* gradient effect with color-stop */
            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));
            /* this causes some rendering diff */
            min-height:300px;
            min-width:300px;
            max-height:100%;
            max-width:80%;
        } 
    
        /*** hover effects increase visual responsiveness ***/
        img:hover, .divDarkBox ul a:hover  {
            background:#505050;
            /* gradient effect with color-stop */
            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));
	    }

        /*** navigation controls style: highest z-index ! ***/
	    .divDarkBox ul a  {
		    padding:5px;
		    font-size:22px;
		    font-weight:bold;
		    color:Yellow;
		    text-decoration:none;
		    border: solid 1px Gray;
		    /* rounded corners */
		    -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:110;
	    }
	    
	    /* optional text stamp: 45 Degree */
	    .divDarkBox .divDemo  {
	        position absolute;
	        top:15%;
	        left:0%;
	        font-size:4em;
	        color:Olive;
	        -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
	    }
	    
	    /* page footer/header: fixed */
	    #footer, #header {
	        position:fixed;
	        padding:0;
	        width:100%;
	        height:60px;
	        text-align:center;
	        background-color:#606060;
	        color: #cacaca;
	        /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.6);  
            -webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.6);  
            text-shadow: 3px 4px 6px rgba(10,10,10,0.6);    
	    }
	    #header {top:0; }
	    #footer { bottom:0; line-height: 60px;}
	    
    </style>
</head>

<body>
    <div id="header">
        <h3>APPLE<sup></sup> iPAD 2 SLIDE SHOW WITH DARK BOX EFFECT IMPLEMENTED AS PURE CSS 3 SOLUTION (NO JAVASCRIPT)</h3>
    </div>
    
    <!-- NAV THUMBNAILS -->
    <div id="divThumbnails">
        <ul>
            <li><a href="#divDarkBox1" ><img src="http://www.webinfocentral.com/iPad2/Apple-GEDC3429_small.JPG" 
                alt="APPLE� STORE" /></a></li>
            <li><a href="#divDarkBox2" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3474_small.JPG" 
                alt="iPAD 2 PRICING" /></a></li>
            <li><a href="#divDarkBox3" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3477_small.JPG" 
                alt="iCIRCUIT" /></a></li>
            <li><a href="#divDarkBox4" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3446_small.JPG" 
                alt="ZENO-5000" /></a></li>
            <li><a href="#divDarkBox5" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3453_small.JPG" 
                alt="FRACTION CALCULATOR" /></a></li>
            <li><a href="#divDarkBox6" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3455_small.JPG" 
                alt="YOUTUBE PLAYER" /></a></li>
            <li><a href="#divDarkBox7" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3458_small.JPG" 
                alt="SILVERLIGHT" /></a></li>
            <li><a href="#divDarkBox8" ><img src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3465_small.JPG" 
                alt="BING MAP" /></a></li>
            <li><a href="#divDarkBox9" ><img src="http://www.webinfocentral.com/iPad2/Prize_Amphora_small.JPG" 
                alt="SURPRISE: NY QUIZ" /></a></li>
        </ul>
    </div>
    <div id="divRelate">
         <h3> RELATED WEB APPLICATIONS</h3>
        <a href="http://www.webinfocentral.com/VOLTA/Volta.htm" target ="_blank" ><img 
            src="http://www.webinfocentral.com/iPad2/Engineering_Calculator_Volta_2011.jpg" 
            alt="Calculator VOLTA-2011" /></a><!--EXT LINK TO APP-->
        <a href="http://www.webinfocentral.com/MATH/zeno.htm" target ="_blank" ><img 
            src="http://www.webinfocentral.com/iPad2/Zeno5000.jpg" 
            alt="Calculator ZENO-5000"/></a><!--EXT LINK TO APP-->
    </div>

    <!--1st SLIDE -->
    <div id="divDarkBox1" class="divDarkBox">
        <!--OPTIONAL TEXT 45 DEG-->
        <div class="divDemo">COOL DEMO!</div>
        <div>
            <ul >
                <li><a href="#">&#8855</a></li> <!--CLOSE SYMBOL-->
                <li><a href="#divDarkBox9">&#8678</a></li> <!--BACK ARROW: MOVE BACK|LAST-->
                <li><a href="#divDarkBox2">&#8680</a></li> <!--FORWARD ARROW: MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <!--FULL SIZE IMAGE: ON CLICK MOVE NEXT-->
            <a href="#divDarkBox2"><img 
                src="http://www.webinfocentral.com/iPad2/Apple-GEDC3429.JPG" 
                alt="APPLE� STORE IN MANHATTAN NY" /></a>
            <h1>APPLE<sup></sup> STORE IN MANHATTAN, NY. iPAD 2 WEEKEND STARTED ON MARCH 12th, 2011</h1>
        </div>
    </div>

    <!--2nd SLIDE -->
    <div id="divDarkBox2" class="divDarkBox">
        <div class="divDemo">iPad 2 PRICING</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li> <!--CLOSE-->
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox1">&#8678</a></li> <!--MOVE BACK-->
                <li><a href="#divDarkBox3">&#8680</a></li> <!--MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox3"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3474.JPG" 
                alt="iPAD 2 PRICING MODEL" /></a>
            <h1>iPAD 2 PRICING MODEL STAYS PRETTY MUCH THE SAME, STARTING FROM $499</h1>
        </div>
    </div>

    <!--3rd SLIDE -->
    <div id="divDarkBox3" class="divDarkBox">
        <div class="divDemo">WOW, CIRCUIT!</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox2">&#8678</a></li>
                <li><a href="#divDarkBox4">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li> <!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox4"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3477.JPG" 
                alt="iCIRCUIT SCHEMATIC DIAGRAM" /></a>
            <h1>iCIRCUIT SCHEMATIC DIAGRAM EDITOR, GREAT APP!</h1>
        </div>
    </div>

    <!--4th SLIDE -->
    <div id="divDarkBox4" class="divDarkBox">
        <div class="divDemo">VERY NICE!</div>
        <div>
            <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="#divDarkBox9">&#9658;&#9646;</a></li>
                <li><a href="http://www.webinfocentral.com/MATH/zeno.htm" 
                    target="_blank">LINK</a></li>
            </ul>
            <a href="#divDarkBox5"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3446.JPG" 
                alt="ZENO-5000" /></a><!--EXT LINK TO APP-->
            <h1>FREE ONLINE SCIENTIFIC CALCULATOR <strong>ZENO-5000</strong> (TESTING MY STUFF :)</h1>
        </div>
    </div>

    <!--5th SLIDE -->
    <div id="divDarkBox5" class="divDarkBox">
        <div class="divDemo">VERY USEFUL!</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox4">&#8678</a></li>
                <li><a href="#divDarkBox7">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/Mobile/Fractions.aspx" 
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox6"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3453.JPG" 
                alt="FRACTION CALCULATOR" /></a>
            <h1>MOBILE ONLINE FRACTION CALCULATOR (ALSO MY STUFF :)</h1>
        </div>
    </div>

    <!--6th SLIDE -->
    <div id="divDarkBox6" class="divDarkBox">
        <div class="divDemo">YouTube Player</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox5">&#8678</a></li>
                <li><a href="#divDarkBox7">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/RESOURCES/VideoAudio.aspx" 
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox7"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3455.JPG" 
                alt="YOUTUBE PLAYER" /></a>
            <h1>EMBEDDED YOUTUBE PLAYER SEEMINGLY WORKING...</h1>
        </div>
    </div>

    <!--7th SLIDE -->
    <div id="divDarkBox7" class="divDarkBox">
        <div class="divDemo">SILVERLIGHT?</div>
        <div>
            <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox6">&#8678</a></li>
                <li><a href="#divDarkBox8">&#8680</a></li>
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
            </ul>
            <a href="#divDarkBox8"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3458.JPG" 
                alt="SILVERLIGHT" /></a>
            <h1>MICROSOFT SILVERLIGHT<sup></sup> APPLICATION IS NOT WORKING...</h1>
        </div>
    </div>

    <!--8th SLIDE: -->
    <div id="divDarkBox8" class="divDarkBox">
        <div class="divDemo">MS BING</div>
        <div>
           <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li>
                <li><a href="#divDarkBox7">&#8678</a></li>
                <li><a href="#divDarkBox9">&#8680</a></li> <!--MOVE NEXT-->
                <li><a href="#divDarkBox9">&#9658;&#9646;</a></li><!--MOVE LAST-->
                <li><a href="http://www.webinfocentral.com/RESOURCES/WeatherMap.aspx" 
                    target="_blank">LINK</a></li><!--EXT LINK TO APP-->
            </ul>
            <a href="#divDarkBox9"><img 
                src="http://www.webinfocentral.com/iPad2/iPad2-GEDC3465.JPG" 
                alt="BING MAP" /></a>
            <h1>MICROSOFT INTERACTIVE BING<sup></sup> MAP AND 7-DAY WEATHER FORECAST WORK FINE</h1>
        </div>
    </div>

    <!--9th SLIDE: LAST ONE -->
    <div id="divDarkBox9" class="divDarkBox">
        <div class="divDemo">HAVE FUN!</div>
        <div>
           <ul>
                <li><a href="#">&#8855</a></li>
                <li><a href="#divDarkBox1">&#9646;&#9668;</a></li> <!--MOVE FIRST-->
                <li><a href="#divDarkBox8">&#8678</a></li>
                <li><a href="http://exm.nr/NYipad" 
                    target="_blank">&#9786</a></li><!--EXT LINK-->
            </ul>
            <a href="http://exm.nr/NYipad" target="_blank"><img 
                src="http://www.webinfocentral.com/iPad2/Prize_Amphora.JPG" 
                alt="New York FUN-QUIZ" /></a>
            <h1>SURPRISE: NEW YORK FUN-QUIZ :)</h1>
        </div>
    </div>

    <div id="footer">
        Copyright� 2011 Infosoft International Inc | Author: Alexander Bell, NY | 
        <a href="http://www.webinfocentral.com" target ="_blank" >HOME</a> |
    </div>

</body>
</html>

Last edited Aug 20, 2015 at 3:05 PM by DrABELL, version 15