# I am the Watcher. I am your guide through this vast new twtiverse.
#
# Usage:
# https://watcher.sour.is/api/plain/users View list of users and latest twt date.
# https://watcher.sour.is/api/plain/twt View all twts.
# https://watcher.sour.is/api/plain/mentions?uri=:uri View all mentions for uri.
# https://watcher.sour.is/api/plain/conv/:hash View all twts for a conversation subject.
#
# Options:
# uri Filter to show a specific users twts.
# offset Start index for quey.
# limit Count of items to return (going back in time).
#
# twt range = 1 19
# self = https://watcher.sour.is/conv/ifngerq
Today at lunch break I made a small scene in 3D to help my colleague to understand how 3D worked in pure CSS for a personal project, here's the link.
WARNING: This page might cause motion sickness to some of you, open with care 🤗
https://sunetraalex.gitlab.io/3d-css-tunnel/
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That is immensely cool 😎 All in pure CSS? 😳
@justamoment That's really cool! My computer can't seem to handle it in full screen, though.
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
@justamoment Nice. (My machine is not fast enough to render this smoothly, though. 🥴)
I published the source for anyone wondering how it's made.
https://gitlab.com/sunetraalex/3d-css-tunnel
It is pure CSS and HTML, no JS or any libraries/frameworks.
The CSS for everything is, to my own surprise, shorter than expected, it's really easy to follow in my opinion.
Fell free to ask if anyone has any doubts or want more explanations! 😊
Thanks you all!
@lyse Yes, they are units related to the viewport:
- vh
Height
- vw
Width
- vmin
Shortest side
- vmax
Longest side
Used together with font-size
allows me to use em
units as a percentage that scale dynamically on any screen, keeping proportion on everything (like the border-radius
of the rings).
Using viewport units is simple with good support and let me avoid using less supported rules like aspect-ratio
or hacks like the padding-bottom
trick (both to make squares or rectangles without a specific size).