Curved/Custom DIV Shape Tutorial

No video

Curved/Custom DIV Shape Tutorial - CSS & SVG

Рет қаралды 257,147

Red Stapler

Күн бұрын

Пікірлер: 117

@karimullahkhan8354 4 жыл бұрын

it seems like "Now i am the web developer" yeah and credit goes to you thank bro

@user-zu6gk3zw4s 4 жыл бұрын

Tolly agree with you :)

@Pankaj-Verma- 4 жыл бұрын

Channel is great indeed.

@jenstornell 4 жыл бұрын

Great that you also mention the tools you use! To make it perfect, link to the tools in the description. 👍

@Pankaj-Verma- 4 жыл бұрын

This channel should be awarded as best channel in web development category. Thank you so much for your kind help!

@abustosp 4 жыл бұрын

I had the issue with the line in the past. Glad you found a solution! Thank you so much!

@RedStapler_channel 4 жыл бұрын

not the cleanest solution but it works! :)

@anshumangupta1422 4 жыл бұрын

@@RedStapler_channel Any better solution??

@alianwar2857 4 жыл бұрын

I always wondered how it could be done. Thanks pal. It worked like charm

@FirdavsiWebDev 4 жыл бұрын

That looks so wavy!! Great project!!

@chakabani123taftouf7 6 ай бұрын

very good, continue...

@lizalizaveta1882 3 жыл бұрын

Wow, I had to re-watch your video like 3 times to be able to grasp it and correct my bugs. But in the end I did it! Thank you so much!!! This is a really useful skill.

@aan8123 2 жыл бұрын

bro please tell my how to increase the width of svg of get waves

@mark_pherz Жыл бұрын

Thank you for this video! It's very useful and straight to the point 👍

@TroyboyTv 4 жыл бұрын

You are the man! I've been trying to do this correctly for a while. Thanks!!

@dolapoajayi2156 4 жыл бұрын

hi..does a line appear when you switch to mobile view?

@remixowlz 4 жыл бұрын

Thank you dude! I have been searching for this for ages!!👍👍👍

@RedStapler_channel 4 жыл бұрын

glad you like it. you could help support us to make more tutorials by sharing it to your friends :)

@remixowlz 4 жыл бұрын

@@RedStapler_channel yes thank you!👍

@fabrizioamelotti7922 4 жыл бұрын

Your channel is superb! Just continue on this way! Thanks for the video.

@adamprogrammertech6116 4 жыл бұрын

thank you very much, love from nigeria, have been looking for this

@GivanildoOliveira86 2 ай бұрын

Thank you, thank you, thank you!!!

@XxMrBryanxX 4 жыл бұрын

Thanks so much for the tutorial! You made it easy! It was a bit tough figuring out in bootstrap

@cristianmetz9470 2 жыл бұрын

Thanks a milli needed this!

@chowooizy1348 Жыл бұрын

thank you so much, this is really helping and easy to understand

@PeterFelis 4 жыл бұрын

Thank you so much! This works as a dream

@RaviKumar-lp9zd 4 жыл бұрын

Thank you so much for this design. This design will be part of my new web page design...

@jasthakker648 3 жыл бұрын

Great tutorial👍🏻 straight to the point

@Rafael-Bravo 3 жыл бұрын

Gotta say it... thank you VERY MUCH!

@johnnybravo34 4 жыл бұрын

love your channel bro from INDIA

@chewingwildflower 2 жыл бұрын

Very helpful! Thank you so much!!

@shreyjain3562 4 жыл бұрын

Thank you very much for this video, looking for this solution.

@hannahwhitham3539 4 жыл бұрын

This helped me so much. Thankyou!

@nanthuarumugam 3 жыл бұрын

Thanks a lot for posting this video

@dfcw 4 жыл бұрын

Amazing video never knew how this was done, now I know!

@messedup7877 4 жыл бұрын

Wow! This Is A Great Educative Video

@jabransaeed6155 3 жыл бұрын

bro this is gold

@sanaeareina5371 Жыл бұрын

Thank you so much

@MeggynQa88 3 жыл бұрын

Thank you! This is so awesome

@yousrname 4 жыл бұрын

This is really helpful. Thanks for sharing.

@abhaykumargupta4217 4 жыл бұрын

Thanks so much for the tutorial.

@arielzelayasv 4 жыл бұрын

Cool, i will use it on my next project! Thanks a lot.

@MohsinKhan-rj6ll 3 жыл бұрын

Thankyou so much bro it help me alot

@JaberAhmed4770 2 жыл бұрын

Thank you so much!

@hazhohuman 2 ай бұрын

what about the external SVG files, to be used as clip-path of the elements while the size of the element unknown and still the SVG applied as clip-path, to be in the boundaries of the elements applied on

@syberiaok 2 жыл бұрын

Thanks so much!!it really helped me!! :))

@An-yh2bl 2 жыл бұрын

It looks sooo cool! :)

@gerardosilva8221 2 жыл бұрын

excelent!! thanks you for the content :D

@tarikulislambhuiyan8938 4 жыл бұрын

Hi, when i run the source code provided in the description, only half of content can be seen, the bottom curve overflows and hidden as you put overflow:hidden. if i set auto then i have to scroll to bottom to see the full content. The whole content is not taking the browser's height How can i solve this?

@msvmanikantasrivishnu7788 4 жыл бұрын

You are simply great...💛

@Allinone-ll7ms 2 жыл бұрын

Gud bro very informative tutorial.. love you

@mateuszabramek7015 4 жыл бұрын

Nice effect, but to be precise div shape didn't changed. CSS clip-path could change it, but it would be spikey.

@RedStapler_channel 4 жыл бұрын

