By the way, I found this for making the background image animate <https://codepen.io/CameronFitzwilliam/full/pamobO/>. If you want the gold to "shine" that might be a solution. My experience with "gold color" is that it typically appears too static, missing out on the very goldy appearance one wants. Especially so for smaller areas.
To make an image appropriate for infinite spinning, the linked solution has used this image <https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/clouds.jpg>, i.e a mirrored image. Clever. <:-) On Tuesday, November 9, 2021 at 9:50:09 AM UTC+1 Mat wrote: > I didn't look at Charlies solution but I don't get any problem putting the > styleblock I proposed in a dedicated stylesheet tiddler, and then applying > e.g like so: > > asdf @@.jack > !GOLD > @@asdf > > ! This Heading > > <:-) > > On Tuesday, November 9, 2021 at 3:13:49 AM UTC+1 taale...@gmail.com wrote: > >> Thanks Mat and Charlie! >> >> So, it looks like I CAN create the class, but have to call it in a >> span/div to apply it. >> >> Which is better than I was expecting, because It was looking like I'd >> have to copy/paste the css into every relevant bit. >> >> Thanks a ton!! >> >> >> >> >> >> On Mon, Nov 8, 2021 at 7:01 PM Charlie Veniot <cj.v...@gmail.com> wrote: >> >>> Is this what you are looking for? >>> >>> Download attached json and drag it into tiddlywiki.com to try/analyze. >>> >>> >>> >>> On Monday, November 8, 2021 at 9:34:47 PM UTC-4 taale...@gmail.com >>> wrote: >>> >>>> Well, that works for me too Mat - as long as I use inline HTML/CSS like >>>> you did above. >>>> >>>> But if I use the TW class caller (I can't think of the word) like this, >>>> no bueno, empty tiddler: >>>> >>>> @@.jack >>>> !!JACK >>>> @@ >>>> >>>> Which I suppose answers my question. Everything has to be styled in >>>> line, classes won't work here. >>>> >>>> >>>> On Mon, Nov 8, 2021 at 6:09 PM Mat <matia...@gmail.com> wrote: >>>> >>>>> This works on tiddlywiki.com >>>>> >>>>> >>>>> <style> >>>>> .jack { >>>>> font-size: 72px; >>>>> background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" >>>>> $output="text/plain"/>); >>>>> -webkit-background-clip: text; >>>>> -webkit-text-fill-color: transparent; >>>>> } >>>>> </style> >>>>> >>>>> <div class="jack"> >>>>> >>>>> !GOLD >>>>> </div> >>>>> >>>>> <:-) >>>>> >>>>> >>>>> On Monday, November 8, 2021 at 8:52:06 PM UTC+1 taale...@gmail.com >>>>> wrote: >>>>> >>>>>> I'm trying to make a class that will allow me to fill text with an >>>>>> image. For example, making a drop cap for a manuscript-inspired theme >>>>>> that >>>>>> looks like it's been gilded, by using an image of gold leaf. >>>>>> >>>>>> The interwebz tell me that I want to use background-clip, but I'm not >>>>>> sure how to set that up in a CSS class. Does anyone have any pointers? >>>>>> >>>>>> All I have so far, which doesn't work (and I didn't think it would): >>>>>> >>>>>> .dropcap { font-size: 40px; >>>>>> margin: 10pc; >>>>>> border: 5px double black; >>>>>> float: left; background-image: url(<$macrocall $name="datauri" >>>>>> title="paua.jpg" $output="text/plain"/>) background-clip: text; } >>>>>> >>>>>> Thanks, >>>>>> Aidan >>>>>> >>>>> -- >>>>> >>>> You received this message because you are subscribed to the Google >>>>> Groups "TiddlyWiki" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to tiddlywiki+...@googlegroups.com. >>>>> >>>> To view this discussion on the web visit >>>>> https://groups.google.com/d/msgid/tiddlywiki/a176c54b-b9b3-4bfe-ac7f-b0891028dc6cn%40googlegroups.com >>>>> >>>>> <https://groups.google.com/d/msgid/tiddlywiki/a176c54b-b9b3-4bfe-ac7f-b0891028dc6cn%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> >>>> -- >>> You received this message because you are subscribed to the Google >>> Groups "TiddlyWiki" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to tiddlywiki+...@googlegroups.com. >>> >> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/tiddlywiki/81370c4d-903e-4c54-9605-135f92e51828n%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/tiddlywiki/81370c4d-903e-4c54-9605-135f92e51828n%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7a198832-48f8-430a-a9b2-067355384e44n%40googlegroups.com.
