Hope you all are doing well, I’ve been working on a website for quite a while now and simlpy cant finish the hero section. The problem is that i want to have gradient color text thats opposite of hero background. I was able to make text color gradient, but there is a lot of alignment issues. I set the text block to use 100% vh and 100% vw and have absolute position and set its background same as the hero. Now there are problems with alignment. I need to have 3 of those text blocks. Also obviously text gradeint needs to be oppposite as hero background on all resolutions.
This is actually really cool. I had never thought to do this purely with CSS before and it’s totally possible!
You can actually do this (at least) two different ways. One would be to just add more lines of text, make them text-align:justify; and use &NBSP; (Shift+Space for non-breaking Spaces) to shift each line to where you want (since I don’t think Webflow supports <pre> or you could do that in an HTML embed… but I think <pre> is not best practice anymore?)
Anyway, here is the result I got, with BOTH ways… Either all the text in a Justified H1 OR having multiple Justified H1s… For SEO (if you care, some people don’t) you shouldn’t have more than one H1, but also Google is smart enough to notice that if all 3 H1s are adjacent and above the fold, they should be treated as one.
