Editing 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]]:
<pre><nowiki>@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);
	}
}</nowiki></pre>

<code>Zero_Fog.png</code> is there: [[:File:Zero Fog.png]]. Lots to improve, but it’s bed time for me.

Thanks!

[[User:Nclm|Nclm]] ([[User talk: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 [https://i.imgur.com/UNt5H9N.png computers] (just a different font should probably suffice for this, i.e. span class that just switches text to Letter Gothic). Thanks again!
:–[[User:Eli|Eli]] ([[User talk:Eli|talk]]) 00:21, 1 February 2018 (UTC)
@@ Line 1: / Line 1: @@
-{{DISPLAYTITLE:User talk:eli}}
 == Fog over Zero ==
@@ Line 32: / Line 32: @@
 :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 [https://i.imgur.com/UNt5H9N.png computers] (just a different font should probably suffice for this, i.e. span class that just switches text to Letter Gothic). Thanks again!
 :–[[User:Eli|Eli]] ([[User talk:Eli|talk]]) 00:21, 1 February 2018 (UTC)
-::Expanded it slightly to support fog over {{Zero|other text}}, too. –[[User:Eli|Eli]] ([[User talk: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 <code>100%</code> (width of the span) by <code>-800px</code> (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?) [[User:Nclm|Nclm]] ([[User talk: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. :)
-::::–[[User:Eli|Eli]] ([[User talk:Eli|talk]]) 12:10, 1 February 2018 (UTC)
-:::::Tweaked it a bit to make it move diagonally, and in the direction of text (LTR) too. :) –[[User:Eli|Eli]] ([[User talk:Eli|talk]]) 13:12, 1 February 2018 (UTC)