Crazy container effect! - Page 2

User 187934 Photo


Senior Advisor
20,181 posts

Not seeing pseudo elements
Nothing on here.
https://tutorials.coffeecup.com/site-de … o+elements
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 2699991 Photo


Registered User
4,782 posts

I must be mis understand the image steve shows for the effect he was after to me shows 2 containers angled on 1 side only
left container angled on right side
right container angled on left side
And aligned side by side

Which is same as what I did.

I'm not clear now on what is required
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

Look at the image background it is skewed as well. I need the container to have angles but the background and content normal.
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

Steve wrote:
Look at the image background it is skewed as well. I need the container to have angles but the background and content normal.


Just a matter of a little correction, which I am sure you could handle
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

Can you please attach that project I would love to see how you did that!
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

Steve wrote:
Can you please attach that project I would love to see how you did that!


still working on it, unfortunately the large gradient header requires some custom script, which I believe you don't particularly want to use

will keep everyone updated when I finish it.
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 Wayan, Im not as interested in the gradient background. More interested in how you got the angel containers with the background images and content not skewed.
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

Steve wrote:
Thanks Wayan, Im not as interested in the gradient background. More interested in how you got the angel containers with the background images and content not skewed.


If you have already done that type of container, then to stop the background images/content from skewing to, just put another container inside the skewed ones. skew those containers in the opposite value, and place your background image/content in the two new containers (adjusting widths/heights/margins/padding accordingly.

I will be putting up a "How To" video on my site tomorrow (Java Time)
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

Excellent I look forward too your tutorial. I kind of got your effect there except I could only skew the entire container. How do you get it to apply only to the one side of the container? Did you do that all with SD only?

Thanks again
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Registered User
260 posts

Hi Steve, I'm not sure this will help but it might give you a different perspective on it.

If you take a look at my website

https://www.purpleespresso.com/

If you scroll down to the footer, I was able to achieve the curved container effect by just adding a svg image. With the svg, its responsive as you will know so works across all screen sizes. It's another way to achieve odd shapes without using pseudo elements etc.

Regards Phil


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.