CassieMagpie Posted February 5, 2020 Share Posted February 5, 2020 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! Link to comment
tuanphan Posted February 5, 2020 Share Posted February 5, 2020 You can use Code Block + CSS or Text Block + CSS CSS background Image, I guess so. Can you provide 3 brushstrokes url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
CassieMagpie Posted February 5, 2020 Author Share Posted February 5, 2020 Thank you and sure! They're very small files for the moment, we'll upload better ones later. https://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3ac9edf6fde46a48465f78/1580911085848/Untitled-2-02.pnghttps://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3aca03d29b7f336bc42da8/1580911107204/Untitled-2-03.pnghttps://static1.squarespace.com/static/5e3aaef9b3593646244a2cc4/t/5e3aca0b69d6292afd79d6df/1580911115850/Untitled-2-04.png Link to comment
AlexSantos Posted February 5, 2020 Share Posted February 5, 2020 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 comment
AlexSantos Posted February 5, 2020 Share Posted February 5, 2020 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. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.