3

OK, so this is NOT a self-promotion!!

I currently have an cyberpunk website that is running phpbb forum, which is using the default prosilver theme, on top of that theme I have another theme/skin called 1978 it gives the website that old school green terminal look. What I would like to do, is create that curved look like the old monitors. I have cool-retro-term which I used as an example of the effect I'm looking for. (see pic) not the lines or flicker just the curved look cause what I'm wanting is for people to be able to hit F11 which goes full screen on the browser and it would look like they are using the website on a old monitor.

I assumed I would setup a div around the entire body or after and give it a class then call some css maybe some java <-- like I have any idea how that would work..lol what I'm looking for is a starting place? I've found some stuff on codepen but it's not quite what I'm looking for.

Any ideas??

enter image description here

jcubic
  • 61,973
  • 54
  • 229
  • 402
Cyberstrator
  • 71
  • 1
  • 4
  • 1
    AFAIK you can't have a curved div with CSS. The only way is to render the thing on the canvas where you have more control. Here is example https://codepen.io/fiorella-coitinho/pen/MWyMXLe – jcubic Jan 12 '22 at 10:27
  • Well, it's a nice demo but I can't use it cause it's all scripts that doesn't like to be modified or at least I don't see how I can use it.. – Cyberstrator Jan 17 '22 at 21:56
  • There is source code there, what do you mean you can't edit? – jcubic Jan 18 '22 at 18:57
  • 1
    If you mean that you can't save on someone else Codepen account, then you need to register and fork the Demo. But I hope that you know how to copy-paste code. Everything is there. If you don't know how, maybe you should start with learning how to code in HTML, CSS, and JavaScript. Note that StackOverflow is a programming community if you ask for help you're expected to know how to code. – jcubic Jan 18 '22 at 18:59
  • No, I've downloaded it and tested it, that's not the issue.. the issue is it doesn't do what I need or is not built in a way that I can use it on my site. – Cyberstrator Jan 19 '22 at 18:42
  • You didn't say what is exactly what you need. It's a website - yes, it has a curved terminal yes, the rest you need to do yourself. Also in fact this is not a programming question at all. Maybe you will be better asking on Reddit. – jcubic Jan 20 '22 at 21:37
  • FYI: I've browsed a lot of CodePen and created a collection of Vintage Terminals it don't have curved screen because they are not using canvas but may be of use to you https://codepen.io/collection/AeGGxz – jcubic Jan 20 '22 at 21:47

1 Answers1

3

It can be done with SVG filters, the problem is that every time you resize the page, the svg parameters must be changed. Did a demo here. Still documenting and cleaning it for Github.

https://frindestown.duckdns.org/videomator.html

Chafalleiro
  • 31
  • 3
  • 2
    Wow, thats pretty close to the idea, I looked at it through firefox inspect, there is a lot of other stuff in the html, do you have just this effect stand alone? – Cyberstrator Sep 10 '22 at 16:50