Crazy container effect! - Page 1

User 2088758 Photo


Senior Advisor
3,086 posts

Hello fellow Coffeecup'ers,

Has anyone figured out how to produce these angle containers using SD. I've been banging my head trying to get this to work within the application itself. I know the css code that would do this after the fact but I don't want to have to redo it everytime I export.

Thanks
Steve
Attachments:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2699991 Photo


Registered User
4,782 posts
Online Now

Steve wrote:
Hello fellow Coffeecup'ers,

Has anyone figured out how to produce these angle containers using SD. I've been banging my head trying to get this to work within the application itself. I know the css code that would do this after the fact but I don't want to have to redo it everytime I export.

Thanks
Steve

If you know the code add it into your resources no need to re do it every time exporting
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2088758 Photo


Senior Advisor
3,086 posts

i tried that. I can add the css sheet but I have to use html elements to get this to work and it doesn't work well. I tried renaming the class and id appropriately according to the css but the canvas doesn't reflect my changes. It just looks terrible.

Not super urgent as I am just playing around trying to do different things to create a more unique layout and came across that layout.

If I figure it out Ill report back.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,447 posts

How about adding the css into a html element?
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 2088758 Photo


Senior Advisor
3,086 posts

I did not want to use an html element at all. I would prefer to try and use the software itself to accomplish this goal.

The css I'm using is:

header{
position: relative;
width: 100%;
height: 10em;
background-color: #FF3300;
}


header::after{
position: absolute;
width: 100%;
height: 100%;
content: '';
background-color: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform-origin: top left;
transform: skewY(6deg);
}


I know it has to do with the transform. I really want to see if I can get SD to do this from within.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2699991 Photo


Registered User
4,782 posts
Online Now

Steve wrote:
I did not want to use an html element at all. I would prefer to try and use the software itself to accomplish this goal.

The css I'm using is:

header{
position: relative;
width: 100%;
height: 10em;
background-color: #FF3300;
}


header::after{
position: absolute;
width: 100%;
height: 100%;
content: '';
background-color: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform-origin: top left;
transform: skewY(6deg);
}


I know it has to do with the transform. I really want to see if I can get SD to do this from within.


Something like this perhaps

all within SD no outside influences
Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2088758 Photo


Senior Advisor
3,086 posts

Thanks for playing around with this with me. I wont be able to explore this more until tonight. But Yes however I do not want the content to go that way only the container. I was able to get that effect too.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

I found this interesting article:

https://kilianvalkhof.com/2017/design/s … le-in-css/

I will try to play with this. I don't think SD has pseudo elements though
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,181 posts

Can't you use the Rotate Z under 2D& 3D Transform Functions on the Effects tab?
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 187934 Photo


Senior Advisor
20,181 posts

Steve wrote:
I don't think SD has pseudo elements though

It does, I think. I'll check I thought I saw them when I was trying to skirt some js
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

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.