Inline Text Effects with GIFs and Images

AnimationsCollection PagesPseudo Elements

Nov 12

I’m putting this to bed right now: GIF is pronounced with a hard G. I say this because it’s an acronym for Graphic Interchange Format, so it’s more of a Gift than it is done in a Jiffy. This is a judgment-free zone, so say it however you want to say it.

In this post, we’re leaning into the written word and applying some fancy visuals that respond across screen sizes and common devices.

This type of feature is cool, and simple, and can be used to express many different design aesthetics. However, it does require a pretty firm grasp of basic CSS position techniques, so can be frustrating to implement if you’re guessing.

I’m not saying you can’t do it, but a dev can def do it.

This example is pulled from a website I built for a designer who specializes in creating editorial designs that rely on subtlety and precision. You can check it out here.

I love the way GIFs are used between words to add texture, and tone to communicate the strong visual signature of the studio - all in the hero section statement.

This is one of those features where you should let your design brain go wild, then book an Office Hour to build it out.

This post is part of a Feature Spotlight collection. It’s here to give you, dear web designer, a deeper look into what’s possible when teaming up with a Squarespace developer (like me!). Be sure to sign up for the newsletter to get the latest dev insights & book a DEV SESSION for your next project.

Inline Text Effects with GIFs and Images

Websites are a playground where written word and visual graphics can come together in really interesting ways. Inline text effects bring a highly customizable and responsive method to elevate any text section on your Squarespace site.

This feature was introduced to me by a designer who creates clean and cool websites that are subtle in their execution of some pretty fancy shit.

Text Effects

When it comes to building websites that do their job in the algorithm world, you never want to stray too far from keywords, messaging, and really good copy.

Visual elements like images and GIFs can wow a crowd, but without those words, good luck getting discovered via any search engine or chatbot out there.

This inline text effect lets you say what you need to say while adding images, GIFs, and videos right inline with text.

Overlapping in Squarespace

With the introduction of Fluid Engine to Squarespace, we were given the gift of dragging and dropping elements right on top of one another.

This comes in handy, but it isn’t the right way to achieve a fully responsive and elevated effect like this inline text effect feature.

First, just because two or more elements overlap using the Fluid Editor, doesn’t mean that those elements are attached. You’ll find them ebbing and flowing independently, creating a responsive nightmare if you want any sort of consistency across screen sizes and devices.

Pseudo Elements to the Rescue

If you hang around me for longer than 15 minutes, you’re probs going to hear talk of pseudo-elements. This type of element is added to a website using only CSS. And, I love them with my whole heart.

Because you’re not going into the bones (HTML) of the website to do this addition, a pseudo-element is added by attaching a new element onto one that is built in.

I’m not going to take us much further down this road, but just know that the stuff you think is cool is most likely due to a well-executed pseudo-element.

GIFs, Images, and Graphics (oh my!)

As you can see in the feature spotlight, GIFs are a welcome player in this effect.

GIFs are made separately of implementation, and then added to the site and customized using CSS. Therefore, you have lots of control over what the GIF actually does.

In the example, a GIF showcases a rotation of words in a custom font used throughout the site. While these words don’t play the SEO game very well, they are so cool and fun that they more than make up for it in the above-the-fold hero section.

Note that these visual elements do not have to fall between words, and can be utilized to create other effects. Remember: if you can dream it up, designer, we can figure out how to build it.

The Responsive Conversation

This effect is very responsive, though it typically takes some tinkering at different breakpoints to achieve similar effects across common device sizes. This is a good example of a designer/developer conversation. Designers must know and communicate how they see this effect moving across major screen sizes.

Likewise, developers must know how to implement smooth transitions to achieve seamless responsiveness across devices.

If you haven’t already - forget about websites being static unmoving things. Lean into responsiveness and rely on a developer to bring your designs to life - no matter what device someone is using to look at them.

This effect is simple, cool, and highly customizable. It can be used in hero sections and about pages alike. It will take some tinkering, so if you don’t want to get sucked into the black hole of the CSS window, book an Office Hour with me to implement this Inline Text Effect with GIFs and Images.

Book an Office Hour