Тёмный

Using the CSS clip path Property 

Steve Griffith - Prof3ssorSt3v3
Подписаться 100 тыс.
Просмотров 37 тыс.
50% 1

This tutorial explains how you can use the CSS clip-path property to create some cool effects on your webpages.
Code Sample: gist.github.com/prof3ssorSt3v...

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

 

11 янв 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 32   
@dr3dr356
@dr3dr356 Год назад
Sometimes all you need is to see how someone else solve a particular problem, this is the reason why I like your videos, the interactions in all your videos and communication of what you're doing, how you're doing it or why you're doing it. This helped the viewer to anticipate what the result will be which make the whole video intuitive. Concepts are buried down in a content without good communication and explanation, trying to explain a concept that is already master by someone is paramount in programming and it's the most sort skills (technical skills) to become a senior engineer but I think is paramount to oneself too in crafting a working algorithm communicating the idea in your head to your imaginary self is what software engineer do everyday and if you are confuse you can confuse yours audience too. Thanks once again for taking time to do this
@davidofug
@davidofug 3 года назад
I don't know the reason why someone should dislike this informative yet easy to follow along video. Thank you Steve
@wiesawmazurak4007
@wiesawmazurak4007 3 года назад
They must be other yt teachers jealous about Steve's great tutorials.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
@@wiesawmazurak4007 lol
@arunsp767
@arunsp767 2 года назад
For example: Somebody comes to learn clip-path property, but the video talks majorly about flex-basis, negative margin hacks n everything.
@DarkReaperK97
@DarkReaperK97 Год назад
Steve you're awesome. So far you've covered every little css property I've been trying to find information on!
@barungh
@barungh 4 года назад
very very interesting, learnt something new with clip path, thank you
@alejandrocastroq
@alejandrocastroq 4 года назад
awsome as always ! thank you !
@amercabonegro8259
@amercabonegro8259 Год назад
This is great, new concept I learned.
@berendvanbeerschot1472
@berendvanbeerschot1472 Год назад
Great video, really helpful!
@youssefmorcos1826
@youssefmorcos1826 Год назад
Is there any link that explains more what the percentages of the polygon mean? I understand the general idea but I don't get how to manipulate the angles like that.
@LukeSamkharadze
@LukeSamkharadze 2 года назад
How did margin-left reduced dinstance between nav items? I thought every item should move to the left side hence leaving the gap same size
@iwswordpress
@iwswordpress 4 года назад
very useful
@jacek0720
@jacek0720 4 года назад
Thank you
@tooglesoogle1755
@tooglesoogle1755 2 года назад
Hey Steve, thanks for all your great content. Do you know if it is possible to make box-shadow properties go with the clip?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
I haven't experimented with combining the properties.
@torjeapi5221
@torjeapi5221 2 года назад
Add a wrapper div around the element you are clipping, and use the fill property on the wrapper. filter: drop-shadow(x v blur color)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 года назад
The constant answer with HTML and CSS. Add a wrapper div. :)
@torjeapi5221
@torjeapi5221 2 года назад
@@SteveGriffith-Prof3ssorSt3v3 Yes, everything in HTML is a box
@omagadavid9923
@omagadavid9923 3 года назад
Thank now I finally know how to do dis stuff
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Here is a fun application of clip-path - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1F1t1dpVttk.html
@minhajurrahmanjoni3912
@minhajurrahmanjoni3912 3 года назад
it was helpful
@tundeoriyomi1186
@tundeoriyomi1186 3 месяца назад
This was helpful😊😊
@safasouli2527
@safasouli2527 2 года назад
perfect thanx a lot
@oguzhanyusuf73
@oguzhanyusuf73 4 года назад
Thanks:), It is a great video. Can you please make a tutorial about how to record audio and upload it to server? I have tried Matt Diamond's Recorder.js but I couldn't upload file to server. Thanks:)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Here is my playlist of videos on AJAX - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7EKebb4VUYQ.html it includes videos on uploading files. Here is my playlist of videos on multimedia with JS - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mwu2U_Sm6LY.html it includes at least one video on saving audio files.
@outpost31737
@outpost31737 Год назад
Clip path url('img/custom-outline.svg'; doesn't work for me. Very frustrating.
@SteveGriffith-Prof3ssorSt3v3
You need to specify the path element inside the svg file to use svg.
@allanroberts8611
@allanroberts8611 4 года назад
Are you Canadian?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Yes. 😀🇨🇦
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Yes! 🇨🇦😀
Далее
Build a Collapsible Header
7:30
Просмотров 3,8 тыс.
Super gymnastics 😍🫣
00:15
Просмотров 18 млн
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 425 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
Curved/Custom DIV Shape Tutorial - CSS & SVG
4:35
Просмотров 250 тыс.
The problems with viewport units
13:23
Просмотров 352 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 897 тыс.
SVG can do that?! (Sarah Drasner)
38:08
Просмотров 83 тыс.
Top 10 CSS Features You Should Know & Use in 2023
19:56
10 modern layouts in 1 line of CSS
21:39
Просмотров 1,1 млн
Super gymnastics 😍🫣
00:15
Просмотров 18 млн