I saw this super cool graphic in a Death to the Stock Photo email a while back, and thought to myself, “could that be made using CSS?”
And it turns out, of course it can! I have to admit, I stuck with fonts that already existed on my site, so the one I made (see below) uses a much wider font than DTSPs. And the background image I found off of Google images, so forgive the shady quality.
This was pretty simple to recreate, but I’m blown away by the capabilities of CSS. I’ve included the code I used to create the image – ask any questions in the comments!
** Please note that the font size for my re-created image does not re-size based on the screen. So on a phone, for example, the font size would stay the same. It would require media queries to make the font re-size based on the screen size. I go a bit into media queries in this blog post.
Re-created with CSS:
* This is what will go in your site’s style.css file.
text-shadow: 6px 5px rgba(255, 84, 175, .75);
* This is what will go in your Text editor. So in WordPress, when you’re adding text to a blog post, you’d click on the Text tab (which is right next to the Visual tab) and add the <div> tags.