Is it possible to style a header like the album cover for Midnight Blue?

Well it's not an important issue, just wondering and having a go myself, but far from accomplishing it. It should be responsive on both device and font-size
Midnight blue cover
9 Replies
majkl
majklβ€’9mo ago
Yes. Considering the infinity of time and space, anything is possible. Suffice to throw enough time, skill and money on it.
missymae
missymaeβ€’9mo ago
Sure. Consider using grid.
majkl
majklβ€’9mo ago
But how do you align the pink text in the space determined by the size of the blue text?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
If "blue" is actually an image of text instead of regular text, it is possible to use shape-outside with shape-image-threshold to get content to flow around its empty part.
Jochem
Jochemβ€’9mo ago
this level of typography isn't practical in CSS. You have no access to the contents of a text node, it just reads the box model and that includes ascenders and descenders (the sticks on b and p) can you make this specific thing with CSS? Sure. Grid with overlapping spans, snapped to different places. Position absolute on "midnight". Can you make it responsive? I don't even know what that looks like beyond having the font-size change, but sure, though the alignment of the left side of the U and the left side of the M might be a bit finicky. And finicky describes the entire experience too, browsers aren't pixel perfect consistend in their font handling. this is just one of those cases where you're much better off using an image
Super-Gylden
Super-Gyldenβ€’9mo ago
Sorry my thumbs up are not working how I planned it. Thanks for the answers.
ghostmonkey
ghostmonkeyβ€’9mo ago
I think position absolute on 'midnight' and position relative on 'blue' is the easiest way and would be responsive
Super-Gylden
Super-Gyldenβ€’9mo ago
I tried both grid and then ::before with absolute positioning. To make it a bit harder it was also with longer words, so the "midnight" portion had to be placed between two letters. I was also thinking perhaps with some smart calculations it could work, but I'm not smart enough to figure that out. Perhaps the future anchor positioning will work. We will see
MarkBoots
MarkBootsβ€’9mo ago
svg. done.
Want results from more Discord servers?
Add your server