Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
todreamalife

Help! CSS for Highlighting Text

Question

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

 

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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;
}

 

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...