Jump to content

Help! CSS for Highlighting Text

Recommended Posts

Hey guys, I love how genius your forum is.  I'm a self-taught programmer and I'm getting my ass kicked on highlighted text.  It seems like its ubiquitous on the web to have this colorfut text blocks but the css is driving me nuts.  

I wanted to make my website look like this uber-cool one from tamsen webster: https://tamsenwebster.com/ (totally whispered that idea).  

629552414_ScreenShot2019-10-25at12_25_42PM.thumb.png.e243b1377c4853803701dd91865f6007.png

It has super-perfect css which resizes perfectly.

218053060_ScreenShot2019-10-25at12_27_40PM.thumb.png.ab002d0f883c1b79a55a50700dc7356e.png


But all I got was this hacked version which you can see live in all its dorky glory at deliveringcures4cancer.org (btw nonprofit client is kickass, I'm the dork :)

373239829_ScreenShot2019-10-25at12_27_06PM.thumb.png.63f80ef79ad6210bf8bf84f04ca44380.png

using two separate code blocks on the main page: 

     <H2 style="background: #ff69b4; padding-left: 0.5em; box-shadow: 0 0 10px 10px #fff"> We fast-track</H2>

     <H2 style="background: #ff69b4; padding-left: 0.5em; box-shadow: 0 0 10px 10px #fff"> cures for cancer.</H2>

And it resizes really weird because they are two different text blocks. If I put them together then I can't get a gap to show between the lines of text.

2114992367_ScreenShot2019-10-25at12_27_33PM.thumb.png.cbeeb088241aacd144d4a527629b2684.png

 

Please whisper some ideas to me is there a way to do this with custom css code and H2 text that I'm missing??? 
 

Thanks,

Drea

 

Link to comment
  • Replies 7
  • Views 5k
  • Created
  • Last Reply

Hi Drea,

This is the code they are using to achieve that affect:

.redtitle {
position: relative;
line-height: 1;
color: #fff;
display: inline;
white-space: pre-wrap;
border: 0 solid #ff0000;
border-width: 0.10em 0;
}

.redtitle:after {
background-color: #ff0000;
}

Their heading uses the class redtitle, which is what they are targeting. You could replace yours with your own class or target all H2's.

Link to comment
  • 6 months later...

Hey, Drea.

Here's how you can do this. The "display: inline;" is the key here.

h2 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #0096ff 50%);
  display: inline;
}

If you want to have the text centered, you'll need to add a "text-align: center" to the parent element.

.sqs-block-content {
  text-align: center;
}

This is an example from a client site I'm working on and I'm doing a low-light effect. For the highlight look, just remove the gradient and make the background a solid color.

Hope this helps!

 

 

low-light effect.png

Looking for help with a project?
💻 www.connectionmadedesign.com
 for hire on Upwork (Top Rated Plus)

Link to comment
  • 4 weeks later...
On 5/21/2020 at 1:45 AM, AndyB said:

Hey, Drea.

Here's how you can do this. The "display: inline;" is the key here.


h2 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #0096ff 50%);
  display: inline;
}

If you want to have the text centered, you'll need to add a "text-align: center" to the parent element.


.sqs-block-content {
  text-align: center;
}

This is an example from a client site I'm working on and I'm doing a low-light effect. For the highlight look, just remove the gradient and make the background a solid color.

Hope this helps!

 

 

low-light effect.png

Hey Andy, this was helpful for me but I found all of my text became centered. Any ideas how to target just one tag (h1)? I've tried this without any luck

.sqs-block-content h1 {
  text-align: center;
}

 

Link to comment
5 hours ago, chetem said:

Hey Andy, this was helpful for me but I found all of my text became centered. Any ideas how to target just one tag (h1)? I've tried this without any luck


.sqs-block-content h1 {
  text-align: center;
}

 

#BLOCK-ID h1 {
  text-align: center;
}

Find Block ID with this tool https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, chetem said:

Thanks tuanphan. Can you explain why using the block id works but not what I tried?

Perhaps the priority of your code is lower than the default priority.

You can also try: text-align: center !important;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.