4 ms·

Nice CRT effect using a CSS animation!

laumars 5y ago
On the desktop, yes. Comes with some readability issues but does work well. However it doesn’t render correctly on mobile — half the site is lopped off.
- dspillett 5y ago
  Which mobile? Looks fine in Chrome on Android on a 1080px wide screen. Though some pages are too wide for portrait orientation, and not zoomable.
  - galgalesh 5y ago
    Works fine in Firefox Focus too.
  - ch_123 5y ago
    I got flickering when looking at it on my iPad. I’m not sure if that was a deliberate attempt to emulate a CRT (and I don’t remember any of the CRTs I had when I was a kid flickering that bad, although I have certainly used some terrible CRT screens that flickered a lot). Certain parts of the past are not worth emulating :)
    - chungy 5y ago
      Typical CRT flicker was pretty subtle, especially at high refresh rates. It becomes more pronounced at low refresh rates, or simply bad monitors. Making a silly effect on a website to evoke a nostalgic feeling doesn't really have to be accurate, and it'd probably be near-impossible to accurately represent the subtleties of a CRT display without compounding them with the subtleties of LCDs, especially so when the LCDs an end user will be using is an unknown.
  - laumars 5y ago
    > Though some pages are too wide for portrait orientation, and not zoomable. That’s exactly what I meant when I said half the page was lopped off.
    - dspillett 5y ago
      (thinks of human Kryten in that episode of Red Dwarf trying to find the zoom function...) Perhaps rotate your phone? It is irritating when pages block zoom (sometimes intentionally but usually as a side effect of working around sizing oddities in some devices/browsers/versions) but here you may have all you need to solve the problem. Unless you have a smaller device and it is still too wide in landscape orientation.
      - laumars 5y ago
        Rotating might work but the bigger problem is that it’s not immediately obvious that you’re losing half page. The retro effect makes it look like the screen fill is intentional. It’s not until you view the page on a desktop that it becomes clear just how much content is missing in portrait on mobile devices.
techrat 5y ago
CSS was borrowed from here: http://aleclownes.com/2017/02/01/crt-display.html http://aleclownes.com/2017/02/01/crt-display.html Found it after inspecting the site to see how it was done.

On the desktop, yes. Comes with some readability issues but does work well. However it doesn’t render correctly on mobile — half the site is lopped off.

dspillett 5y ago
Which mobile? Looks fine in Chrome on Android on a 1080px wide screen. Though some pages are too wide for portrait orientation, and not zoomable.
- galgalesh 5y ago
  Works fine in Firefox Focus too.
- ch_123 5y ago
  I got flickering when looking at it on my iPad. I’m not sure if that was a deliberate attempt to emulate a CRT (and I don’t remember any of the CRTs I had when I was a kid flickering that bad, although I have certainly used some terrible CRT screens that flickered a lot). Certain parts of the past are not worth emulating :)
  - chungy 5y ago
    Typical CRT flicker was pretty subtle, especially at high refresh rates. It becomes more pronounced at low refresh rates, or simply bad monitors. Making a silly effect on a website to evoke a nostalgic feeling doesn't really have to be accurate, and it'd probably be near-impossible to accurately represent the subtleties of a CRT display without compounding them with the subtleties of LCDs, especially so when the LCDs an end user will be using is an unknown.
- laumars 5y ago
  > Though some pages are too wide for portrait orientation, and not zoomable. That’s exactly what I meant when I said half the page was lopped off.
  - dspillett 5y ago
    (thinks of human Kryten in that episode of Red Dwarf trying to find the zoom function...) Perhaps rotate your phone? It is irritating when pages block zoom (sometimes intentionally but usually as a side effect of working around sizing oddities in some devices/browsers/versions) but here you may have all you need to solve the problem. Unless you have a smaller device and it is still too wide in landscape orientation.
    - laumars 5y ago
      Rotating might work but the bigger problem is that it’s not immediately obvious that you’re losing half page. The retro effect makes it look like the screen fill is intentional. It’s not until you view the page on a desktop that it becomes clear just how much content is missing in portrait on mobile devices.

techrat 5y ago

CSS was borrowed from here: http://aleclownes.com/2017/02/01/crt-display.html http://aleclownes.com/2017/02/01/crt-display.html Found it after inspecting the site to see how it was done.