Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
Sometimes called a “half highlight”, this tutorial will show you how to create text that has a solid color behind only the lower half of it. To create this effect in Squarespace, I actually use a linear gradient background!
This tutorial will show you how to create that gradient for your H1 text, and how to apply it to active links. If you want to use it next to other text without creating a link, check out this older tutorial: https://youtu.be/DSFgKaZF7Z0
Here is the main code from the tutorial:
h1 *{background: linear-gradient(to bottom, #fff 50%, #50bdb8 50%, #50bdb8 90%, #FFF 90%)}
h1:hover *{background: linear-gradient(to bottom, #fff 30%, #50bdb8 30%, #50bdb8 80%, #FFF 80%)}
Want to apply this code to a single block of text? Grab the block ID with this Chrome extension.
I am not affiliated with this extension or the people who created it, but I do use it in my own work:
https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
Want to apply this text style on a single page in your Squarespace site? Check out this blog post to learn how:
https://insidethesquare.co/singlepage
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
