Sign in Subscribe

Hack it -> CRT ([Ghost][HTML/CSS])

Remi Dubourgnoux

• 3 min read

/!\/!\/!\---WARNING---/!\/!\/!\

Seizures caused by light are known as photosensitive epilepsy.
Content that flickers, flashes, or blinks can trigger photosensitive epilepsy.
CRT are known for photosensitive epilepsy issues.

Therefore you can use the according button below to disable the flickering.
The other button starts the flickering, and/or restore from disabled mode.
Both will hide this warning.

Hello, Today's topic is a bit peculiar.
If you hate HTML/CSS then you should run-out right now.

Well then, since you stayed, Welcome @home !

The white and modern Michelin template doesn't quite reflect the idea of idiosyncrasy.
Since Hacking is all about freedom and creativity, I thought the template should reflect that. As Hacking was defined in 1993 in the rfc1392, but was originaly born in 1878 even if the term in an invention of the 1960's, the flat design seemed a bit too modern.


As I'm not the CMS administrator, I couldn't change the template !

By chance the ghost CMS allows html elements, so changing the style would be quick and simple.
At least that was what I expected...
Alas, the full design of elements was defined in the ghost(CMS) css file and I couldn't change the background design from the inside of the article.
Title colors, background designs, social networking divs, etc. were impossible to modify/hide.
So I had to inject my own css and meddle with the CMS by overriding presets to be able to tailor the site into what I wanted to achieve : This CRT theme !

-> In ghost (logged in)

  1. Create an article then go in "post settings" at the upper right.
  2. Scroll down and open the "Code injection" drop-down.
  3. Fill the "Post header {{ghost_head}}" TextBox, to add the CSS style.
  4. Prepare the new design ->
    1. Hide unwanted elements :
      • site-header
      • site-nav-main
      • post-full-byline
      • post-full-social
      • contact-form
      • read-next
    2. Set post-title color to an 8bit color preset.
    3. Set post-full-content and site-footer backgrounds to none.
    4. Define site-main, body and site-wrapper background to a stripped sepia/black to achieve a retro-style.
  5. Add a CRT-like scanline :
    1. Use the @keyframes keyword to setup the scanline animation -> a simple linear movement (here it's called 'refresh').
    2. Choose the style of the scanline in the css .refresh block. The usual style is a translucent green fade-in gradient, to emulate the old screens image persistance.
    3. Add the refresh css animation and make it repeat itself endlessly every 8 to 10 seconds.
  6. Create an overlay to display pixels (mine is .cligno)
    1. Horizontal lines will be 1px translucent black/white stripes.
    2. Vertical lines will be 1px red,green,blue and highly translucent. (opacity at 0.08)
    3. Put it on foreground with "z-index:2;"
  7. Add the final touch with an irregular screen flickering:
    1. Use the @keyframes keyword to unevenly change the opacity of the .cligno overlay.
    2. Make an ultra short animation for the .cligno element to cause the flicker: 0.02s is 50Hz (or fps).
    3. Be sure to use "pointer-events:none;" for your overlay to enable people to click links and copy-paste things.

Well it's time to display the Code Injection -> Post header content:


<style>

.site-header,.site-nav-main,.post-full-byline,.post-full-social,.contact-form,.read-next {
display:none;
}
#site-main,body,.site-wrapper {
display:block;
background: repeating-linear-gradient(to bottom,#332600,#332600 4px,#060114 4px,#060114 8px);
width:100%;
height:100%;
min-height:200%;
}

.post-full-title {
color: #0000ff;
}

.post-full-content,.site-footer {
background: none;
}

@keyframes refresh{0%{bottom:100%}70%{bottom:100%}100%{bottom:0px}}
.refresh {
float: left;
width: 200%;
height: 100px;
z-index: 8;
background: linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(255,255,255,.4) 10%,rgba(0,0,0,.1) 100%);
opacity: .1;
position: fixed;
bottom: 0;
animation: refresh 8s linear infinite;
animation-name: refresh;
animation-duration: 8s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}

@keyframes flicker{
0%{opacity:0.5}
5%{opacity:0.7}
10%{opacity:0.9}
15%{opacity:0.5}
20%{opacity:0.4}
25%{opacity:0.4}
30%{opacity:0.3}
35%{opacity:0.5}
40%{opacity:0.6}
45%{opacity:0.5}
50%{opacity:0.3}
55%{opacity:0.4}
60%{opacity:0.7}
65%{opacity:0.9}
70%{opacity:0.7}
75%{opacity:0.4}
80%{opacity:0.5}
85%{opacity:0.7}
90%{opacity:0.6}
95%{opacity:0.9}
100%{opacity:1}
}

.cligno {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
background: repeating-linear-gradient(90deg,rgba(255,0,0,0.08) 0px 1px,rgba(0,255,0,0.08) 1px 2px ,rgba(0,0,255,0.08) 2px 3px),repeating-linear-gradient(0deg,transparent 0px 1px, rgba(0,0,0,0.4) 1px 2px);
opacity:0;
pointer-events:none;
animation:flicker 0.02s infinite;
}

</style>

Then the blog code is rather simple :


<div class="refresh"></div>
<div class="cligno"></div>
<div style="padding-top:50px;background:transparent;color:white;">
<p>Text Here</p>
<p>Text Here</p>
</div>

Note: The provided code does not include the "epilepsy-friendly" mode !

That's all for this fun XMAS post. I hope you enjoyed it, thx for attending.
Stay safe & fun & creative !