I have an idea for the aesthetics of my website. Going with a #retro theme, I'd like to take a picture similar to this and put the text of my #website within the monitor. Does anyone know of any way in #HTML to make it distort slightly so it looks like it's on a #CRT screen instead of a flat screen while being simple text and not a picture? I'd like it to feel like visitors are using a #terminal
My site:
https://loosecannon.neocities.org/
Currently #WIP #RetroWeb
@gbrannan217 there is some nice examples of text styling here http://aleclownes.com/2017/02/01/crt-display.html but screen deformation is going to require a radically different approach
@darkliquid You are awesome! Thank you!!
@gbrannan217 @darkliquid Yeah, this is SUPER cool!
@meandeef @gbrannan217 if you wanted to go really hardcore, you could write your website as a BBC micro application and then run it in a web-page based emulator like: https://github.com/mattgodbolt/jsbeeb - with some modifications, you could even make the html canvas it uses do all the CRT effects and screen deformation you want :D
@darkliquid @gbrannan217 My grandfather had one of these! That's awesome!
@meandeef @gbrannan217 I used one back when I was in middle school, that and some Acorn Electrons. I expect with some minimal hacks to the emulator, you could make it so you can 'follow links' in your BASIC app, which would just load a new .BAS file into the emulator - allowing you to code multiple pages that all can link off to each other, etc.
@darkliquid @gbrannan217 think I’m sticking with just the CRT CSS but thanks 🙏🏻
@meandeef @gbrannan217 no worries - going down the emulator route is crazy work for minimal payoff (plus you lose a bunch of accessibility again). Fun though, if hacking javascript bbc emulators in the browser is your idea of fun :D
@gbrannan217 depends exactly on what effects you want. You can use text-shadow and blur to add CRT style phospher glows but if you want to mimic CRT screen curvature, you're out of luck without resorting to using something like webgl to render text and applying shaders, etc, but that won't be very accessible, nor will it be very easy to work with