User talk:Eli

Fog over Zero

Hey,

I made a crude first version rendition of the foggy effect over the word Zero, if ever we want that in the wiki. Works with Template:Zero.

Can you add this in MediaWiki:Vector.css:

@supports (background-clip: text) or (-webkit-background-clip: text) {
	@keyframes zero {
		from	{ background-position: 0% center; }
		to	{ background-position: 100% center; }
	}
	.zero {
		background-image: url(Zero_Fog.png);
		animation-name: zero;
		animation-duration: 10s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-background-clip: text;	
		background-clip: text;
		color: rgba(0,0,0,0);
	}
}

Zero_Fog.png is there: File:Zero Fog.png. Lots to improve, but it’s bed time for me.

Thanks!

Nclm (talk) 23:08, 31 January 2018 (UTC)

Oh wow, this is SO super impressive. Thank you so much!!! I was wanting to do something like this, but wasn't exactly sure how to do it with a background image and CSS animations. I've added it now and it looks great: Zero. It would be cool if this could be used in links, too, if you'd have any ideas there. This also gets me thinking that we could add support for the other fonts sometimes found throughout the game, too, such as the style used when reading text on computers (just a different font should probably suffice for this, i.e. span class that just switches text to Letter Gothic). Thanks again!

–Eli (talk) 00:21, 1 February 2018 (UTC)

Expanded it slightly to support fog over other text, too. –Eli (talk) 00:35, 1 February 2018 (UTC)

Cool, thanks! I'll look into links another day (and possibly into replicating the code effect, if not to gimmicky for a wiki? We can't host Letter Gothic though…), but before I forget, I made a silly mistake in my CSS yesterday: could you replace 100% (width of the span) by -800px (width of the picture)? So that it loops seamlessly without a cut, and gets the same travelling speed whatever the size of the text. It may speed it up a little bit, so we could set the duration to 15 or 20s. Also, if I ever have more suggestion for the CSS, what about I post them in MediaWiki_talk:Vector.css instead? (do you have it in your watch list?) Nclm (talk) 12:00, 1 February 2018 (UTC)

I think TypeKit has Letter Gothic? Maybe you have to pay or something… Boo. Podkova's super easy because Google has it as a webfont – wish that one were there as well. :P Made the change you requested (and changed the time to 20s as well). And I have it in my watchlist now! (Apparently you watch main pages and talk pages together. TIL.) Or just ping/PM me on Discord. :)

–Eli (talk) 12:10, 1 February 2018 (UTC)