Setting a gradient as a text fill requires a similar process.Īs I mentioned earlier, it is possible to wrap text along an SVG path but I think it would be hard to accommodate for text of arbitrary length (e.g. And even so, it's only supported in WebKit. It's also more difficult than you'd imagine to set an image as the fill for text. I tried to approximate it using varying font sizes and it did not turn out too great.
It would also probably be difficult to implement in a robust way in CSS (and it's probably not a terribly useful or requested feature). There may be legitimate accessibility reasons for this, as it can make text much less legible. You can have the text follow the path of an SVG, but you can't distort the shape of the text as in the third example on the first image. One of the first things I found is that CSS doesn't have a great way to "warp" text. Several sites exist to generate modern WordArt on the web, but I noticed that these didn't seem to have all the options of the original WordArt function, and so I took this as an opportunity to get a bit better at CSS and try to implement them myself.Īs it turns out, this is easier said than done, and it is with good reason that those online WordArt generators lacked some of the classics. It has been toned down in more recent versions of Word, but I wanted to go for the nostalgia factor and recreate the classics. WordArt was a staple of my early-00s Word experience, and to my middle & high school brain was just the thing to make any piece of printed material look ✨polished✨. A few weeks ago, after being thoroughly inspired by the wonder that is pure CSS Gritty, I got the idea to attempt to recreate WordArt from old school Microsoft Word in pure CSS.
0 kommentar(er)
