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):
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).
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.
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:
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.
