ShowCode Studio
Outline Text
Outline Text
Couldn't load pickup availability
- Designed specifically for Showit
- Digital Download
Some website sections make you stop and stare for a second because your brain is trying to figure out what you're looking at.
That's exactly what this one does.
As images move through the section, they pass between a solid text layer and an outlined text layer, creating the illusion that the typography is changing as the photos move across it.
The effect feels layered, artistic, and a little unexpected. The kind of detail that makes a website feel custom without screaming for attention.
No complicated setup. Just a clever combination of Showit canvases, layering, sticky positioning, and a little CSS.
CUSTOMIZE
• Font / Text
• Color and Stroke color
• Desktop stroke size
• Mobile stroke size
• Images
• Background colors
WHAT'S INCLUDED
A step-by-step PDF guide walks you through the setup from start to finish.
You'll receive the CSS needed for the outline effect along with instructions for how the layered canvas works inside Showit.
Desktop and mobile stroke sizing are controlled separately so you can fine tune the look on both screen sizes.
A QUICK NOTE ABOUT FONTS
Not every font loves being outlined.
Some fonts look incredible with a stroke applied. Others may have outlines that appear within the letter. Not recommended for script fonts either.
THE FINE PRINT
• Digital product only
• Requires a Showit website
• Images shown in the demo are not included
• Due to the nature of digital products, all sales are final
Installation
Installation
You’ll get a clear, step-by-step PDF so you can add this into your Showit site without going down a rabbit hole.
All code is designed specifically for Showit and tested across screen sizes so it actually works the way it should.
And if something feels off, you’re not on your own — I’m here to help during the support window.
Support
Support
Includes support for installation and basic setup questions.
If something isn’t working the way it should, I’ll help you get it sorted.
More advanced customizations or design tweaks aren’t included, but I’m always happy to point you in the right direction.
Licensing
Licensing
Single-use license for one Showit website.
If you’re using this across multiple client sites, a license is required for each.
Credit & Usage
Credit & Usage
Credit is required when this code is used on a live site.
This can be as simple as tagging @showcodestudio on social or including a visible or linked credit where appropriate.
Share
