A very nice video sir u r the best. A quick request, can u make a video about a parent div element who is smaller in size compare to its child div element and has overflow hidden . And the objective is to have a moving animation of parent div over its child div without moving its child div during animation Thank you
Whilst this is something I don't think I would use (yet) it does highlight that web designing is very fluid and ever changing. Many thanks Kevin for the Skillshare Premium membership :-)))
I have found your channel during the weekend and I am watching since. I could already use some stuff you show in your videos and have marked a lot to see later. I have also added your course on my ToDo list. You are one of the few people who make me understand CSS and be actually excited about doing things with it :)
Love it. Wish I had known about it when I was writing code for my custom multi-line ellipsis. I had so much trouble that I eventually gave up. This auto-wrap trick would basically make that trivial.
It annoys me how much I have to question the amount I know about CSS after watching every one of your videos!! Thanks for this, added to my snippet catalogue
Great tip, watched this 2 years back, but using it now! The real challenge however comes when the image, in my case it's a doughnut chart from vue-chart, needs to be in the middle!
I started so far with videos and i am going to watch every video u made in last month also, so far i can say you are getting better and better and your content is much better every time, so i am glad u are making progress and continue like that, big support for you work! :)
This blew my mind . I'm making a website for Basics of Web Development class and it's a presidential campaign page for Saitama from one punch man. I wrapped the bio text around OPM and my teacher said he didn't know how I did that so it blew his mind too!
Hey Kevin, if you made a lil demo exemplifying how to draw a path (maybe in figma) and tie it to an image to get this effect, maintaining responsiveness, that would be really valuable. Thanks a bunch for the great tidbits you keep offering without all the "You need to know this to be a web developer" clickbait!
Great tutorial Kevin, thanks. I found this example of creating hexagon/polygon grids, can you use similar techniques you've used to wrap text around the image to shape text inside the hexagons ?
@Danny Kirkham One with varying amounts of periods between each item and its price, with the prices all aligned in one vertical line like here www.speediwash.ie/prices.html ? If you have a link to an example of this, please provide it.
What you do so well--that other css hot rods do not--is illustrate the normal intuitive thought process, illustrating likely pitfalls along the way. That way the reader (the viewer) gets the long context WHY rather than a short but complex and inexplicable HOW.
Which IDE is best for html css and JS right now m using vs code m thinking to switch to webstorm coz vs code lags sometime when there is lot of Sass files there
Hi Kevin, I have a multicolumn p-tag (margin: 0 auto; column-width: 20em;) Unfortunately wrapping the text on a circular image won't work with that. Is there a work around? Thanks
Hello Kevin. Your video is really helpful. I have managed to use the "shape-outside: circle ();" command in my CSS file on Notepad. However, when I used the "shape-outside: url();" command, nothing changed, that is, my text is still not wrapping around my irregular image. Any suggestions?
How would you go about implementing this for a CMS? The struggle is to implement something like this requires developer skills as each image can be different in size and shape. For developer pages it is fun and relatively easy.
Is there a maximum number of lines of text for this to work as I managed to get one to float right with shape but when I try to float left it either does nothing or just move the subsequent lines of text away. Any idea as to why this is?
Pretty sure it only works with images that have transparency. You can do it with SVGs as well, or provide it with a different clip path, say, based on an SVG, so you could simulate it for text, but seems like a lot of work.
First of all, your content is great and you are making it very easy to understand the main concept of subject that you are showing. But I can’t get my old and grumpy dev head around that your are using class on all html element and don’t use ID on single / unique elements. Is it just being lazy or a bad habit that I see more and more devs user here on UA-cam ? Let’s teach new developers that correct way of doing things and not use wrong definitions just because CSS don’t care. Cheers
@@KevinPowell I was looking for some API Lesson because I heard just front end and html , css , js , etc ... is not enough. some people told me that I must learn about something like RestAPI. what do you think about that? is it real?
For this to work, I think the image has to be the first child. I was working with a design that required the image to be second child (that is after the text) and wasn't working. Until I moved the image before the text. Then gave my image "float:right;" style. If anyone has an alternative workaround, please help. DISCLAIMER; I am not really good with floats.
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell03211
what the... Kevin using time machine
A very nice video sir u r the best. A quick request, can u make a video about a parent div element who is smaller in size compare to its child div element and has overflow hidden . And the objective is to have a moving animation of parent div over its child div without moving its child div during animation
Thank you
Interesting video as always and... nice T-Shirt 🤣🤣🤣
Thanks! 😁
Whilst this is something I don't think I would use (yet) it does highlight that web designing is very fluid and ever changing. Many thanks Kevin for the Skillshare Premium membership :-)))
I have found your channel during the weekend and I am watching since. I could already use some stuff you show in your videos and have marked a lot to see later. I have also added your course on my ToDo list. You are one of the few people who make me understand CSS and be actually excited about doing things with it :)
Love it. Wish I had known about it when I was writing code for my custom multi-line ellipsis. I had so much trouble that I eventually gave up. This auto-wrap trick would basically make that trivial.
I was just going to search for a video on this topic. Thanks a lot for putting up this video 'CSS KING'
The most desirable content I found on the Internet about this subject. Thanks Kev for teaching like that.
Ok that url trick is dope. Many thanks for sharing all these tips!
Wonderful! Now I can wrap text around images like I wrap my head around CSS. Thanks Mr. P!
Awesome as always! Thanks for sharing!
It annoys me how much I have to question the amount I know about CSS after watching every one of your videos!! Thanks for this, added to my snippet catalogue
Flow root, you learn something new every day
Thanks for float-root 🥰😍❣️
I just wish we had it 5+ years ago 😅
@@KevinPowell i so agree haha
You are simply awesome Kevin
Thanks!
Thanks Kevin this is pretty awesome
Thanks, glad you enjoyed it :D
Most needed video
Thank you very much for everything you do Kevin. I always learn something new from watching your videos. Liked.
Great tip, watched this 2 years back, but using it now! The real challenge however comes when the image, in my case it's a doughnut chart from vue-chart, needs to be in the middle!
I've been stuck at this problem for hours
You're a godsend
I started so far with videos and i am going to watch every video u made in last month also, so far i can say you are getting better and better and your content is much better every time, so i am glad u are making progress and continue like that, big support for you work! :)
Thank you so much you don't know how much i needed this tutorial
Kevin, I bloody love your videos.
Wow...great And unique css property..🙌🙌
This has definitely made my portfolio better looking, thank you so much!
Awesome, such useful videos, cheers mate!
Thank You!
Glad you enjoyed it!
Thanks, this is just what I needed.
Great video and I liked the shirt!
Who else is waiting for new videos notifications from Kevin's channel! Interesting :D!
By the way, In Chrome there is CSS Shapes Editor extension for dev tools, that works in a similar way as in Firefox
Vaov!!, it was very interesting to learn that, Thanks Kevin
Great t-shirt and great video! 👏
struggling for this thing for one day. Thanks a lot. You made my day.😇
Just wow.. and so well explained! Thank you.
That's new, I remember a while ago I wanted the create a wave couldn't do it, but with path() oh boy
This blew my mind . I'm making a website for Basics of Web Development class and it's a presidential campaign page for Saitama from one punch man. I wrapped the bio text around OPM and my teacher said he didn't know how I did that so it blew his mind too!
Educational and great video as always Kevin as a self thaught(still learning) developer your videos help me so much
If I had watched this when I woke up this morning, I would have saved myself 10 hours of rage and I'd still have a 2 monitor setup.
I'm so using on my next project, thanks Kev
Super useful! Thank you!
Awesome....Go Ahead
this content is underrated
Hey Kevin, if you made a lil demo exemplifying how to draw a path (maybe in figma) and tie it to an image to get this effect, maintaining responsiveness, that would be really valuable. Thanks a bunch for the great tidbits you keep offering without all the "You need to know this to be a web developer" clickbait!
OMG Kevin. I need that shirt!
thank you kevin.
Thanks Kevin!
You're welcome 😊
Great video, love the t shirt.
Great tutorial Kevin, thanks. I found this example of creating hexagon/polygon grids, can you use similar techniques you've used to wrap text around the image to shape text inside the hexagons ?
This is awesome! Thanks
Amazing! Thank you!
You're welcome 😊
5:42 The reason why this wasn't working as you expected is that you put all points on the diagonal (same x and y value).
my hero
This is great!!!! Thanks!
Awesome !
You are amazing Kevin. What's the application you use for recording your desktop?
I stumbled across this after pondering how to do something similar with images
totally forgot "float" still exists
Try making a price list without float.
@Danny Kirkham One with varying amounts of periods between each item and its price, with the prices all aligned in one vertical line like here www.speediwash.ie/prices.html ? If you have a link to an example of this, please provide it.
You can see the shape-outside of url type in chrome devtools ça simply hovering over the element that has the property in the elements tab
really amazing video.
Thanks a lot Sir because you always update me to become better in css 🍔 🍔 🍔 🍔 🍔
Thank kev!!
With your last example, if the text is taller than the image, how do you get the image to stick to the bottom right of the container?
Woah, didnt know about flow root, would use clearfix instead, thanks!
wow cool property :D
Ha ha ha 😀
I use that plant image as my desktop background.
Thank you very much sir I am a child and you really helped me
Floats without clearfix, welcome aboard!
According to u what is the best way of showing a drop-down list ??
hey! i hope the next video would be designing a thumbnail with css
Like my YT thumbnails? I still use Photoshop for that 😅
@@KevinPowell ik just like a new idea or smth
woah latest magic tricks
Awesome
Glad you enjoyed it
API by Day
IPA by Night
hahah, nice once!
Can you animate/transition shape-outside?
interesting that it includes margin in the playground.
I was pleasantly surprised when I discovered that :)
0:57 soup image, of a lemon, right?
Pretty sure it's some soup :)
when are you going to do a video about positing?
What you do so well--that other css hot rods do not--is illustrate the normal intuitive thought process, illustrating likely pitfalls along the way. That way the reader (the viewer) gets the long context WHY rather than a short but complex and inexplicable HOW.
Could just add some white space in your image to get around that constrain.
Why you did not get rid of 'float:left'?
Any idea, why shape-outside is not working particularly on chrome if the text has a property of display flex?
Which IDE is best for html css and JS right now m using vs code m thinking to switch to webstorm coz vs code lags sometime when there is lot of Sass files there
What are you using to compile the Sass? I've never run into an issue myself.
@@KevinPowell live Sass compiler extension sir after the latest update of vs I encountered this problem sir 😅
Can't seem to get the shape-outside: url('path'); to work -- it still wraps like an old school float. Help....
Hi Kevin, I have a multicolumn p-tag (margin: 0 auto; column-width: 20em;) Unfortunately wrapping the text on a circular image won't work with that. Is there a work around? Thanks
There's a big issue. How does this work witih a figure element (I need figcaptions) ? It doesn't... shape-outside only applies to img
Hello Kevin. Your video is really helpful. I have managed to use the "shape-outside: circle ();" command in my CSS file on Notepad. However, when I used the "shape-outside: url();" command, nothing changed, that is, my text is still not wrapping around my irregular image. Any suggestions?
Hi Kevin, Does it only work with webp images? I'm using a png with a transparent bkgd but it's not working. Thanks!
So shape-outside works only inside?
I always wonder why you don't use clip-paths/shapes in your CSS Battles.
Writing them out and getting the right shape in under 10 minutes wouldn't work well for me 😅
How would you go about implementing this for a CMS? The struggle is to implement something like this requires developer skills as each image can be different in size and shape. For developer pages it is fun and relatively easy.
This is black magick.
Is there a maximum number of lines of text for this to work as I managed to get one to float right with shape but when I try to float left it either does nothing or just move the subsequent lines of text away. Any idea as to why this is?
Where can I buy that shirt?
The store I bought it from has closed sadly, but if you do a search for it, it looks like it's all over the place anyway :)
Sorcery! great stuff just don't use IE .. no support according to caniuse.
Can you only do this with image elements or could you use the shape features to wrap around, say a headline?
Pretty sure it only works with images that have transparency. You can do it with SVGs as well, or provide it with a different clip path, say, based on an SVG, so you could simulate it for text, but seems like a lot of work.
First of all, your content is great and you are making it very easy to understand the main concept of subject that you are showing. But I can’t get my old and grumpy dev head around that your are using class on all html element and don’t use ID on single / unique elements. Is it just being lazy or a bad habit that I see more and more devs user here on UA-cam ?
Let’s teach new developers that correct way of doing things and not use wrong definitions just because CSS don’t care.
Cheers
Hey Kevin do you have tutorial about API ?
No, I don't. Anything specific you're after? There is one on FreeCodeCamp's channel that is awesome.
@@KevinPowell I was looking for some API Lesson because I heard just front end and html , css , js , etc ... is not enough.
some people told me that I must learn about something like RestAPI.
what do you think about that? is it real?
You dont have that in chrome (the visualization thing) ? Because i usually develop in chrome...
I'd strongly suggest Firefox for CSS work. Much better dev tools when it comes to CSS.
plz we want how to put a border to inormal shapes 😄😄
Use a filter whit the drop-shadow() CSS function whit no blur and spread
@@ayoreis nice one 1 combined it with a box shadow and turned a div into a neon sign :O :D
For this to work, I think the image has to be the first child. I was working with a design that required the image to be second child (that is after the text) and wasn't working. Until I moved the image before the text. Then gave my image "float:right;" style. If anyone has an alternative workaround, please help. DISCLAIMER; I am not really good with floats.
What's "IPA"