Тёмный

Cool UI Effect with SVG Clip Path, CSS Aspect Ratio & More.. 

DesignCourse
Подписаться 1,1 млн
Просмотров 60 тыс.
50% 1

bit.ly/2MMrQSq - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com​
-- Today, we're going to hop back into the world of frontend development (of the intermediate/advanced variety) to create a cool UI effect using SVG clip path, the new CSS aspect-ratio, and much more.
Codepen demo for this project:
codepen.io/designcourse/pen/q...
Unsplash credits:
unsplash.com/photos/GYumuBnTqKc
unsplash.com/photos/xT7OuIFew3Q
0:00 - Introduction
1:46 - An Awesome Offer
2:20 - Creating the SVG
5:00 - Project Structure
6:18 - Writing the HTML
9:43 - Writing the CSS
21:10 - Closing
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

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

 

14 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@DesignCourse
@DesignCourse 3 года назад
What are some other UI effects/practices/techniques should I feature?
@EshwarNorthEast
@EshwarNorthEast 3 года назад
Can u make like all typical animations like slide up and reveal, and all those? From scratch without using any library?
@SantotoLeandro
@SantotoLeandro 3 года назад
Hi Gary!! This was awesome! Can you please share that article about the "hack" that you mention in the video? Thanks!
@otazkin2937
@otazkin2937 3 года назад
Modal forms with calendar, time pickers and so on :)
@darklucifer2853
@darklucifer2853 3 года назад
Hey I don't know why but on clipping that svg the image just disappeared 😓
@wamukota
@wamukota 2 года назад
You mention an article, that explains why you should use the "0 0 1 1" viewbox but you never linked to it
@hammad-ilyas
@hammad-ilyas 3 года назад
Floating head tutorials!
@sidson_aidson
@sidson_aidson 3 года назад
From a fullstack developer...I love these sort of 'cool discoveries' and your channel has been delivering for YEARS (at least for me)! Oh btw, if you hit Ctrl + Alt + F in vscode, it will automatically format your code! I noticed that you hit tab very often!
@andreja107
@andreja107 3 года назад
"The deer is actually right here, unfortunately I cut it's head off " -Gary Simon 2021
@Z3ROR
@Z3ROR 3 года назад
Counts as a zombie too :P
@dev10shah
@dev10shah 3 года назад
gARRY SIMON'S FACE IS ALSO CUT OFF BUT IT IS LIVING
@NBA6Fan
@NBA6Fan 3 года назад
Its head actually got moved to bottom left side
@hossamayman3587
@hossamayman3587 8 месяцев назад
I just want to say one thing I love you OMG it helps me a lot after 3 hours of searching and you come to save the day ♥♥
@magdasokolovic
@magdasokolovic 3 года назад
I admire how consistent and productive you are with your videos. Each video teaches me so much. Thanks!!
@thepunisher1917
@thepunisher1917 2 года назад
Dude, you are a Godsend. Your channel is a goldmine. Thanks for sharing your skills.
@omkarkottawar8309
@omkarkottawar8309 3 года назад
You're the best Gary!!! Keep it up!!
@maviniii
@maviniii 3 года назад
You are the best sir, please keep it up!
@abhishekshukla7803
@abhishekshukla7803 3 года назад
Today, I was searching for how to make a Svg clip path, Thank You it was great help.
@ilyesbrh7667
@ilyesbrh7667 3 года назад
nice closing
@yahyawiab1423
@yahyawiab1423 3 года назад
I have so much fun watching your Tuto
@rahulsbhatt
@rahulsbhatt 3 года назад
Your videos are gold🔥🙏
@sonoftroy8572
@sonoftroy8572 3 года назад
I was actually more interested in the css filter rule and how it applied the shadows
@ViktorOddy
@ViktorOddy 3 года назад
Got idea for my next vid, thanks 😊
@christian_life
@christian_life 3 года назад
muy buen tutorial, muchas gracias, muy buenos los atributos que utilizaste, no conocía el aspect ratio. por cierto ¿qué le sucedió a tu cabello?... me gustan tus videos.
@egbaogheneakon4266
@egbaogheneakon4266 3 года назад
Love it 😍
@elmalleable
@elmalleable 3 года назад
Epic work
@juanmolinas
@juanmolinas 3 года назад
Hi Gary!, that's cool!, greetings from Paraguay!
@rattansingh4081
@rattansingh4081 3 года назад
You are great boss👍
@frz_akbar
@frz_akbar 3 года назад
awesome tutorials
@akshayvb6854
@akshayvb6854 3 года назад
Dope🔥
@kapilxtio3330
@kapilxtio3330 3 года назад
Awsm
@tomaszkumiega4325
@tomaszkumiega4325 3 года назад
Hey, can you share link to the article with this 1x1px svg hack?
@shekishral6570
@shekishral6570 3 года назад
You should probably use more the browser inspect so that one can see live the changes.
@ShantanuAryan67
@ShantanuAryan67 3 года назад
4:08 so that scale factor == size in px ?
@pauljohn3898
@pauljohn3898 2 года назад
cool
@strange5700
@strange5700 3 года назад
1:12 the dear is actually right here
@BranGRadio
@BranGRadio 2 года назад
I tried the viewbox trick with a more complex shape but it ended up slightly cropped on the edges...
@einfachnurlegendar7947
@einfachnurlegendar7947 3 года назад
Couldnt this also be done by overlaying those 2 pictures and setting a mix-blend-mode?
@mondejarmarron18
@mondejarmarron18 2 года назад
How can we change the shape of svg using animation?
@Anth-ony
@Anth-ony 3 года назад
It hurts me when I see people clicking the taskbar to switch between programs. ALT + Tab is your best friend when it comes to switching quickly. Other than that, this video was really cool and inspiring. Think I'm going to test something like this out except with some more complicated shapes. I'm hoping it won't be too difficult. I'm assuming I can't use the aspect ratio thing if I want it to work on all browsers.
@sriramsrinivasan4965
@sriramsrinivasan4965 3 года назад
When is designcourse.com getting released , eagerly waiting
@Tsomimotso
@Tsomimotso 3 года назад
me too but I haven't found any release info yet
@medusiora8695
@medusiora8695 2 года назад
Could you share the article that you talking about SVG file please ? I'm a web developer, That's interesting article. Thanks.
@irfantayyib
@irfantayyib 2 года назад
If you find it, share it with me please.
@sblanz
@sblanz 3 года назад
I'm trying to do something similar but moving the clip-path to css file instead of having that in the html, but I'm having troubles with the centering of the clip-path. Anyone tried that?
@franktielemans6624
@franktielemans6624 3 года назад
I tried to recreate this with another simple shape that I made in Illustrator, scaled it to 1px * 1px and exported it as an svg. I cleaned up the svg and added the defs an clipPath bit, gave it an id,... Wrote the CSS and it didn't work. First thing I noticed when I look at the exported SVG was that the viewbox is not 0 0 1 1 but 0 0 0.1 0.1. Second, I see it exported in group, it has an ID from the layer and even a data attribute (data-name). I deleted all that code, so I only have the path. Also, when I look at your svg I see a transform translate property in the path. Where is this coming from? I don't have that, I only have the path coords in the svg. Strange thing is, when I copy paste your path from the codepen, it does work.
@amankothari220
@amankothari220 2 года назад
The same thing happened to me you are right bro
@shreyanshsharma9228
@shreyanshsharma9228 2 года назад
Just try using with only by adding id to clipPath tag don't delete anything
@muhaimincs
@muhaimincs 3 года назад
Can you do it side by side screen instead of keep switching it
@sushantkunkekar2155
@sushantkunkekar2155 3 года назад
First one to comment..you are simply the best
@ildikoedit9110
@ildikoedit9110 2 года назад
I just love that you cut out the eyes and the face of the deer :O Huge fail
@metelomaniac
@metelomaniac 2 года назад
Man I was dealing with that in Figma, even if I would set the height 1 and width was less than 1px (constrained proportions) it was being bigger than 1px. Then I just removed "constrain proportions" and set the width and height both to 1px and boom, problem solved!
@olegkoselev6975
@olegkoselev6975 3 года назад
Hi I found one issue... there is huge blank space under your design. How to get rid of that? If I use clip-path then svg itself is always place somewhere on the worst palce :D Does anyone has any advice ? Thanks ))
@ze_chooch
@ze_chooch 3 года назад
I’m not at an editor to test this out, but you can try adding a div around the content, then using flexbox, then aligning the items to center.
@BranGRadio
@BranGRadio 2 года назад
you can include your svg without pasting it into your HTML with clip-path: url( [path-to-your-svg].svg#your-id )
@qwerty74
@qwerty74 3 года назад
Ok this is actually scary.
@manpatel6984
@manpatel6984 3 года назад
I always use Figma to make stuff like this and then import it as an img. Is that fine??
@opeyemioyekunle1570
@opeyemioyekunle1570 3 года назад
Image reduces page speed.
@anfas184
@anfas184 3 года назад
awesome but too frequent advertisements are killing it
@davidfitcher2953
@davidfitcher2953 3 года назад
what does the hair say?
@siamekanto
@siamekanto 3 года назад
2:59 That's what she said
@pratikkumarraval767
@pratikkumarraval767 3 года назад
ohhh.....
@oleksandrleskiv
@oleksandrleskiv 3 года назад
12:14 I though there was going to be a punchline
@aravindhhere
@aravindhhere 3 года назад
First comment squad😘😘😘😘
@manwailai7828
@manwailai7828 3 года назад
In my opinion, I will cut off the deer too and move it in front to look better.
@Moopse101
@Moopse101 6 месяцев назад
i can't for the life of me get this to work, so frustrating!
@doriomer
@doriomer 3 года назад
Gary, first of all thanx for your tuts. But with all the respect, if you can't explain something - it means you dont understad it. Maybe this tut would be better if you make it with a shape that is not the same width and height.
@vampirejs758
@vampirejs758 3 года назад
How are your pets ?
@senior_developer
@senior_developer 3 года назад
Flying head
@Arttyor
@Arttyor 3 года назад
Why....Why would you use svg for as simple element as box with rounded corners? If you already showing clip-path at least do some unique shape.
@tailofahippopotamus9775
@tailofahippopotamus9775 3 года назад
Please put a trigger warning before showing decipitated animals (and Garies)
Далее
Awesome UI Interactions with the CSS Clip Path Property
16:15
3 wheeler new bike fitting
00:19
Просмотров 14 млн
Using CSS custom properties like this is a waste
16:12
Просмотров 158 тыс.
SVG can do that?! (Sarah Drasner)
38:08
Просмотров 83 тыс.
SVG Viewport and viewBox (For Complete Beginners)
12:25
Creative Section Breaks Using CSS Clip-Path
12:27
Просмотров 6 тыс.
Creating and Animating an SVG Mask
14:53
Просмотров 11 тыс.
SVG Path Tutorial • Easy to Understand!
16:44
Просмотров 54 тыс.
7 Design Portfolios that I MIGHT Rate a 10!
14:03
Просмотров 916 тыс.
Raw 2024 Akra BMW M1000R Exhaust Sound #bmw
0:25
Просмотров 4,2 млн
Falling For the Can-Am Maverick R...
0:17
Просмотров 6 млн
ПОКУПКА ТЕЛЕФОНА С АВИТО?🤭
1:00