Archived topic
Sketched image borders like the ones in the Liberte theme
6 replies · Started by ballerinamoose on April 11, 2022
Hi,
I'm wondering how to create the sketch-like image borders seen in the Liberte theme. (This is a hypothetical question; I don't have that theme installed.). Is that something I have to use Elementor for (bleeeecccch, I'd rather stick with blocks), or is it something that can be done with CSS?
Thanks for your help.
Hi there,
It should be achievable with GenerateBlocks with a bit of extra CSS.
Once you have the site set up then we can help with the code.
Let me know :)
Sorry I only just now saw your reply. I am loving the combo of GeneratePress & GenerateBlocks, so I'm glad to hear it's doable.
I should have something set up in the next few days. Thanks!
Hi,
I was able to get the image edges to look the way I want using this:
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
But I'm still not sure how to do the sketchy frame and the inset.
I was messing around with this:
outline:solid 5px rgb(235, 235, 235, 1);
outline-offset: -30px;
But I don't know how to get that sketchy effect on an outline.
When I tried using a border on the image element instead, I couldn't figure out how to get it to overlay the photo vs. being on the outside.
Thanks for your help!
Hi there,
I would suggest using this structure:
- Container A (with background image, set around 20px padding)
- Container B (with border)Ah, that makes a lot of sense. I'll give that a try.
I think it may be too difficult for the client, though, in terms of updating images on their site in the future. I was hoping I could just show them how to add a CSS class to an image, and put everything I needed in that class.
in terms of updating images on their site in the future
updating background image should be fairly simple.
