pts
@pts

The overlapping white, red, and blue text-shadow attributes really take it to the next level imo. (Hopefully it makes up for using Georgia instead of Century for the title font.)

NEON
GENESIS
EVANGELION
EPISODE: 12
She said, "Don't make others suffer for your personal hatred."
<div style="background-color: black; color:transparent; font-family: 'Georgia'; padding: 1em; font-size: 2em; text-shadow: 0px 0px 1.4px white, -1px 0px 3px blue, 1px 0px 3px red; line-height: 1em; ">
<span style="display: inline-block; font-weight: 600; transform: scale(.7,1); line-height: .5em;">NEON</span><br />
<span style="display: inline-block;  font-weight: 600; transform: scale(.7,1) translate(-13px,-4px); line-height: 1em;">GENESIS</span><br />
<span style="display: inline-block;  font-size: 1.35em; font-weight: 600; transform: scale(.7,1) translate(-48px,0); line-height: .6em;">EVANGELION</span><br />
<span style="display: inline-block;font-family: Helvetica; font-size: .7em; font-weight: 600; line-height: 1.7em; transform: translate(13px,0px)">EPISODE: 12</span><br />
<span style="line-height: .9em;display: inline-block; font-family: 'Times New Roman'; font-weight: 700; transform: scale(.8,1) translate(-58px,0);">She said, "Don't make others suffer for your personal hatred."</span><br />
</div>

pts
@pts
NEON
GENESIS
EVANGELION
EPISODE:12
She said, "Don't make others suffer for your personal hatred."
<div style="
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiID48ZGVmcz48ZmlsdGVyIGlkPSJubm5vaXNlLWZpbHRlciIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBwcmltaXRpdmVVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ibGluZWFyUkdCIj4KCgk8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4xMDkiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlc3VsdD0idHVyYnVsZW5jZSI-PC9mZVR1cmJ1bGVuY2U-Cgk8ZmVTcGVjdWxhckxpZ2h0aW5nIHN1cmZhY2VTY2FsZT0iMTUiIHNwZWN1bGFyQ29uc3RhbnQ9IjAuNzUiIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iI2UwOGNjNiIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgIAkJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjMiIGVsZXZhdGlvbj0iMTAwIj48L2ZlRGlzdGFudExpZ2h0PgogIAk8L2ZlU3BlY3VsYXJMaWdodGluZz4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIGluPSJzcGVjdWxhckxpZ2h0aW5nIiBzdGREZXZpYXRpb249Ii4yIiByZXN1bHQ9ImJsdXIiIC8-Cgo8L2ZpbHRlcj48L2RlZnM-PHJlY3Qgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIGZpbGw9IiMwNDA3MDciID48L3JlY3Q-PHJlY3Qgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIGZpbGw9IiNlMDhjYzYiIGZpbHRlcj0idXJsKCNubm5vaXNlLWZpbHRlcikiPjwvcmVjdD4KPC9zdmc-);
color:transparent; 
font-family: 'Georgia';
padding: 1em;
font-size: 2em;
transform: translateY(4px) scale(1.03, 0.97);">
	<div style="
		line-height: .9em;
	">
		<span style="
		display: inline-block; 
		font-weight: 600; 
		text-shadow: 0px 0px 1.8px rgba(255,255,255,.9), -1px 0px 3px rgba(50,50,255,.9), 1px 0px 3px rgba(255,50,50,.9), 0px 1px 3px rgba(50,255,50,.9);
		transform-origin: left; 
		transform: scale(0.7,1);
		">NEON</span><br />
		<span style="
		display: inline-block;  
		transform-origin: left; 
		transform: scale(0.7,1);
		text-shadow: 0px 0px 1.8px rgba(255,255,255,.9), -1px 0px 3px rgba(50,50,255,.9), 1px 0px 3px rgba(255,50,50,.9), 0px 1px 3px rgba(50,255,50,.9);
		font-weight: 600; 
">GENESIS</span><br />
		<span style="
		line-height: .8em;
		display: inline-block;
		font-size: 1.35em; 
		font-weight: 600;
		transform-origin: left; 
		transform: scale(0.7,1);
		text-shadow: 0px 0px 2.2px rgba(255,255,255,.9), -1px 0px 3px rgba(50,50,255,.9), 1px 0px 3px rgba(255,50,50,.9), 0px 1px 3px rgba(50,255,50,.9);
		">EVANGELION</span><br />
	</div>
	<span style="
	display: inline-block;
	font-family: Helvetica; 
	font-size: .7em; 
	font-weight: 600;
	text-shadow: 0px 0px 1.2px rgba(255,255,255,.9), -1px 0px 3px rgba(50,50,255,.9), 1px 0px 3px rgba(255,50,50,.9), 0px 1px 3px rgba(50,255,50,.9); 
	transform-origin: left; 	
	transform: scale(1,1.2);
	line-height: 1.4em; ">EPISODE:12</span><br />
	<span style="
	line-height: .8em;
	display: inline-block; 
	text-shadow: 0px 0px 1.4px rgba(255,255,255,.9), -1px 0px 3px rgba(50,50,255,.9), 1px 0px 3px rgba(255,50,50,.9), 0px 1px 3px rgba(50,255,50,.9);
	transform-origin: left; 
	transform: scale(0.8,1);
	font-family: 'Times New Roman'; 
	font-weight: 700;">She said, "Don't make others suffer for your personal hatred."</span><br />
</div>

Okay, this was really bothering me, so now it's aligned properly, the CRT blurry text effect is applied more evenly across the text, and it has a base64-encoded noisy SVG background instead of flat black. I now rest.


You must log in to comment.