Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (32)

Online Slide Show as pure HTML5 / CSS3 solution: NO Javascript

By , 3 Jan 2012
 
Solution demonstrates CSS3 coding technique implementing online slide show with "darkbox" or "lightbox" pop-up effects using pure CSS3 and HTML5; it does not use any Javascript/jQuery.

DEMO

Working Demo at:"iPad 2 weekend at Apple Store, New York" slide show[^]
 
iPad 2 Slide Show CSS 3
 
Entire solution (i.e., "Apple iPad 2 in NYC" slide show) is encapsulated in a single .htm file (see the code Listing 1, 2). In addition to the darkbox effect and slide navigation, it also demonstrates various aesthetic enhancements via CSS3/HTML5 hew 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

Design Notes

Entire application is encapsulated in a single file mostly for didactic purpose, so the readers will be provided with holistic view of the solution. In practice, CSS part could be placed in a separate file, adhering to the programming paradigm of separation of concerns (i.e. content from formatting and functionality). Pertinent to that, I divided the code snippet into two Listings (1 and 2) in order to simplify the task for users working on the production version of the app.

References

  1. Slide Show CSS "iPad 2 weekend in New York City"[^]
  2. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  3. Hyperlinked Image in ASP.NET GridView[^]
  4. Engineering calculator VOLTA-2011, Design Notes[^]
  5. Embedded YouTube Player[^]
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>
 
Listing 2
<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>
 

References

  1. Slide Show CSS "iPad 2 weekend in New York City"[^]
  2. HTML 5, CSS3 aesthetic enhancement: buttons[^]
  3. Hyperlinked Image in ASP.NET GridView[^]
  4. Engineering calculator VOLTA-2011, Design Notes[^]
  5. Embedded YouTube Player[^]

License

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

About the Author

 DrABELL
Chief Technology Officer Infosoft Int'l
United States United States
Member
Dr. A. Bell has 20+ years of SW/EE experience, published 200+ tech articles and authored 37 inventions; Win/Web veteran, currently focused on: HTML5, CSS3, Javascript, jQuery, SQL, Windows 8, .NET, C#, WPF, Ultrabooks, Mobile. Developed popular Silverlight Media Player, 3 Fractions Calculator and best YouTube API for ASP.NET (#1 Goog). Sample pubs/projects:
  1. HTML5 Best Practices: Table formatting via CSS3
  2. Personal computer 2012
  3. New iPad: notes from NY Apple store
  4. YouTube and Facebook popularity metrics
  5. Edumatter M12: School Math Calculators and Equation Solvers
  6. How to select web browser and check its capabilities
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. Evolution of digital cameras
  11. WebTV Project: Embedded YouTube Player

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First PrevNext
GeneralReason for my vote of 5 Really A Good Examplememberonurag192 Feb '12 - 7:49 
Reason for my vote of 5
Really A Good Example
Sign In·View Thread·Permalink
GeneralRe: Thank you for your note/vote!memberDrABELL2 Feb '12 - 9:09 
Thank you for your note/vote!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Really useful one. Note: if some of...memberJH6410 Jan '12 - 9:44 
Reason for my vote of 5
Really useful one.
 
