How to Create Stunning Slanted Containers with CSS

Подписаться 9 тыс.

Просмотров 1,6 тыс.

50% 1

A detailed, in-depth guide to creating slanted card components using CSS clip-path & shape-outside properties.
⚠️ Please note:
- At the time of recording, I didn’t realize the `shape-margin` property exists, which lets you effortlessly add margin to `shape-outside` - use this instead of tweaking the path points.
- I’m using some physical properties like `width` and `height` in code - these should have been logical properties like, `inline-size`, and `block-size` - it's fixed in the demo.
- Lastly, I’ve recorded the video with a throat infection, and my voice gets progressively worse as the video advances-sorry about this.
🔗 Links
CodePen Demo: codepen.io/ZoranJambor/pen/Yz...
Mastering Linting: masteringlinting.com
CSS Stickers: stickers.css-weekly.com/
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS ...
clip-path on MDN: developer.mozilla.org/en-US/d...
shape-outside on MDN:
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
📖 Chapters
00:00 Intro & demo setup
01:56 Create a slanted edge using clip-path
04:47 Adjust content to follow the slanted edge using shape-outside
09:14 Refactor physical to logical CSS properties
10:44 Set shape-outside points
13:55 Fix reversed up clip-path points
15:01 Tweak margins between cards
15:48 Add padding between slanted edge and content using clip-path
18:49 Add padding between slanted edge and content using shape-outside
20:54 Drawback of this technique and conclusion
Course Mastering Prettier & Stylelint
🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code RU-vid25 to get an additional 25% off on the already discounted pre-launch price.
Get CSS-themed stickers:
🪧 stickers.css-weekly.com/
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #csstutorials

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@lvekua 5 месяцев назад

Awesome technique! Wonder if the shape-margin would work instead of adjusting polygon?

@CSSWeekly 5 месяцев назад

Thank you so much, Levan! 🙏 Yes, indeed, shape-margin would be a better choice than adjusting the polygon. Unfortunately, I wasn't aware that shape-margin existed at the time of recording. 😔

@hanskuiters857 3 месяца назад

Great demo, thank you. I tried with :before and :after pseudo elements instead of introducing new inline card__start and card__end element, but that didn't work. Haven't figured out yet why not.

@CSSWeekly 3 месяца назад

This was precisely my idea at the start, Hans. 🙂 It doesn't work because you need to have floated elements in HTML order before unfloated element. If you move card__end below card__content in HTML, it will no longer work as it should. That's why, unfortunately, it can't work with pseudo-elements. 🙂

@ahmad-murery 6 месяцев назад

This is a clever design. Although both flex and grid solve a lot of alignment issues we had before, but float still useful for cases when we want to wrap a text around another element. Also, I think we can use pseudo elements (::before and ::after) to create the slants so that we don't have to modify our html. Anyway, a quick alternative is to use the CSS transform property on the container element (article) transform: skewX(-5deg); the downside is that it will skew the content too (but maybe it's not noticeable for small skew values) Thanks Zoran!

@CSSWeekly 6 месяцев назад

Thank you, Ahmad! 🙏 Of course, the float property still has its place-it's just not a good fit for layout. 🤣 I considered ::before and ::after, but I found that both of those would have to be in markup before the content for the float to work. Or I'm missing something. 🙂 I've seen an interesting demo with skew, where you skew the container and then skew the content for the same negative value, but the text looked blurry-and that's not good enough. Perhaps there's a way to make it work well, though. 🙂 Thanks for your insight!

@ScriptRaccoon 6 месяцев назад

While watching the video I was also considering that skewX hack (which is sometimes useful). But now that you pointed out the blurry text, I won't try it. ^^

@ahmad-murery 6 месяцев назад

@@CSSWeekly Just my thoughts, I didn't try anything so I'll take your word 👍

@ahmad-murery 6 месяцев назад

@@ScriptRaccoonafter trying it, it indeed looks blurry, anyway my fatigue eyes didn't pick that up directly.

@badcatdesign 6 месяцев назад

Love it. A lot of work here and fun stuff to learn and play with. I'm so lazy I just toss a ```transform: skew(-10deg);``` onto the card and call it a day :)

@gabrieltavernier 6 месяцев назад

I think the same, transform:skewx made exactly what we need.

@CSSWeekly 6 месяцев назад

Thank you so much! 🙏 Yes, transform is a potential solution and much simpler at that, but it skews the content as well, not just the container. 😕

@badcatdesign 6 месяцев назад

@@CSSWeekly Exactly... which under 10% might look pretty good (faux italics and all), but past 15% can get to be a bit too much. Thanks!

@ScriptRaccoon 6 месяцев назад

Nice effect and very interesting solution! I am not sure if I would have been able to come up with a solution... It's really advanced CSS.

@CSSWeekly 6 месяцев назад

Thank you so much for the compliments, my friend! It means a lot! 🙏

@nicolaaass1 Месяц назад

very nice zoran can i make the same without gap between cards?

@CSSWeekly Месяц назад

Thank you, Nicola! 🙏 Yes. In the demo, the gap between cards is 0, as we're cutting of just a part from every side (cln.sh/C7g6bspb), but you could set negative marign on .card, something like "margin-inline: -1.5rem;"

@SeanGoresht 6 месяцев назад

Here we are, almost at 2024, and just when I thought I would never see the float property ever again, and this video totally put me in my place... 😁 Probably worth evaluating whether adding all these fake elements is worth the skewed design here. Even with the refactored CSS custom properties, I find the polygon syntax quite difficult to understand. And in this day and age where everyone seems to want to inline CSS instead of write it separately, I can't even begin to imagine how convoluted and confusing HTML markup would get... Perhaps we can just stick to our standard bounding rectangles until browsers can make this syntax more approachable for the everyday web developer? 🤷

@CSSWeekly 6 месяцев назад

Thanks for sharing your insight, Sean! 🙏 Indeed, there are a lot of presentational elements here, and polygon() is impossible to comprehend. Firefox Devtools has a clip-path editor that helps with this, but it doesn't work with custom properties. 🤷‍♂️ I can't imagine adding something like clip-path to HTML-but I do bet it's possible with Tailwind. 🙂 For the most part, sticking with a simpler solution is probably a good idea, at least for projects in production. But sometimes, you just have to try pushing the limits to see what's possible. 😀

@ScriptRaccoon 6 месяцев назад

Well ideally someone creates a reusable component for your favorite web framework which does exactly that for you (probably has been done) so that you won't have any trouble with the implementation. You will author MyCard and just use Slanted as a blackbox, which should be OK after having seen this video.

@CSSWeekly 5 месяцев назад

That's a fantastic idea! 👏

@Teamshares_Daross 5 месяцев назад

For the padding on the shape insets, can't you just use the `shape-margin` property instead of manually modifying the `shape-outside`? Edit: just saw someone else already commented on that. Never mind.

@CSSWeekly 5 месяцев назад

Yes, you're correct, Michael. That's an excellent observation! I didn't know about `shape-margin` property at the time of recording. It would have been a better choice. 🙂