How to fill one word with a flashing GIF?

Site URL: https://lychee-magnolia-et83.squarespace.com/

Hi there, on my landing page I would like to fill the "*" with a flashing colourful gif. I know how to create gifs and upload them to use a URL in Squarespace. How do I address the "*" only and is it even possible? I saw that Ghost Plugins has a code for addressing a whole font style: https://www.ghostplugins.com/steps/92g7jen6. 

Below is a screenshot. The password to my website is creative1234.

Thank you.

20 hours ago, nowicluk said:

Site URL: https://lychee-magnolia-et83.squarespace.com/

Hi there, on my landing page I would like to fill the "*" with a flashing colourful gif. I know how to create gifs and upload them to use a URL in Squarespace. How do I address the "*" only and is it even possible? I saw that Ghost Plugins has a code for addressing a whole font style: https://www.ghostplugins.com/steps/92g7jen6. 

Below is a screenshot. The password to my website is creative1234.

Thank you.

 

If you can make * italic or under line, then it will have a different code, then we can use CSS to target it to add gif

Hey @nowicluk! This is definitely possible. 

Try bolding the * and then targeting only that character with bold-targeted CSS.

Something like this should help as it will only target the character that's bold – this being the *. Be sure to update h1 if that is not the header size you are using in your example.

Targeting the text block's block-id before the CSS will also help in case you bold other headers throughout the site and don't want those affected.

// GIF Text //

h1 strong {
  background: url(GIF-URL-HERE.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

Hope this helps! 👻

@tuanphan @ghostplugins Thank you. I tried it. But it doesn't work. See below.

h1 strong {
  background: url(www.dropbox.com/s/0fxpqva9linmm7w/tcl_colours.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

The website is live: www.thecreativelab.bz

Hey @nowicluk!

It is best to host the GIF file yourself on your Squarespace website via Custom CSS > Manage Files. Once you upload to the file to CSS Files, click the file and a URL will generate in the CSS panel.

Take this file URL and paste it into your code (replace the DropBox link). That should do the trick! 👍

Looking at your site and the gif involved there's a couple of issues here. 

• I don't think dropbox let you link directly to files any more and use them as a proxy web server. You'd be much better off loading the image up to squarespace and then using that image as @ghostplugins says.
• However, I think looking at the gif you're using, this won't get you what you want anyway. I think you mean for the asterisk itself to cycle through the colours. the code that you're trying to put in will fill the background. so you'll get a square gif flashing away but no asterisk (the asterisk gets made transparent by the css you've used). 

🙂

EDIT! I didn't see the background-clip in the CSS, so if you just do what @ghostplugins said (which is my first point about dropbox not hosting files) it would work. however, the css animations below would work too because your GIF is just block colours. my bad!

However, support for text background-clip can be a bit patchy (background-clip - CSS: Cascading Style Sheets | MDN (mozilla.org)), so leaving this here as a css animation alternative.

🙂

to get this effect you've got a number of options (use javascript, create a flashing asterisk gif etc), but I think the best is to use a css animation. doesn't require premium. Just replace the css you've been using with something like this

@keyframes flashy-asterisk {
    0% { color:red; }
    32% { color:red; }
    33% { color: blue; }
    66% { color: blue; }
    67% { color: green; }
    100% { color: green; }
}

h1 strong {
    animation: flashy-asterisk 2s linear infinite;
}

• the colours have been laid out like this to get it flashing like the gif, but if you removed the extra repeated stops (32% and 66%) then it would ease between the colours.
• the animation commands cycles between them infinitely over 2s. It starts and 0% and goes to 100% and then starts again at 0%

looks like this

Here's the css animations reference if you want to try different effects

CSS Animations (w3schools.com)

@ghostplugins @iamdavehart you guys are awesome! Thank you so much!