Note: if some of you are using Geany as text editor, for some reason when you copy and paste the code it only can save it as utf-8 file, an error arise if you try to convert to iso 8859-1. In this case simply replace "charset=iso8859-1" />" for "charset=utf-8" />", if you save as it is then when opening the file in a browser you see strange characters. It seems original code was save in no unicode plain text file, but when pasted to code project it was converted to utf-8.
Sign In·View Thread·Permalink
GeneralRe: Many Thanks for your vote/note!memberDrABELL10 Jan '12 - 13:04 
Many Thanks for your vote/note!
Sign In·View Thread·Permalink
General<b>My vote of 5</b> Very nice article. More explanations on ...memberAkram El Assas5 Jan '12 - 10:55 
My vote of 5
Very nice article. More explanations on CSS3 and HTML5 code would be a plus.
Sign In·View Thread·Permalink
GeneralRe: Many Thanks! I plan a series of full-size articles on this t...memberDrABELL5 Jan '12 - 12:36 
Many Thanks! I plan a series of full-size articles on this topic to be published in the near future. My best-AB
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 coolmemberbeginner20112 Jan '12 - 15:49 
Reason for my vote of 5
cool
Sign In·View Thread·Permalink
GeneralRe: Thanks!memberDrABELL2 Jan '12 - 15:58 
Thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 cool stuffmemberAlexander Kouznetsov29 Dec '11 - 22:43 
Reason for my vote of 5
cool stuff
Sign In·View Thread·Permalink
GeneralRe: Many Thanks!memberDrABELL30 Dec '11 - 2:41 
Many Thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Very NicememberYuval Dagan26 Dec '11 - 18:50 
Reason for my vote of 5
Very Nice
Sign In·View Thread·Permalink
GeneralRe: Many Thanks!memberDrABELL27 Dec '11 - 5:09 
Many Thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Nice one. 5/5memberrageit23 Dec '11 - 4:21 
Reason for my vote of 5
Nice one. 5/5
Sign In·View Thread·Permalink
GeneralRe: Many Thanks!memberDrABELL27 Dec '11 - 5:08 
Many Thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 this is very nice...memberashishkumar0088 Sep '11 - 0:27 
Reason for my vote of 5
this is very nice...
Sign In·View Thread·Permalink
GeneralRe: Thanks!memberDrABELL8 Sep '11 - 3:56 
Thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Great...memberashishkumar00825 Jun '11 - 9:59 
Reason for my vote of 5
Great...
Sign In·View Thread·Permalink
GeneralRe: Thanks a bunch! Have a great weekend. My best, Alex.memberDrABELL25 Jun '11 - 12:38 
Thanks a bunch! Have a great weekend. My best, Alex.
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Good onemembercode in play23 Jun '11 - 18:52 
Reason for my vote of 5
Good one
Sign In·View Thread·Permalink
GeneralRe: Many thanks!memberDrABELL24 Jun '11 - 6:48 
Many thanks!
Sign In·View Thread·Permalink
GeneralIt is really simple and elegant. Also in regards to the labo...membermathomp317 May '11 - 3:06 
It is really simple and elegant. Also in regards to the labor intensive piece, it's not bad if you use php / asp.net coding to dynamically create the html needed for this to work. It has given me all types of thought ideas, such as dynamically creating the div's with a listview control. Going to try it out this afternoon. I'll see if I can get a simple example working and post it.
Kinda funny though that you can do all of these neat tricks with what amounts basically to anchors. LOL
Sign In·View Thread·Permalink
GeneralRe: Hi, Thanks a lot for your thoughtful comments! You are absol...memberDrABELL17 May '11 - 8:03 
Hi,
Thanks a lot for your thoughtful comments! You are absolutely right: the solution could be extended with some server-side scripting in order to simplify the routine coding task. There is a reason why the current one is presented in such way: it serves both practical and didactic purpose, so for the best readability, clarity and flexibility it's encapsulated in a single .htm file (btw, editable with just Notepad app Smile | :) . And so true, the anchor tag can do a lot of tricks Smile | :)
Good luck with your endeavor!
Kind regards,
Alex Bell
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Excellents!memberAnyelo Roy4 Apr '11 - 3:27 
Reason for my vote of 5
Excellents!
Sign In·View Thread·Permalink
GeneralRe: Many thanks!memberDrABELL4 Apr '11 - 3:51 
Many thanks!
Sign In·View Thread·Permalink
GeneralReason for my vote of 5 Great demo of the technology. Very c...memberChristian Mattix22 Mar '11 - 2:30 
Reason for my vote of 5
Great demo of the technology. Very clear, concise, and useful.
Sign In·View Thread·Permalink
Last Visit: 31 Dec '99 - 18:00     Last Update: 22 May '13 - 4:23Refresh12 Next »

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

About Article
SAY IT WITH CSS! - Online slide show implements "darkbox" pop-up using novel CSS3/HTML5 features
Type Tip/Trick
Licence CPOL
First Posted 16 Mar 2011
Views 58,444
Bookmarked 38 times

, +
Top News

The Next Version of Android - Some of What's Coming

Get the Insider News free each morning.
Related Videos
HTML5: Transitions
HTML5: Canvas Part 2
Hyperlinked Images in ASP.NET GridView
Build Awesome Apps with CSS3 Animations
HTML5/CSS 3 Modal Dialog Box; no JavaScript
Add Image Borders using HTML5/CSS3
The Complete Guide to Building HTML5 games with Canvas & SVG
The Star Wars intro in pure CSS3 thanks to 3D transform & animations
Incorporating Custom HTML5 Implementation with .NET Based Visual WebGui Rich Client
HTML5/CSS3 graphic enhancement: buttons, inputs
Enterprise RIA Development: Comparing Flex/Flash, Silverlight, HTML5/CSS3, jQuery/JavaScript
Quick & Easy HTML5 & CSS3 - New Features for Background Images
Engineering Calculator VOLTA-2013
Animations in HTML5
Learn HTML5 in 5 Minutes!
Film App for Windows 8 Desktop
Scientific Calculator ZENO-5000
Building a Windows 8 app with HTML5: How to create a small RSS reader in 30min (part 2)
Modernize Your HTML5 Canvas Game Part 2: Offline, Drag-and-Drop, and File APIs
From Silverlight to HTML5
Html5 Jigsaw Puzzle
Property Finder - a Cross-Platform HTML5 Mobile App
Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130516.1 | Last Updated 3 Jan 2012
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid