<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Isoworld provides a way to create an illusion of isometric view for a website,
* by transforming provided HTML elements. It can create ground and
* infinite amount of isometric cubes.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/CSS3-Isoworld
**************************************************************/
-->
<html>
<head>
<style type="text/css" media="screen">
#ground
{
border: 2px solid black;
background-color: #fff;
}
#top1, #top2
{
border: 2px solid black;
background-color: #fff;
}
#left1, #left2
{
border: 2px solid black;
background-color: #fff;
}
#right1, #right2
{
border: 2px solid black;
background-color: #fff;
}
#shadow1, #shadow2
{
background-color: grey;
border: 2px solid black;
color: white;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href='#ground'>Ground</a></li>
<li>Cube1</li>
<li><a href='#top1'>Top</a></li>
<li><a href='#left1'>Left</a></li>
<li><a href='#right1'>Right</a></li>
<li><a href='#shadow1'>Shadow</a></li>
<li>Cube2</li>
<li><a href='#top2'>Top</a></li>
<li><a href='#left2'>Left</a></li>
<li><a href='#right2'>Right</a></li>
<li><a href='#shadow2'>Shadow</a></li>
</ul>
</div>
<div id="ground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque elit, porta et dignissim sed, consectetur in metus. Quisque nec eros quam. Vivamus semper nisi a nibh rutrum eu scelerisque felis imperdiet. Sed viverra ullamcorper quam eget cursus. Mauris ultrices nunc et felis viverra vestibulum. Quisque faucibus placerat justo, id ultricies massa gravida quis. Cras id odio ligula. Nunc semper urna sed nisl viverra congue.
Nunc mauris leo, ullamcorper a viverra ac, posuere ac enim. In rutrum ligula nec quam posuere eget lacinia sapien accumsan. Etiam pellentesque turpis id odio facilisis eu suscipit mauris volutpat. Cras leo mi, bibendum ac tincidunt vitae, faucibus vel ante. Integer molestie elit ut mi vehicula in gravida sem volutpat. Mauris sed pretium mauris. Nulla dapibus laoreet mi sed gravida. Nam libero nunc, hendrerit ac ornare eget, sagittis vel est. Suspendisse potenti. Suspendisse egestas, neque sit amet ullamcorper commodo, felis eros placerat odio, vel pulvinar leo nulla ac purus. Quisque iaculis mi in nisl luctus ultrices.
Sed turpis diam, egestas vitae dictum ac, aliquam et quam. Donec dapibus convallis quam, sit amet dictum odio bibendum eget. Donec varius dolor suscipit est laoreet consectetur. Nunc iaculis vehicula diam, ut ultricies sem mollis nec. Ut suscipit luctus dapibus. Duis sollicitudin ultricies hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, sapien id faucibus bibendum, ipsum est congue nulla, eu hendrerit enim tellus quis arcu. Donec sit amet augue nisi, id feugiat est. Vestibulum ac ante sit amet elit euismod porta sed sed augue. Nam eu purus nibh, a suscipit magna.
Nam malesuada, est dictum egestas congue, mauris mauris porta est, commodo hendrerit erat lectus sit amet nisi. Integer a ligula vitae orci condimentum scelerisque quis in leo. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non felis ut turpis rutrum consectetur. Aenean ut ipsum lectus, quis volutpat sapien. Sed mollis malesuada vulputate. Nullam dapibus scelerisque convallis. Mauris pellentesque porta velit, vitae placerat mi vulputate sed.
Nam non nulla quis magna pulvinar suscipit. Quisque egestas nisl eget quam tempus facilisis. Etiam in ligula in erat commodo lacinia ut vitae nulla. Nulla accumsan auctor risus eu accumsan. Ut hendrerit augue sed tortor fringilla non commodo enim gravida. Nunc non odio magna. In hac habitasse platea dictumst. Praesent malesuada elit eu dui consectetur at sollicitudin purus ullamcorper. Sed mattis tempor mi placerat tincidunt. Phasellus quis nunc nisi, ut condimentum nibh.
</div>
<div id='top1'>
One
</div>
<div id='left1'>
One
</div>
<div id='right1'>
One
</div>
<div id="shadow1">
One
</div>
<div id='top2'>
Two
</div>
<div id='left2'>
Two
</div>
<div id='right2'>
Two
</div>
<div id="shadow2">
Two
</div>
<script src='isoworld.packed.js'></script>
<script>
var c = new isoworld({
ground: "ground"
});
c.createCube({
top: "top1",
left: "left1",
right: "right1",
shadow: "shadow1",
size: 150,
x: 400,
y: 50
});
c.createCube({
top: "top2",
left: "left2",
right: "right2",
shadow: "shadow2",
size: 150,
x: 600,
y: 200
});
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
