Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

webxvideo · 17-07-2009, 11:20

Inspiriert durch die aktuelle C't habe ich mal ein wenig experimentiert.
Herausgekommen ist folgendes (unkommentiert):

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>3D</title>
    <style type="text/css">
      *{
      font-family: verdana;
      font-weight: bold;
      }
      div#master{
      position: relative;
      width: 600px;
      margin: 100px auto;
      }
      div#left,div#right{
        position: absolute;
        top:0;
        left: 0;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        text-align: center;
      width: 600px;
      }
      div#right, div#right *{
      color: #0ff;
      }
      div#left, div#left *{
      color: #f00;
      }
      div#left div,div#right div{
      position: relative;
      }
    </style>
  <script type="text/javascript">
    function Init() {
      var versatz=1;
      var base=20;
      var content = document.getElementById('right').innerHTML;
      document.getElementById('master').innerHTML+='<div id="left">'+content+'<\/div>';
      dreiD();

    };
    function dreiD() {
      var versatz=1;
      var base=20;
      for(var i=0;i<document.getElementById('left').getElementsByTagName('div').length;i++){
          var left=document.getElementById('left').getElementsByTagName('div')[i];
          var right=document.getElementById('right').getElementsByTagName('div')[i];
          var z=left.style.zIndex;
          var z2=z-base;
          var x=parseFloat(left.style.left);
          var x2= z2*versatz;

          left.style.left=(x-x2)+'px';
          right.style.left=(x+x2)+'px';
          left.style.fontSize=(base+(z2*3))+'px';
          right.style.fontSize=(base+(z2*3))+'px';
          right.style.zIndex=z+1;
      }
    };
    window.onload=Init;
  </script>
  </head>
   <body>
   <div id="master">
     <div id="right">
         <div style="left:0px; z-index:15">Der Text sollte hinter dem Monitor stehen (-5)</div>
         <div style="left:0px; z-index:22">So, hier steht mal ein Text!</div>
         <div style="left:0px; z-index:24">Dieser Text ist auf Level 4</div>
         <div style="left:0px; z-index:36">Und dieser ist noch weiter vorne auf Level 16 stehen</div>
         <div style="left:0px; z-index:20">Dieser Text ist wieder auf Level 0</div>
     </div>
   </div>
  </body>
</html>

Ihr braucht natürlich eine Rot-Cyan-Anaglyphenbrille.

_kweso · 17-07-2009, 11:33

great! sowas wie "blendmode: multiply" gibts in html schätzungsweise nicht. damit wärs dann optimal.

lg
kws
...mag auch 3d

edit: aber was heisst "Und dieser ist noch weiter vorne auf Level 16 stehen"?

17-07-2009, 11:33	#2 (permalink)
_kweso . Registriert seit: Aug 2001 Ort: wien/regensburg Beiträge: 1.652	great! sowas wie "blendmode: multiply" gibts in html schätzungsweise nicht. damit wärs dann optimal. lg kws ...mag auch 3d edit: aber was heisst "Und dieser ist noch weiter vorne auf Level 16 stehen"? __________________ 350 * youtube für alle, die noch keinen dropbox-account haben, aber einen wollen: http://db.tt/wZ3S1pr bringt uns beiden +500mb, thx! Geändert von _kweso (17-07-2009 um 11:43 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln