CSS property 'clip-path' in SD?

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Has any of you tried to use this? I have, but I cannot get it to work in SD. In the HTML Editor it works like a charm, see a sample page I made: https://eikweb.com/stuff/. (it's only a one-page thing plus the images, any square images will give you the same effect). I would like to know if anyone has any good experience with this in SD, maybe I have overlooked something...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2885740 Photo


Registered User
60 posts

Hi Inger,

when you follow the link in my signature you'll find an example for clip-path in SD under "onesided-skew".
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Thanks, René, I will check it out. :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
222 posts

I had not seen or read about this css feature. There are several online tools that will help you create the proper code. I would think that you could drop that into a html element. Then upload the images and add the css and you are good to go. Is that not the case?

You are so right about the little amount of effort it takes in the html editor to use the feature. I say Long live hand coding!!! :-)
Learn something, Share something.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It doesn't work just like that, I had tried that. But if the images are put as background images in a container, and if those containers have an ID instead of a class, then it works. Frank Cook found out for me.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2885740 Photo


Registered User
60 posts

Bosco, you don't need the SD html-element to add a clip path to an image or any other element on your page. One possible way of working is to get your clip-path code from your online tool and add it to a class in an internal stylesheet in the Head section of your HTML document. This is how it is done in "sd-goodies / one-sided-skew". There it is used once on a container and once on an image. The clip path property can be added to most HTML elements. For example, in "sd-goodies / broken text" you can see this in action on a text.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

René, Bosco is on to something with that html element. You have added some styling in the page manager, which is all good and well if you share project files with someone. BUT, people who make components, like me, for starters, cannot use the Page manager for custom code. In components everything in the 'pm' gets ignored. I'm attaching a component made from your 'skew' file, where you can see for yourself.

So, since the 'pm' cannot be used, we have to use html elements instead. For now.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts

Inger wrote:
René, Bosco is on to something with that html element. You have added some styling in the page manager, which is all good and well if you share project files with someone. BUT, people who make components, like me, for starters, cannot use the Page manager for custom code. In components everything in the 'pm' gets ignored. I'm attaching a component made from your 'skew' file, where you can see for yourself.

So, since the 'pm' cannot be used, we have to use html elements instead. For now.

I looked at the page source and thought the same thing. Still requires outside coding.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2885740 Photo


Registered User
60 posts

@Inger:
Right. I referred you to my example, because your initial question only mentioned “clip-path in SD” and not your wish for a ready-made component using clip-path.
The site “sd-goodies” is not meant to deliver components. Its purpose is to show possible solutions for a few common development challenges. If anything, I hope that the viewer will be inspired and adapt the examples shown to their needs.
Excellent, if Bosco pointed you in a new direction.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hey, I'm sorry if my previous post may have come across as if I was criticizing your work. I didn't mean it that way. And I was asking about the clip-path in SD because I hadn't been able to make it work so far. I was definitely not looking for any ready-made component, I make them myself.
My comment was triggered by your reply to Bosco when you said it wasn't necessary to use an HTML element. I then thought you were not aware that contents from the page manager would be ignored when creating a component.
And just to assure you, I find your Goodie site brilliant! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.