Skip to content

Commit

Permalink
Cool 3D example.
Browse files Browse the repository at this point in the history
  • Loading branch information
gnat authored Feb 25, 2024
1 parent b46494a commit 4a8aa31
Showing 1 changed file with 2 additions and 16 deletions.
18 changes: 2 additions & 16 deletions example.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,23 +143,10 @@
</button>
</div>
</div>

<!-- 3D sample and scoped functions -->
<!-- Sscoped functions and 3D -->
<div class="card">
3D Card
<div></div>
<style>
body { perspective: 1500px; }
.card {
position: relative; width: 300px; height: 400px; padding: 1em; margin: 2em 0;
font-family: system-ui, sans-serif; font-weight: bold; text-align: right; text-shadow: 0 0 4px #000; color: #ddd;
box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
cursor: pointer;
transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
}
.card :hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
.card > div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
</style>
<script>
me().on('mouseenter', (ev) => {
let e = me(ev)
Expand All @@ -185,11 +172,10 @@
}
</script>
</div>

<!-- Try out window.onload predictable call chain -->
<script>onloadAdd(()=>{ console.log("Hello from Surreal onloadAdd()") })</script>
<script>onloadAdd(()=>{ console.log("I added to onload without clobbering the previous function") })</script>

<!-- Check the code! -->
<button class="blue">😺 Visit the source code for this page.
<script>
me().on("click", ev => { window.location.href ="https://github.com/gnat/surreal/blob/main/example.html" })
Expand Down

0 comments on commit 4a8aa31

Please sign in to comment.