git.infodrom.org Git - infodrom/rico3/blob - examples/html/shadow.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >\r
   5 <title>Rico</title>\r
   6 \r
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
   9 <script type='text/javascript'>\r
  10 Rico.onLoad( function() {\r
  11   var images=Rico.select('#thumbnails img');\r
  12   for (var i=0; i<images.length; i++) {\r
  13     Rico.applyShadow(images[i]);\r
  14   }\r
  15 });\r
  16 </script>\r
  17 \r
  18 <link href="../demo.css" type="text/css" rel="stylesheet">\r
  19 <style type="text/css">\r
  20 #thumbnails p {\r
  21   font-size:small;\r
  22   margin: 0px;\r
  23 }\r
  24 #thumbnails img {\r
  25   display: block;\r
  26 }\r
  27 </style>\r
  28 </head>\r
  29 \r
  30 \r
  31 <body>\r
  32 \r
  33 <div id='explanation'>\r
  34 Base Library: \r
  35 <script type='text/javascript'>\r
  36 document.write(Rico.Lib+' '+Rico.LibVersion);\r
  37 </script>\r
  38 <hr>\r
  39 <p>\r
  40 This example demonstrates how apply Rico shadows to static elements.\r
  41 <pre>\r
  42 Rico.onLoad( function() {\r
  43   var images=Rico.select('#thumbnails img');\r
  44   for (var i=0; i&lt;images.length; i++) {\r
  45     Rico.applyShadow(images[i]);\r
  46   }\r
  47 });\r
  48 </pre>\r
  49 </p>\r
  50 </div>\r
  51 \r
  52 <table id='thumbnails' border='0' cellspacing='0' cellpadding='10'>\r
  53 \r
  54 <tr>\r
  55 \r
  56 <td><img src="../images/themeroller/theme_30_ui_light.png" alt="UI Lightness" title="UI Lightness" />\r
  57 <p>UI lightness</p></td>\r
  58 \r
  59 <td><img src="../images/themeroller/theme_30_ui_dark.png" alt="UI Darkness" title="UI Darkness" />\r
  60 <p>UI darkness</p></td>\r
  61 \r
  62 <td><img src="../images/themeroller/theme_30_smoothness.png" alt="Smoothness" title="Smoothness" />\r
  63 <p>Smoothness</p></td>\r
  64 \r
  65 <td><img src="../images/themeroller/theme_30_start_menu.png" alt="Start" title="Start" />\r
  66 <p>Start</p></td>\r
  67 \r
  68 <td><img src="../images/themeroller/theme_30_windoze.png" alt="Redmond" title="Redmond" />\r
  69 <p>Redmond</p></td>\r
  70 \r
  71 <td><img src="../images/themeroller/theme_30_sunny.png" alt="Sunny" title="Sunny" />\r
  72 <p>Sunny</p></td>\r
  73 \r
  74 </tr><tr>\r
  75 \r
  76 <td><img src="../images/themeroller/theme_30_overcast.png" alt="Overcast" title="Overcast" />\r
  77 <p>Overcast</p></td>\r
  78 \r
  79 <td><img src="../images/themeroller/theme_30_le_frog.png" alt="Le Frog" title="Le Frog" />\r
  80 <p>Le Frog</p></td>\r
  81 \r
  82 <td><img src="../images/themeroller/theme_30_flick.png" alt="Flick" title="Flick" />\r
  83 <p>Flick</p></td>\r
  84 \r
  85 <td><img src="../images/themeroller/theme_30_pepper_grinder.png" alt="Pepper Grinder" title="Pepper Grinder" />\r
  86 <p>Pepper Grinder</p></td>\r
  87 \r
  88 <td><img src="../images/themeroller/theme_30_eggplant.png" alt="Eggplant" title="Eggplant" />\r
  89 <p>Eggplant</p></td>\r
  90 \r
  91 <td><img src="../images/themeroller/theme_30_dark_hive.png" alt="Dark Hive" title="Dark Hive" />\r
  92 <p>Dark Hive</p></td>\r
  93 \r
  94 </tr><tr>\r
  95 \r
  96 <td><img src="../images/themeroller/theme_30_cupertino.png" alt="Cupertino" title="Cupertino" />\r
  97 <p>Cupertino</p></td>\r
  98 \r
  99 <td><img src="../images/themeroller/theme_30_south_street.png" alt="South St" title="South St" />\r
 100 <p>South Street</p></td>\r
 101 \r
 102 <td><img src="../images/themeroller/theme_30_blitzer.png" alt="Blitzer" title="Blitzer" />\r
 103 <p>Blitzer</p></td>     \r
 104 \r
 105 <td><img src="../images/themeroller/theme_30_humanity.png" alt="Humanity" title="Humanity" />\r
 106 <p>Humanity</p></td>\r
 107 \r
 108 <td><img src="../images/themeroller/theme_30_hot_sneaks.png" alt="Hot Sneaks" title="Hot Sneaks" />\r
 109 <p>Hot sneaks</p></td>\r
 110 \r
 111 <td><img src="../images/themeroller/theme_30_excite_bike.png" alt="Excite Bike" title="Excite Bike" />\r
 112 <p>Excite Bike</p></td>\r
 113 \r
 114 </tr><tr>\r
 115 \r
 116 <td><img src="../images/themeroller/theme_30_black_matte.png" alt="Vader" title="Vader" />\r
 117 <p>Vader</p></td>\r
 118 \r
 119 <td><img src="../images/themeroller/theme_30_dot_luv.png" alt="Dot Luv" title="Dot Luv" />\r
 120 <p>Dot Luv</p></td>\r
 121 \r
 122 <td><img src="../images/themeroller/theme_30_mint_choco.png" alt="Mint Choc" title="Mint Choc" />\r
 123 <p>Mint Choc</p></td>\r
 124 \r
 125 <td><img src="../images/themeroller/theme_30_black_tie.png" alt="Black Tie" title="Black Tie" />\r
 126 <p>Black Tie</p></td>\r
 127 \r
 128 <td><img src="../images/themeroller/theme_30_trontastic.png" alt="Trontastic" title="Trontastic" />\r
 129 <p>Trontastic</p></td>\r
 130 \r
 131 <td><img src="../images/themeroller/theme_30_swanky_purse.png" alt="Swanky Purse" title="Swanky Purse" />\r
 132 <p>Swanky Purse</p></td>\r
 133 \r
 134 </tr>\r
 135 </table>\r
 136 \r
 137 </body>\r
 138 </html>\r