Help! CSS for Highlighting Text

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).  

It has super-perfect css which resizes perfectly.

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 :)

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.

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

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.

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!

What are best practices for making this text background partially transparent?

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!

 

 

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;
}

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

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

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;