Put dark blur or outline behind hero text?

Beginners
1
  1. Anyway to put a small dark blur behind BBQ SMOKES?
  2. Anyway do a black outline around BBQ SMOKES?
  3. How to get PG to see VSC changes when they are connected? Now I have to close PG then reopen. Hitting refresh doesn’t work.
   <section class="hero" id="hero">
            <div class="container">
                <div class="global-headline">
                    <h2 class="sub-headline">BBQ</h2>
                    <h1 class="headline">Smokes</h1>
                </div>

.sub-headline {
    font-size: 10.5rem;
    font-family: var(--secondary-font);
    color: gold;
    font-weight: 100;
    line-height: .4;
    letter-spacing: 2px;

.headline {
    color: #fff;
    font-size: 4.7rem;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .5rem;
    margin-right: -.5rem;
}

Screen Shot 2022-02-20 at 6.13.53 AM

2

Hi @kat,
When you open your project in VSC, does it pop-up a message that it is connected to Pinegrow?
Cheers,
Bob

3

Yes I get the VSC pop-up when connected or disconnected to PG.

4

Hmmm… not sure what to think. If they are connected, you shouldn’t need a refresh. I just checked out a project of my own and changes in either are updated. Anything else running that might be blocking the port?

5

I’ve learned out of work around PG quirks. Just thought I might have missed something. Thanks

6

/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);

/* Add the outline effect */
-webkit-text-stroke: 1px black;

Pieter (Golive) :wink:

2 Likes
7

This really helps, Pieter, my Golive buddy.

You’re the one who referred me to Pinegrow :slight_smile:

Outline and shadow work. Unfortunately blur effect blurs the text.
Screen Shot 2022-02-22 at 2.40.35 PM image is your 1 px outline with text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
How do I get a shadow all the way around the text?

8

@kat use backdrop-filter: blur(5px)

1 Like
9

You can combine multiple text shadows in PG like this:
h1 {
text-shadow: 1px 1px 5px black , -1px -1px 5px black;
}

1 Like
10

text-shadow: 1px 1px 5px black , -1px -1px 5px black;
Lovely @Piro !!!
Not sure why but I couldn’t make the backdrop-filter work. More reading required; thanks @fakesamgregory