diff --git a/3d.css b/3d.css new file mode 100644 index 0000000..3529c47 --- /dev/null +++ b/3d.css @@ -0,0 +1,57 @@ +html { position: relative; padding:0; } +html, body { width: 100%; height: 100%; overflow: hidden; } + +.css3d { + position: absolute; + top: 10%; + left: 10%; + bottom: 10%; + right: 10%; +} +.css3d div { + width: 40%; + height: 40%; + border: thin solid red; + background: pink; + position: absolute; +} +.css3d div:nth-child(1) { top: 5%; left: 5%; } +.css3d div:nth-child(2) { bottom: 5%; right: 5%; } + +.css3d #a1:after { + content: 'BEFOR'; + display: block; + border: thin solid green; + position: absolute; + width: 100%; + height: 100%; + opacity: 0.5; + z-index: 3; + background: white; + pointer-events: all; + } + .css3d #a1:after:hover { + border: 20px solid black; + background: blue; + } + +.css3d iframe { width: 50%; height: 50%; } + +.css3d div:focus-within { + border: thick solid blue; +} + +.css3d div:active:after { + content:'active'; +} + +.css3d div:target { + background: plum; +} + +.css3d div:target-within { + border-style: dashed; +} +.css3d div.target-within { + border-style: dashed; +} diff --git a/index.html b/index.html index bfac82b..9b5f5f0 100644 --- a/index.html +++ b/index.html @@ -3,85 +3,118 @@ Suzanne Soy’s page + +

Suzanne Soy

Procedural Designer

Latest version of my Ph.D draft

