The focus of this project is about creating layout using CSS, in particular CSS grid. I was unable to render the heading - Modern Art Gallery in 2 different colours. Any feedback/help in this would be much appreciated.
Richard Aiello
@richieAielloAll comments
- @francisldnSubmitted over 2 years ago@richieAielloPosted over 2 years ago
Hey friend! I have a pretty useful article here about the clipped heading that helped me out when I was building this one.
Basically you can use something like -
background: linear-gradient(to right, #FFF 350px, #000 350px);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
As long as you use the same end point for color 1 as color 2's starting point, the color will abruptly change from one to the other. With background-clip you can get this really cool effect on the heading. Play around with it and pick the correct start and end points for your project, I hope this helped!
W3Docs - How to Apply CSS Styles to Only the Half of a Word or Character?
1