You can create your text portrait using CSS in 5 simple steps. Let's see how
🧵👇🏻
Step 1: Setting up the HTML
Create a document with a lot of lorem ipsum text so that your webpage is covered entirely by the text
Step2: Set dark background-color
A dark background will make your portrait more appealing
Step3: Set the background image
This step is divide into 3 further steps
- Set background image
- Add background no-repeat for just one image
- Position your image in the center
Step4: Clip text
As you can see in the above step our text has disappeared. We need to clip our text so that background is painted with the foreground text.
p {
-webkit-background-clip: text;
}
Step5: Final touch
Reduce the line spacing a little bit and that's all 😀
Check out the full source code here
codepen.io/prathkum/pen/x…?
End of this thread. If you like it, give it a retweet it means a lot to me 💖
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.