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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 \r
   3 <html>\r
   4 <head>\r
   5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   6 <title>Rico.Corner</title>\r
   7 \r
   8 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   9 <script type='text/javascript'>\r
  10 Rico.onLoad( function() {\r
  11   var label=Rico.$('BaseLib');\r
  12   if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;\r
  13   Rico.Corner.round('a0');\r
  14   Rico.Corner.round('a',{compact:true});\r
  15   Rico.Corner.round('d',{corners:"tl"});\r
  16   Rico.Corner.round('e',{corners:"br"});\r
  17   Rico.Corner.round('f',{corners:"top"});\r
  18   Rico.Corner.round('g',{corners:"bottom"});\r
  19   Rico.Corner.round('h',{corners:"tl br"});\r
  20   Rico.Corner.round('i',{corners:"all", color: "transparent"});\r
  21   Rico.Corner.round('j',{corners:"all", compact:true, color: "transparent"});\r
  22 });\r
  23 </script>\r
  24 \r
  25 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  26 <style type="text/css">\r
  27 span.code2 {\r
  28    font-family : Courier;\r
  29    font-size   : 11px;\r
  30    margin      : 12px;\r
  31 }\r
  32 div.cornerSamples {\r
  33    width            : 320px;\r
  34    margin-top       : 4px;\r
  35    background-color : #ffffee;\r
  36    font-family      : Arial;\r
  37    font-size        : 11px;\r
  38    text-align       : left;\r
  39 }\r
  40 </style>\r
  41 \r
  42 </head>\r
  43 \r
  44 \r
  45 <body>\r
  46 <h1>Rico.Corner -  using color names</h1>
  47 \r
  48 <p id='libname'>Base Library: <span id='BaseLib'></span></p>\r
  49 \r
  50 <table cellspacing="0" cellpadding="7" style="background-color:navy;" >\r
  51 \r
  52 <tr>\r
  53 <td colspan="2"><div id="a0" class="cornerSamples"><span class="code2">Rico.Corner.round(element);<br><br><br><br></span></div></td>\r
  54 </tr>\r
  55 \r
  56 <tr>\r
  57 <td><div id="a" class="cornerSamples" style='background-color:yellow'><span class="code2">Rico.Corner.round(element, {compact:true});<br><br><br><br></span></div></td>\r
  58 <td><div id="d" class="cornerSamples" style='background-color:lightgreen'><span class="code2">Rico.Corner.round(element, {corners:"tl"});<br><br><br><br></span></div></td>\r
  59 </tr>\r
  60 \r
  61 <tr>\r
  62 <td><div id="e" class="cornerSamples" style='background-color:lime'><span class="code2">Rico.Corner.round(element, {corners:"br"});<br><br><br><br></span></div></td>\r
  63 <td><div id="f" class="cornerSamples" style='background-color:pink'><span class="code2">Rico.Corner.round(element, {corners:"top"});<br><br><br><br></span></div></td>\r
  64 </tr>\r
  65 \r
  66 <tr>\r
  67 <td><div id="g" class="cornerSamples" style='background-color:lightgrey'><span class="code2">Rico.Corner.round(element, {corners:"bottom"});<br><br><br><br></span></div></td>\r
  68 <td><div id="h" class="cornerSamples" style='background-color:gold'><span class="code2">Rico.Corner.round(element, {corners:"tl br"});<br><br><br><br></span></div></td>\r
  69 </tr>\r
  70 \r
  71 <tr>\r
  72 <td><div id="i" class="cornerSamples" style="background-image:url(gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent"}</span><br><br><br><br></div></td>\r
  73 <td><div id="j" class="cornerSamples" style="background-image:url(gradient.jpg)"><span class="code2">Rico.Corner.round(element, {color:"transparent",compact:true}</span><br><br><br><br></div></td>\r
  74 </tr>\r
  75 \r
  76 </table>\r
  77 \r
  78 </body>\r
  79 </html>\r