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

Recommended Posts

Hi there,

I'm looking to add a range of custom brushstrokes to highlight different sections of text. Is there a way I can add these into a text block and move it to where I'd like it using css? Or would I have to place them in another way?

I've attached an example of what I'm looking for. Any help would be amazing and really appreciated! Thanks!

Screenshot 2020-02-05 at 12.34.56 pm.png

Link to post
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Posts

Hi Cassie, what a brilliant idea. I love the graphics, colors and text, your mockup looks wonderful. Rather than provide a long answer, I skimmed through this article on A List Apart and it looks

Here is a code pen that use the <strong> tag as a trigger to place an stroked underline that looks like a brush stroke. So instead of a class it affects the text where the <strong> tag liv

Posted Images

3 hours ago, CassieMagpie said:

I'm looking to add a range of custom brushstrokes to highlight different sections of text. Is there a way I can add these into a text block and move it to where I'd like it using css?

Hi Cassie, what a brilliant idea. I love the graphics, colors and text, your mockup looks wonderful.

Rather than provide a long answer, I skimmed through this article on A List Apart and it looks promising indeed. It involves using some stying, perhaps, underlines, italic and bold to target words in a paragraph, stripping that style from being displayed and then respond to the areas of the text that are styled (but not visibly so) with your graphics.

Here is another resource on Andy Hooke's page.

After reading part of this thirty-eight visuals article I imagine that you could take some of Andy's approach and create three or four classes, one for each PNG and add 4 of these, one per stroke type to the global CSS.

 

First you need to upload the images, PNG or otherwise to your site, find their respective URLs and then …

In a code block you might add something like

<h1><span class="purple_underline">kids</span>express their emotions.</h1>

and for the classes to trigger the image load you could add this CSS to the same code block or insert the CSS in Design>Custom CSS if you intend to use it in several places across the site.

.blue_underline {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

.circle {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

.purple_underline {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}

I think this will get you going. I've never done this before nor have I tested it but I believe that conceptually I am not far off. If you are truly stuck I can test it out.

Link to post

Here is a code pen that use the <strong> tag as a trigger to place an stroked underline that looks like a brush stroke. So instead of a class it affects the text where the <strong> tag lives in the html.

The only thing I don't like is that the SVG gets masked (cut off). A solution to stretch it might be more desirable if it doesn't stretch it too far. For long underlines or strokes you may want to rely on a secondary image. This is why I prefer creating a class but it's yet one more method.

image.thumb.png.af1d1a4eb12dab9363e41ae6f77e475b.png

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