Jump to content

Marquee Text Stroke

Recommended Posts

Posted (edited)

Hello!

I've placed scrolling text on my site, which I've edited with custom CSS.

I have the base text looking how I want it, but when I hover I want the text to change color, stroke, and shadow color. I can accomplish everything but the stroke. 

My first attempt used the following, which changed the color and shadow, but made no effect on the stroke. (See m1.png attached)
m1.png


.Marquee:hover * {
  text-shadow: 3px 3px #e7756b;
  color: #FFFFFF !important;
  -webkit-text-stroke-width: 3px !important;
  -webkit-text-stroke-color: black !important;

}

Next I tried using stroke-width, as opposed to the webkit stroke, but that caused everything within the marquee element to have a stroke, including the hitbox. (See m2.png)

m2.png

 

.Marquee:hover * {
  text-shadow: 5px 5px #e7756b;
  color: #FFFFFF !important;
    stroke-width: 3;
  stroke: #000000;

}

I've now come upon a solution that applies the stroke to just the text, but now the drop shadow has a stroke too, which appears on top of the text. (See m3.png)

m3.png

 

.Marquee:hover * {
  text-shadow: 5px 5px #e7756b;
  color: #FFFFFF !important;
}

.Marquee:hover h1 {
   stroke-width: 3;
  stroke: #000000;
}


Any thoughts on a solution? I feel like I'm getting close, but I could be wrong.

I'm grateful for any help! I can share the web address and password if needed.

 

Edited by SamKennedyCS
Moved images
  • Replies 4
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...

Create an account or sign in to comment

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


×
×
  • 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.