internet‎ > ‎develop‎ > ‎HTML5‎ > ‎

Slide-Show

<!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>
        <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>
    </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="../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>
            <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 TO APP-->
            </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>
Comments