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
9 Replies
Yes. Considering the infinity of time and space, anything is possible. Suffice to throw enough time, skill and money on it.
Sure. Consider using grid.
But how do you align the pink text in the space determined by the size of the blue text?
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.
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
Sorry my thumbs up are not working how I planned it. Thanks for the answers.
I think position absolute on 'midnight' and position relative on 'blue' is the easiest way and would be responsive
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
svg. done.