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

Apply border and other css effects to image shapes


PEARLERwork

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

image shapes use clip paths (imagine cutting a hole in a piece of paper and laying it over the top of your image), so the drop shadows that you apply won't be visible as they are outside of the clipped area. CSS box-shadow rules don't get applied after clip-path rendering so you wont' get the outline you want, but what you can do is use the "filter" rule as this happens later in the order of operations. you have to apply it to a parent element though as the image clip path will still try to clip the shadows.

The best bet as far as I can see is to target the parent "figure" element to the image and use a drop-shadow filter, e.g.

#block-yui_3_17_2_1_1635215334828_29269 figure {
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}

this approach is noted here

https://css-tricks.com/using-box-shadows-and-clip-path-together/

 

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0

Thanks, @iamdavehart - this works sort of. However, to add a layer of complexity, I want this effect to apply to all image blocks automatically without having to identify each #block-yui

Also, when I use the code above, it works for the drop shadow but not for the border!

Link to comment
  • 0

Unfortunately, there's probably only a "sort of" explanation because of the way that clip-path's work...

To apply it to all image blocks automatically, change the section id selector to a class selector that targets image blocks

.sqs-block.image-block figure {
 // insert your drop shadow filters here
}

to do the border, you could try assigning two drop shadow filters, the first one having no offset and just a 1 px spread to draw your border and the second one drawing your drop shadow

e.g. this will draw a red border and a drop shadow on figures in image blocks

.sqs-block.image-block figure {
filter: drop-shadow(0px 0px 1px rgba(255,0,0,1)) drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)) ;
}

Maybe that will work for you. Your options are a little limited here though as I said, which isn't really a squarespace feature/bug, just a side effect of CSS clip paths

Hope that helps

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0
On 12/13/2021 at 7:12 AM, pearler1570048501 said:

Thanks, @iamdavehart Yeah it's a tricky one! Unfortunately it applies to all elements of the image block:

 

Screen Shot 2021-12-13 at 11.10.38 am.png

Try change to this class name

Quote

.sqs-block.image-block .intrinsic

 

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

Create an account or sign in to comment

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


×
×
  • Create New...