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 :-)))
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 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 :)
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
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! :)
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!
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 ?
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
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?
@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.
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, 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
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.
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.
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 about situation, when I have one image with bg and other with transparent bg, and i want use this transparent image for create clip shape? Shoul I create this transparent image with area filled with 0.00001 alpha?
it wouldn't need an alpha at all? Or, don't put it as a background image? If you float the image, but then have the shape-outside url to the other one, it'll follow it's path, even on the other image.
@@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?
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.
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
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 :-)))
Interesting video as always and... nice T-Shirt 🤣🤣🤣
Thanks! 😁
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.
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 :)
Ok that url trick is dope. Many thanks for sharing all these tips!
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
Wonderful! Now I can wrap text around images like I wrap my head around CSS. Thanks Mr. P!
Awesome as always! Thanks for sharing!
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! :)
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!
Thank you very much for everything you do Kevin. I always learn something new from watching your videos. Liked.
Thanks Kevin this is pretty awesome
Thanks, glad you enjoyed it :D
Flow root, you learn something new every day
I've been stuck at this problem for hours
You're a godsend
Thanks for float-root 🥰😍❣️
I just wish we had it 5+ years ago 😅
@@KevinPowell i so agree haha
By the way, In Chrome there is CSS Shapes Editor extension for dev tools, that works in a similar way as in Firefox
Thank you so much you don't know how much i needed this tutorial
Awesome, such useful videos, cheers mate!
You are simply awesome Kevin
Thanks!
Kevin, I bloody love your videos.
This has definitely made my portfolio better looking, thank you so much!
Wow...great And unique css property..🙌🙌
Great video and I liked the shirt!
struggling for this thing for one day. Thanks a lot. You made my day.😇
Who else is waiting for new videos notifications from Kevin's channel! Interesting :D!
Vaov!!, it was very interesting to learn that, Thanks Kevin
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).
Great t-shirt and great video! 👏
Most needed video
Thanks, this is just what I needed.
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
Just wow.. and so well explained! Thank you.
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.
That's new, I remember a while ago I wanted the create a wave couldn't do it, but with path() oh boy
Super useful! Thank you!
Awesome....Go Ahead
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!
Thank You!
Glad you enjoyed it!
Great video, love the t shirt.
I'm so using on my next project, thanks Kev
this content is underrated
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
OMG Kevin. I need that shirt!
thank you kevin.
my hero
Thanks Kevin!
You're welcome 😊
This is awesome! Thanks
According to u what is the best way of showing a drop-down list ??
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 ?
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?
This is great!!!! Thanks!
Amazing! Thank you!
You're welcome 😊
0:57 soup image, of a lemon, right?
Pretty sure it's some soup :)
Awesome !
Thanks a lot Sir because you always update me to become better in css 🍔 🍔 🍔 🍔 🍔
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....
Woah, didnt know about flow root, would use clearfix instead, thanks!
Can you animate/transition shape-outside?
wow cool property :D
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?
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
I stumbled across this after pondering how to do something similar with images
You are amazing Kevin. What's the application you use for recording your desktop?
Any idea, why shape-outside is not working particularly on chrome if the text has a property of display flex?
really amazing video.
Could just add some white space in your image to get around that constrain.
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.
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?
Thank kev!!
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
Why you did not get rid of 'float:left'?
when are you going to do a video about positing?
Hi Kevin, Does it only work with webp images? I'm using a png with a transparent bkgd but it's not working. Thanks!
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.
Thank you very much sir I am a child and you really helped me
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 😅
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.
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
So shape-outside works only inside?
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 :)
Awesome
Glad you enjoyed it
Floats without clearfix, welcome aboard!
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 about situation, when I have one image with bg and other with transparent bg, and i want use this transparent image for create clip shape? Shoul I create this transparent image with area filled with 0.00001 alpha?
I wonder if simply just passing the clipped image to shape-outside url won't do the work?
it wouldn't need an alpha at all? Or, don't put it as a background image? If you float the image, but then have the shape-outside url to the other one, it'll follow it's path, even on the other image.
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.
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?
Ha ha ha 😀
I use that plant image as my desktop background.
interesting that it includes margin in the playground.
I was pleasantly surprised when I discovered that :)
API by Day
IPA by Night
hahah, nice once!
Nowt wrong with floats when used as intended.
What's "IPA"
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
This is black magick.
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.