JSFiddle - React, Tailwind, and code Playground

by Rudy The F

HTML

<div class="ascii-box" id="box1">CSS Stupid Pet Tricks:

  -= <span style="color: #ff0;">"ASCII-ART BORDERS!!!"</span> =-

     (With compliments to Joshua Stein for the DOS437 font)

by:
<span style="color: #0cc;">
 ~~~~
 F  .
  L
   E
 .  B

 ~~~~</span>
</div>

<div class="ascii-box" id="box2">They kind of suck, but . . .
    
I could do more with some containing DIVs, but I was trying to use only a single DIV for the effect, and this is what I ended up with.</div>

Don't like that? How about some form fields?

<label><input type="checkbox" /><span>Checkbox</span></label>
<label><input type="checkbox" /><span>Checkbox</span></label>
<label><input type="checkbox" /><span>Checkbox</span></label>
<label><input type="checkbox" /><span>Checkbox</span></label>
<label><input type="radio" name="foo" /><span>Radio</span></label>
<label><input type="radio" name="foo" /><span>Radio</span></label>
<label><input type="radio" name="foo" /><span>Radio</span></label>
<label><input type="text" value = "Input Things" /><span> Text Box</span></label>
<div id="cursor">▒</div>

CSS

@font-face {
    font-family: "dos437_web";
    src: url(https://funhappythings.pixelsaredead.com/dos437/DOS437Unicode.ttf);
}

/* Just some color and positioning for the boxes... */
#box1 {
    width: 30em;
    height: calc(18*1.75em);
    padding: calc(1*1.75em) 2em;
    margin-bottom: calc(2*1.75em);
    background-color: #800;
}

#box2 {
    position: absolute;
    top: calc(9*1.75em);
    left: 10em;
    width: 30em;
    height: calc(7*1.75em);
    padding: 1.75em 2em;
    background-color: #008;
}

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    color: #ccc;
    font: 12px/175% dos437_web;
}

/* Realistic selection colors... */
::selection {
    background: rgba(204,204,204,0.99);
    color: #000;
}
::-moz-selection {
    background: #ccc;
    color: #000;
    opacity: 100%;
}

#cursor {
    pointer-events: none;
    position: absolute;
    background-color: #000;
}


html, body, label, a, input {
    cursor: none;
}

.ascii-box {
    position: relative;
    margin: 1.75em 1em;
    background-color: inherit;
    white-space: pre-wrap;
}

div.ascii-box::before {
    position: absolute;
    top: -1.75em;
    bottom: 0;
    left: -1em;
    right: -1em;
    white-space: pre;
    background-color: #000;
    
    /* BEHOLD! The hackiest hack in the history of cheesy hacks!
    
       Fill the pseudos with a load of "border" characters, then use overflow:hidden to trim it off.
       put the whole works behind the main DIV, and voila! */
    overflow: hidden;
    z-index: -1;
    content:...

JavaScript

// This is just the cursor

var offset = [], dims = [], $body, $cursor;
$body = $('body');
$cursor = $('#cursor');
offset = [($body.outerWidth() - $body.innerWidth()) / 2, ($body.outerHeight() - $body.innerHeight()) / 2];
dims = [$cursor.width(), parseInt($cursor.css('line-height'))];

$(document).on('mousemove', function (e) {
    var left, top;
    left = Math.round((e.pageX - dims[0] / 2) / dims[0]) * dims[0] + offset[0];
    top = Math.round((e.pageY - dims[1] / 2) / dims[1]) * dims[1] + offset[1];
    $cursor.css({ top: top , left: left });
});