+1 vote
by (200 points)
edited by

Hello,

I am new to CSS and am experimenting around, and I have an idea I have not been able to figure out on my own.

I have found and pasted the following code to my story stylesheet (using Twine 2.1.3 and Harlowe 2.0.1) to prevent links in my story from changing color if they've already been visited:

tw-link, .enchantment-link {
    color: #4169E1;
}
tw-link:hover, .enchantment-link:hover {
    color: #4169E1;
}
.visited {
    color: #4169E1;
}
.visited:hover {
    color: #4169E1;
}

Meanwhile, I have also looked for ways to display some rainbow text, and found this CSS snippet:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

I pasted it into the stylesheet as well and so far it works when used to display "plain" text in rainbow colors as follows:

<div><span class="rainbow">Text</span></div>

Now my question is, is there a way to display certain links with the same rainbow color? I.e, not all links, which I would like to keep being blue and bold by default, but only some links with some code or tag?

While messing around, I managed to get a line of rainbow-colored text to rumble like so:

(text-style: "rumble")[<b><span class="rainbow">Rumble rainbow test</span></b>]

Would this be combinable with links? (As in, to display a link with bold, rainbow-colored and rumbling text while leaving the other links bold, blue and still by default?)

Thank you very much!

1 Answer

+2 votes
by (159k points)
selected by
 
Best answer

NOTE: Due to way that Harlowe has implemented it's passage transition effect there can be issues when using HTML elements directly within a Passage, doing so can cause some text to appear instantly while other text appears using the normal fade-in.

The following example demonstrates this issue, just place it within a new Passage (or Project) then view that Passage.

The quick brown fox jumped over the lazy dog.

<div><span class="rainbow">The quick brown fox jumped over the lazy dog.</span></div>

The quick brown fox jumped over the lazy dog.

... because of this issue I generally recommend using a named hook as the target of a CSS selector rather than a div or span element. 

A. If you view your story in a web-browser and then use your web-browser's built-in Developer Tools to Inspect the HTML elements being generated for your (text-style:) macro example you will see something like the following:

<tw-expression type="macro" name="text-style"></tw-expression>
<tw-hook style="animation: rumble 0.1s linear 0s infinite; display: inline-block;">rumbling text</tw-hook>

... the CSS within the style property is causing the rumbling effect, and you can use the same CSS within your Story Stylesheet to achieve a similar results.

B, You can use CSS like the following to target two named hooks (named rainbow and rumble) to achieve the effects you want.

tw-hook[name="rainbow"] {
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

tw-hook[name="rumble"] {
	animation: rumble 0.1s linear 0s infinite;
	display: inline-block;
}

... notice that the CSS selectors reference the name of the named hook and that the CSS properties are the same as your original example and the style information generated by the (text-style:) macro. You can test the above CSS using the following markup with a Passage.

The quick brown fox jumped over the lazy dog.

|rainbow>[The quick brown fox jumped over the lazy dog.]

|rumble>[The quick brown fox jumped over the lazy dog.]

|rumble>[|rainbow>[The quick brown fox jumped over the lazy dog.]]

... you will notice that all of the text fades-in during passage transition unlike the example above that includes HTML elements.

The order of the rumble and rainbow named hooks are important when trying to apply both effects to the same section of text, this is why I would suggest creating a combined CSS selector like the following:

tw-hook[name="rumblingrainbow"] {
	animation: rumble 0.1s linear 0s infinite;
	display: inline-block;
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

... which you can use like so:

|rumbling-rainbow>[The quick brown fox jumped over the lazy dog.]

... you may notice that the name of the above named hook (rumbling-rainbow) includes a dash where as the related CSS doesn't, this is because Harlowe automatic removes most punctuation from hook names and also converts the names to all lower case. I include the dash in the markup example because I think it makes it easier to read but you can remove the dash if you want.

by (200 points)
edited by
I have tried your combined CSS selector solution, it works well with plain text and is much more convenient to use, thank you!

Any link included in the hook is still displayed in blue though. Is there a way to display links in the rainbow colors when and only when within the |rumbling-rainbow> hook?

Edit: With a named hook using it more than once in the same passage seems not to work, as nothing gets displayed.
by (159k points)

With a named hook using it more than once in the same passage seems not to work, as nothing gets displayed.

I tested the following example and each of the styled lines appeared correctly.

|rainbow>[The quick brown fox jumped over the lazy dog.]

|rainbow>[The quick brown fox jumped over the lazy dog.]

|rumble>[The quick brown fox jumped over the lazy dog.]

|rumble>[The quick brown fox jumped over the lazy dog.]

|rumbling-rainbow>[The quick brown fox jumped over the lazy dog.]

|rumbling-rainbow>[The quick brown fox jumped over the lazy dog.]

... without an example of your actual code I can't comment on why it may not of worked for you.

 

Is there a way to display links in the rainbow colours...

If you Inspect the HTML generated by the following markup:

|rainbow-link>[[[This link text should be styled->Other]]]

... you will see that looks something like the following:

<tw-hook name="rainbowlink" class="" style="display: inline-block;">
	<tw-expression type="macro" name="link-goto">
		<tw-link tabindex="0" passage-name="Other" data-raw="">This link text shoud be styled</tw-link>
	</tw-expression>
</tw-hook>

... and you can then create a CSS selector based on the above structure which will target the text of a tw-link element within a named hook. It would look something like the following:

tw-hook[name="rainbowlink"] tw-link {
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

 

display links in the rainbow colours when and only when within the |rumbling-rainbow> hook

The rainbow effect related CSS uses the background-image property to setup the coloured gradient and the color property make the gradient effect the text, unfortunately I was not able to workout how to make that effect be automatically inherited by the child HTML elements contained within that named hook. This is why I needed to copy the rainbow's CSS properties into the the above rainbowlink CSS selector, a more experienced CSS writer may know of a better solution.

The rumble effect will effect child HTML elements so you could either: 1. combine it with above rainbowlink effect like so:

|rumble>[|rainbow-link>[[[This link text should be styled->Other]]]]

 ... or 2. extend the existing rumblingrainbow CSS effect to also include tw-link elements like so:

tw-hook[name="rumblingrainbow"] tw-link {
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

... so that it can now handle Passage markup like the following:

|rumbling-rainbow>[\
The quick brown fox jumped over the lazy dog.
[[This link text should be styled->Other]]\
]

 

by (200 points)
Thank you very much, it all works exactly as I imagined now! :)
...