the problem with clip-path is it also clip the content, making it difficult to design :(

@mateuszabramek7015 4 жыл бұрын

@@RedStapler_channel let's say user have to click something, just beyond edge of this svg shape - how would you do that? pointer-events:none for whole div? Edit: I had to make once nav menu of such fancy shape, if I remember well I've made it frome pure svg, no div.

@urbangaming7334 Жыл бұрын

But the stapler is white

@tobijudah 4 жыл бұрын

thank you so much for this video

@craiggazimbi 2 жыл бұрын

Thank you

@MarkOhanesian 4 жыл бұрын

This is so easy to understand thank you!

@rossthemusicandguitarteacher 4 жыл бұрын

Much love

@romimaximus 4 жыл бұрын

That was awesome !!.. thank you for this great tutorial..!!

@priyaranjan1733 4 жыл бұрын

Thank you #RedStapler!😘

@Robert-gr1cl Жыл бұрын

there is a white line between the two svgs.. what can i do to remove it? nothing works

@alanrush1381 2 жыл бұрын

What do you think would be the best way to draw a donut shaped div? Like an element that has all the properties of a normal div e.g. hoverable and can have eventlisteners added to it?

@rdz1319 4 жыл бұрын

Wau, la verdad es que si me ayudo mucho, Thanks

@welt101 4 жыл бұрын

Nice!

@proteus1 2 жыл бұрын

It's a white Stapler though...on a red backdrop.

@mertma52 3 жыл бұрын

thank you so much :D

@OmarAli-mc7ri 2 жыл бұрын

thanks

@user-vd1wk5tu1w Жыл бұрын

isnt'it a white stapler of background having red.

@wgm247 4 жыл бұрын

Good work keep it up!! :)

@anaturuchii1389 2 жыл бұрын

Thank you for this. Can the white part be removed?

@YouGG 2 жыл бұрын

I've changed the height of the div curved, but the svg block stay still, it doesn't move down to the end of the div and it makes a HUGE bottom line, can you help me?

@bharathirv8479 4 жыл бұрын

Awesome

@kinglytical Жыл бұрын

can i add more height to the gradient and how i do it

@user-eo3bs3dz3f 9 ай бұрын

is there no way to put the path in css? ive been doing it in css with simple shapes, but id like to make a shield shape

@darioantonioli576 4 жыл бұрын

Smart approach! With your method! Could I add also gradient curved shape?

@jamesdavis4071 4 жыл бұрын

oh, it's fun!

@diveruzumaki5556 3 жыл бұрын

what if I want to have a wavy design on the right side? Thanks

@clockshield 3 жыл бұрын

do you kno anyway that you can make a gradient as the color?

@jos3008 2 жыл бұрын

Sir there is line on the bottom of it, i did change to 320 to 319 but i still remains, please helpp

@alirezak5870 2 жыл бұрын

you rock

@penge.shanghai 3 жыл бұрын

Wow 💯

@mahakal76 4 жыл бұрын

love your voice

@CSCoreDecoded 3 жыл бұрын

what's ur mic name or link of buying it plz and thanks for this awesome tutorial

@ibadshaikh2215 4 жыл бұрын

Thanks alot..Please share the tools link in the description.

@luckybairagi7294 2 жыл бұрын

I clicked on this video and the advertisement I got was "I'm in love with the shape of you" song 😑😑

@DeepShahmusic 4 жыл бұрын

Which website did you use for creating that svg

@aadhavanav7160 2 жыл бұрын

Can you also send the link for the SVG Path generator? Thank you so much.

@ThatGuy-xu8ml 3 жыл бұрын

Which software are u using ?

@salinabail4295 3 жыл бұрын

How can we do that on Shopify ?

@geoffreycoste1792 4 жыл бұрын

Many thanks for this video. I have a problem with the upper curve under Firefox: i.e. the bottom line is still appearing even after changing the last viewbox value. Would you have a solution to this problem? Many thanks in advance.

@goofy7791 2 жыл бұрын

Did you put your svg as "display: block"? I was having the same problem, but it was because I forgot about the display.

@rawrsophiex 2 жыл бұрын

@@goofy7791 youre the bESTTTT

@sondejqka7590 3 жыл бұрын

3:38 what if this line still appears after this? :/

@kaerit8453 3 жыл бұрын

Is there a way to import a .svg file into a tag, and apply a background-image with css?

@samuelmatheson9655 3 жыл бұрын

Yes

@samuelmatheson9655 3 жыл бұрын

just use src="kaerits file.svg"

@kaerit8453 3 жыл бұрын

@@samuelmatheson9655 thanks i'll try it

@manjunathjadhav3062 4 жыл бұрын

How to reduce height if I want to?

@RedStapler_channel 4 жыл бұрын

set new height when generating svg

@THATEasycodes 4 ай бұрын

❤😊

@geofdevore 4 жыл бұрын

what program are you using?

@RedStapler_channel 4 жыл бұрын

vscode

@geofdevore 4 жыл бұрын

Thank you

@mostafamahmud378 4 жыл бұрын

Thank you for this tutorial, what theme are you using in vs? it's just awesome and clean.

@RedStapler_channel 4 жыл бұрын

default theme. I just increased the font size.

@mostafamahmud378 4 жыл бұрын

@@RedStapler_channel Thank you and keep teach us;)

@blaaaaaTWATaaaaaaab 4 жыл бұрын

Your stapler is definitely white

@flokissn9987 3 жыл бұрын

you are funny

@dermenschistweilesglaubtda41 2 жыл бұрын

i selled this to a customer for 100 €

@ndehngwa910 3 жыл бұрын

thanks

@ajaylingayat2810 4 жыл бұрын

Thank you

@nikoman71326 3 жыл бұрын

cannot remove white space around svg. This issue is only visible on mobile. svg display is set to block, margin:0. What else could be done?