The images files tend to be quite large, especially at higher resolutions, bogging down the site’s loading speed on slower connections.Because it’s a static image, the text itself can’t be indexed by Google - a big SEO problem, particularly for the homepage headlines I often created this way - nor can it be copied/pasted.If I ever decided to update the text itself, I’d have to create an entirely new graphic in Photoshop.It only took a few minutes, and the results were beautiful.īut it wasn’t a web-friendly result, for several reasons: I’d mask text over a background image and export the graphic to slap into my website. How I used to create knockout text: in Photoshopīefore I discovered the process of using Webflow to make knockout text, I used to make it by hand in Photoshop. In this article, we’ll show you how to use CSS background-clip in Webflow.īut first, we’ll take a quick look at why you should use real HTML text and the background-clip property instead of a custom graphic - as well as some of the reasons you might not be able to use this effect on production projects. The most straightforward way to create knockout text is with the background-clip property. Update: You can now natively fill text with gradients, images, and overlays with background clipping! Check it out here.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |