4 Cool Pure CSS Ribbon Shapes | CSS Tricks

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

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

50% 1

With pure CSS we'll create different ribbon shapes. I'll show you how to create 4 (including bonus) different ribbon shapes using pure CSS.
You can use ribbon shapes in different Product Card, Service Card and so on to convey important information for your clients.
📢 SUBSCRIBE my channel for more helpful 🎬videos
🔔 / @codingdesign
⌚Timestamps
00:00 Intro
00:38 HTML
01:08 CSS (Basic Modification)
02:48 CSS (Ribbon Shape Type-1)
07:01 CSS (Ribbon Shape Type-2)
09:52 CSS (Ribbon Shape Type-3)
10:04 CSS (Ribbon Shape Type-4)
13:00 Outro (Final Result)
🎬 Product Card | UI Design
✅ • Product Card | UI Desi...
🎬 Design Pricing Plans Card
✅ • Design Pricing Table |...
🌎 Browser : Brave V.1.50
📝 Code Editor : VS Code
💠 Extensions : Live-Server
#css3 #ribbon

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

17 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Error_fragproshooter 11 месяцев назад

Cool👌👍

@CodingDesign 11 месяцев назад

Thank you!

@abdulhamid.469 11 месяцев назад

It's great. ❤

@CodingDesign 11 месяцев назад

Thank you!

@mudassirabegum1554 9 месяцев назад

the last one was useful, 2nd the code was not working when i used Thank you

@CodingDesign 9 месяцев назад

I'm sorry without knowing your real problem (what's wrong) I can't provide you any solutions.

@mudassirabegum1554 9 месяцев назад

it was correct in desktop but i when i worked to optimize mobile it was very difficult to arrange it properly @@CodingDesign

@shogunkodogun 10 месяцев назад

great channel. Where do you learn all this ?

@CodingDesign 10 месяцев назад

I'm self taught web developer + I do spend most of my time creating 🎬RU-vid video & 🔍research.

@mudassirabegum1554 9 месяцев назад

it is a big headache to make mobile responsive please show that also

@CodingDesign 9 месяцев назад

I'm sorry. I can't create separate video for that specific problem. Right now my College Examination is running on. Therefore after completion of my exam I may provide you "code" in order to make it "responsive" .

@mudassirabegum1554 9 месяцев назад

thank you so much for giving time and understanding my problem .i will be waiting@@CodingDesign

@CodingDesign 9 месяцев назад

@@mudassirabegum1554 You can just use this code. ⚠ It's bad practice to use Flexbox on "body" tag & you can use CSS Grid as well. But right now you can try it. @media screen and (max-width: 790px) { body { flex-direction: column; gap: 2rem; } }

@AyabongaDuma 11 месяцев назад

Hi sir! I don't know if it is possible but can you show us how to create a website that looks like a Microsoft Edge overview page with animations, also my comment keeps disappearing if I try to comment down the link. It sends you to the official edge page which shows you the browser's features. Sorry for the trouble, it just keeps fading.

@CodingDesign 11 месяцев назад

Can you provide 🔗link of that specific page.