topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-webgl-event.cfg / cfg



  <document style=black>
  <slide color=black id=@cfg-sample-webgl-event>
  <style type="text/css">
            .transparent-ui {
                opacity: .75;
            }
    
            .container {
                z-index: 0;
            }
    
            #teapot1 {
                position: absolute;
                width: 180px;
                height: 90px;
                clear: both;
                padding: 8px;
                overflow: hidden;
                background: red;
                color: white;
                z-index: 2;
                margin: 0 auto;
                border: 1px solid;
                text-align: left;
                -webkit-box-shadow: #444 5px 5px 2px;
                border-bottom-left-radius: 5px 5px;
                border-bottom-right-radius: 5px 5px;
                border-top-left-radius: 5px 5px;
                border-top-right-radius: 5px 5px;
            }
    
            #teapot2 {
                position: absolute;
                width: 180px;
                height: 90px;
                clear: both;
                padding: 8px;
                overflow: hidden;
                background: green;
                color: white;
                z-index: 2;
                margin: 0 auto;
                border: 1px solid;
                text-align: left;
                -webkit-box-shadow: #444 5px 5px 2px;
                border-bottom-left-radius: 5px 5px;
                border-bottom-right-radius: 5px 5px;
                border-top-left-radius: 5px 5px;
                border-top-right-radius: 5px 5px;
            }
    
            #teapot3 {
                position: absolute;
                width: 180px;
                height: 90px;
                clear: both;
                padding: 8px;
                overflow: hidden;
                background: blue;
                color: white;
                z-index: 2;
                margin: 0 auto;
                border: 1px solid;
                text-align: left;
                -webkit-box-shadow: #444 5px 5px 2px;
                border-bottom-left-radius: 5px 5px;
                border-bottom-right-radius: 5px 5px;
                border-top-left-radius: 5px 5px;
                border-top-right-radius: 5px 5px;
            }
        </style>
  <load cfg=webgl>
          <canvas bgcolor=white id="theCanvas" width="1030" height="700">
              <p>This example requires a browser that supports the
                  <a href="http://www.w3.org/html/wg/html5/">HTML5</a>
                  &lt;canvas&gt; feature.</p>
          </canvas>
  <script type="text/javascript" src="sample-webgl-event.js"></script>
  <div id="teapot1" class="transparent-ui">
        serious gaming
    </div>
    
    <div id="teapot2" class="transparent-ui">
        creative technology / new media
    </div>
    
    <div id="teapot3" class="transparent-ui">
        multimedia @ VU
    </div>
  <load cfg=webgl-src>
  <navigate>
  </slide>
  </document>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.