[tw5] Class to use an image with background-clip

Google Group (Read Only)
#1

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

#2

G’day Aidan,

What text? Where is the text? Do you mean all of the content showing in a tiddler?

Or just the text in a specific area in a tiddler?

#3

Yeah, it was text that I would apply the class to. I’ve since realized that there will at least have to be several different classes depending on where it is i.e. styling the titles will be different than styling buttons or in a tiddler, etc. since the backgrounds and such will need to be in different dom locations.

I want to gild titles, the editor buttons (of all the varieties), drop caps, bits and bobs on sidebars, and on demand for specific words or icons in the tiddler on demand, so to speak.

I’m also planning to use the same technique for a different theme, based on a Tlingit soulcatcher, which is usually a carved and styled bone with inlays of mother of pearl (hence the paua.jpg).

#4

This works on tiddlywiki.com

.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; }

!GOLD

<:-)

#5

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.

#6

Is this what you are looking for?

Download attached json and drag it into tiddlywiki.com to try/analyze.

GoldLeafTester.json (452 KB)

#7

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!!

#8

Good stuff !

There are so many ways of applying a particular style to a specific bit of text.

Myself, considering the example I gave in the attachment …

I’d probably prefer do this: {{ Whatever Text || tGoldLeaf }}, or the shorter version {{ Whatever Text || tGL }}.

Try the attached.

GoldLeafTester.json (453 KB)

#9

Thanks! I don’t think the transclusion is gonna work, given what I wanna do, but it’s a possibility.

By the way

JACK
!! This Heading

EVERYTHING is gilded, including the “This Heading” - any thoughts on why?

#10

Yeah, sneak a peek at the CSS file included in the attached.

You’ll see that I added a little something there to make H2 adopt the CSS style, just to show folk the ability to set all instances of a particular element with a custom style.

#11

Oh, durr. I did see that. Sorry.

#12

BTW, the neat thing about a transclusion is that there doesn’t have to be an existing tiddler related to the transclusion.

The template tiddler just assumes that there exists a related tiddler and trucks along.

#13

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

<:-)

#14

By the way, I found this for making the background image animate. 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, i.e a mirrored image. Clever.

<:-)

1 Like