-
-
-
-
Hello world -
-
-
-
It's turtles all the way down! -
-
-
-
- + +
+
+
+
+
Hello world + → hello +
+
+
+
It's turtles all the way down! + → turtles +
+
+
+ +
+
+
+ → useful tip + Don't use CSS to do this.
+
+
+
+
+
+
+
+
-
-
-
Don't use CSS to do this.
-
-
-
-
-
-
-
-
-
-
-
Nested rooms!
-
-
-
-
-
-
-
-
+
+
+ → nested-rooms + Nested rooms! +
+
+
+
+
+
+
+
+
+
-
-
-
Mental palace -
-
-
-
Oh my…
-
-
-
It's full of <div>s
-
-
-
-
-
-
-
-
+
+
Mental palace + → mental-palace +
+
+
+ + Oh my… +
+
+
+
+ + It's full of <div>s +
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/target-within-shim.js b/target-within-shim.js new file mode 100644 index 0000000..76f79b7 --- /dev/null +++ b/target-within-shim.js @@ -0,0 +1,27 @@ +function toggle(element, className, enable) { + var cls = element.className.split(' '); + var newcls = [] + for (var i = 0; i < cls.length; i++) { if (cls[i] != className) { newcls[newcls.length] = cls[i]; } } + if (enable) { newcls[newcls.length] = className; } + element.className = newcls.join(' '); +} + +function targetWithin(id, enable) { + if (id) { + for (var e = document.getElementById(id); e; e = e.parentElement) { + toggle(e, 'target-within', enable) + } + } +} + +var current_hash = window.location.hash.substr(1); + +function hashChange() { + targetWithin(current_hash, false); + current_hash = window.location.hash.substr(1); + targetWithin(current_hash, true); +} + +window.addEventListener('load', hashChange, false); +window.addEventListener('DOMContentLoaded', hashChange, false); +window.addEventListener('hashchange', hashChange, false); \ No newline at end of file diff --git a/test.css b/test.css index 14bc8e3..ba4e2f6 100644 --- a/test.css +++ b/test.css @@ -1,5 +1,6 @@ html { position: relative; padding:0; } -html, body { height: 100%; overflow: hidden; } +html, body { height: 100%; } +.view3d { width: 100%; height:100%; top: 0; left: 0; margin: 0; padding:0; /*overflow: hidden;*/ position: fixed; } .scene { position: absolute; @@ -13,9 +14,19 @@ html, body { height: 100%; overflow: hidden; } font-size: x-large; } +/* +.scene .rest { background: black; } +.scene .scene .rest { background: white; } +.rest:hover { background: red; } +:target > .scene > .rest { display: none } +*/ + +#no .scene > .room { animation: 8s turntable infinite; animation-timing-function: ease; } + .scene .scene { transform: translate3d(-50%, -50%, 0) scale(0.9); - overflow: hidden; + /*overflow: hidden; bug in firefox which scrolls the element when the target changes, instead use clip-path */ + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border: thin solid blue; } @@ -23,14 +34,17 @@ html, body { height: 100%; overflow: hidden; } .three-d { position: absolute; - border: thin solid red; - background: pink; transition: transform ease 2s; transform-style: preserve-3d; top: 50%; left: 50%; } +.object { + border: thin solid red; + background: pink; +} + :root { --origin: translate3d(-50%, -50%, -50vmin); --origin-: translate3d(50%, 50%, 50vmin); @@ -43,7 +57,8 @@ html, body { height: 100%; overflow: hidden; } } .test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); } -.test:hover { transform: var(--origin) var(--test-hover); } +.room:target-within > .test { transform: var(--origin) var(--test-hover); } +.room.target-within > .test { transform: var(--origin) var(--test-hover); } :root { --test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg); @@ -51,18 +66,24 @@ html, body { height: 100%; overflow: hidden; } --test2-hover: translate3d(0,0,50vmin) rotateY(0deg); } +.test { --scale: 0.6; } +.test2 { --scale: 1; } + :root { --opacity: 1; } .test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); } -.test2:hover { transform: var(--origin) var(--test2-hover) scale(2); } +.room:target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } +.room.target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); } .hover { z-index: 20; } -.hover:hover { z-index: 30; } +.hover:target-within { z-index: 30; } +.hover.target-within { z-index: 30; } .hover .hover { z-index: 40; } -.hover:hover .hover:hover { z-index: 50; } +.hover:target-within .hover:target-within { z-index: 50; } +.hover.target-within .hover.target-within { z-index: 50; } .wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(-50vmin, 0, 0) rotateY(90deg); } .wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(50vmin, 0, 0) rotateY(90deg); } @@ -75,23 +96,21 @@ html, body { height: 100%; overflow: hidden; } .wall { pointer-events: none; } @keyframes turntable { - 0% { transform: rotateY(0); } - 100% { transform: rotateY(360); } + 0% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } + 25% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(-3deg) rotateX(7deg); } + 50% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(5deg) rotateY(7deg) rotateX(-7deg); } + 75% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(3deg) rotateX(7deg); } + 100% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); } } .room { transform: translate3d(0,0,0) rotate(0); } -.room-test:hover ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } -.room-test:hover ~ .room .test2 { - /*animation: fadeOut 1s;*/ - opacity: 0; - left: 9999vmin; - transition: translate 2s, opacity 1s, left step-end 1s; -} +.room-test:target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } +.room-test.target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); } +.room-test:target-within ~ .room .test2 { opacity: 0; left: 9999vmin; transition: translate 2s, opacity 1s, left step-end 1s; } +.room-test.target-within ~ .room .test2 { opacity: 0; left: 9999vmin; transition: translate 2s, opacity 1s, left step-end 1s; } .room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } -.room-test2:hover ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } -/* .room { animation: 4s turntable infinite; } */ -/* .room { } */ -/*.room * { pointer-events: none; }*/ +.room-test2:target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } +.room-test2.target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } :root { --rainbow-saturation: 80%; @@ -111,14 +130,99 @@ html, body { height: 100%; overflow: hidden; } hsl(360, var(--rainbow-saturation), var(--rainbow-lightness)) 100%) } +.go { background: rgba(255, 255, 255, 0.6); color: black; text-decoration: none; z-index: 100; font-size: calc(130% / var(--scale)); + outline: thin solid white; + position: absolute; top: 0; bottom: 0; left:0; right: 0; display: flex; align-items: center; justify-content: center; + transition: background 0.6s, translate 2s, left step-start 1s; transform-style: preserve-3d; } +.go::before { position: absolute; content: ''; left: 0; right: 0; height: 1.5em; z-index: -1; + background: white; transition: background 0.2s; } +.go:hover::before { background: rgba(255, 255, 255, 0.6); } +.go:hover { background: rgba(255, 255, 255, 0.1); } +:target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } +.target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; } +:target-within > .go::before { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; } +.target-within > .go::before { background: rgba(255, 255, 255, 0.0); } +:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; } +.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; } +.go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* don't go to 100% because the easing goes beyond the value */ } +.go::after { + --width: 10; /* vmin */ + --shift: 8; /* vmin */ + --min-distance: 10; /* vmin */ + --distance: var(--min-distance); /* vmin, animated */ + --border: calc(var(--min-distance) + var(--shift)); /* vmin */ + --z: calc(((var(--width) - var(--border)) / 2 + var(--distance)) * 1vmin); + --arrow-width-ratio: calc(var(--width) / (var(--width) + var(--border))); + position: absolute; content: ''; top:50%; left: 50%; width: calc(var(--width) * 1vmin); height: calc(10vmin / var(--scale)); + --ease-out-bounce: cubic-bezier(0.3, 1.8, 0.9, 0.9); + transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-start; + transform: translate3d(-50%, -50%, var(--z)) rotateY(45deg); + --arrow-thickness: 20%; + --arrowhead-position: 60%; + --arrowhead-angle: 51.34deg; /*38.66deg;*/ + --bg: rgba(214, 93, 184, 0.5); + + /* + background: linear-gradient(var(--arrowhead-angle), var(--bg) 50%, transparent 50%) 60em 0em / calc(100em - 60em) 50em no-repeat, + linear-gradient(calc(0deg - var(--arrowhead-angle)), transparent 50%, var(--bg) 50%) 60em 50em / calc(100em - 60em) 50em no-repeat, + linear-gradient( 0deg, transparent calc(50% - var(--arrow-thickness)), + var(--bg) calc(50% - var(--arrow-thickness)), + var(--bg) calc(50% + var(--arrow-thickness)), + transparent calc(50% + var(--arrow-thickness))) 0em 0em / 60em 100em no-repeat; + */ + border-right: calc(var(--border) * 1vmin) solid transparent; + background-image: linear-gradient(90deg, rgba(102, 231, 231, 0.856) 25%, rgba(255,255,255,0.8) 50%, rgba(214, 93, 184, 0.7) 75%); + background-size: 400%; + background-position-x: 75%; /* don't go to 100% because the easing goes beyond the value */ + background-repeat: no-repeat; + --vertical-triangle: calc(var(--arrowhead-position) * var(--arrow-width-ratio)); + --arrow-top: calc(50% - var(--arrow-thickness)); + --arrow-bottom: calc(50% + var(--arrow-thickness)); + --mask-image: conic-gradient(from calc(-90deg - var(--arrowhead-angle)) at calc(100% * var(--arrow-width-ratio)) center, black 0deg, black calc(var(--arrowhead-angle)*2), transparent calc(var(--arrowhead-angle)*2)), + linear-gradient(90deg, transparent var(--vertical-triangle), black var(--vertical-triangle)), + linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom)); + + + + /* --mask-image: conic-gradient(from calc(-90deg - var(--arrowhead-angle)) at calc(100% * var(--arrow-width-ratio)) center, black 0deg, black calc(var(--arrowhead-angle)*2), transparent calc(var(--arrowhead-angle)*2)), + linear-gradient(90deg, transparent var(--vertical-triangle), black 28%), + linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom);*/ + + mask-image: var(--mask-image); + -webkit-mask-image: var(--mask-image); + mask-composite: intersect, add; + -webkit-mask-composite: destination-in, source-over; + + /* + font-size: 1px; + height: 100em; + width: 100em; + clip-path: polygon(0% calc(50% - var(--arrow-thickness)), + var(--arrowhead-position) calc(50% - var(--arrow-thickness)), + var(--arrowhead-position) 0%, + 100% 50%, + var(--arrowhead-position) 100%, + var(--arrowhead-position) calc(50% + var(--arrow-thickness)), + 0% calc(50% + var(--arrow-thickness))); + + pointer-events: all; + */ +} + +@keyframes trans { + 0% { background: rgba(214, 93, 184, 0.719); } + } + .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;} -.scene:hover > .rest:not(:hover) ~ .room.room-test:not(:hover) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } -.scene:hover > .rest:not(:hover) ~ .room:not(:hover) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; } +.scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } +.scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); } +.scene:target-within:not(:target) > .room:not(:target-within) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; } +.scene.target-within:not(:target) > .room:not(.target-within) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; } + .room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; } -.object:hover:before { - opacity: 1; -} +.object:target-within:before { opacity: 1; } +.object.target-within:before { opacity: 1; } .object:before { content: "← back"; border: thin solid brown;