Wrap text around any image or shape that you want with shape-outside and shape-margin

[@KevinPowell]

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell03211

[@kuntaldas2843]

what the... Kevin using time machine

[@rohitbisht5457]

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

[@marcod.643]

Interesting video as always and... nice T-Shirt 🤣🤣🤣

[@KevinPowell]

Thanks! 😁

[@Morrile1]

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 :-)))

[@FieryHammer]

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 :)

[@scheimong]

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.

[@guillermoandradaFSD]

The most desirable content I found on the Internet about this subject. Thanks Kev for teaching like that.

[@shivanshshalabh]

I was just going to search for a video on this topic. Thanks a lot for putting up this video 'CSS KING'

[@JimGarns]

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

[@cintron3d]

Ok that url trick is dope. Many thanks for sharing all these tips!

[@iiviigames]

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.

[@harishst202]

Awesome as always! Thanks for sharing!

[@Pfoffie]

Thanks for float-root 🥰😍❣️

[@KevinPowell]

I just wish we had it 5+ years ago 😅

[@Pfoffie]

@@KevinPowell i so agree haha

[@VladimirJanjic02]

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! :)

[@SouravTechLabs]

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!

[@timbittins]

Wonderful! Now I can wrap text around images like I wrap my head around CSS. Thanks Mr. P!

[@anb1142]

I've been stuck at this problem for hours You're a godsend

[@harounach]

Thanks Kevin this is pretty awesome

[@KevinPowell]

Thanks, glad you enjoyed it :D

[@BigBadTubaDudeCRA]

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!

[@techtipsuk]

Flow root, you learn something new every day

[@djordjek3916]

Thank you very much for everything you do Kevin. I always learn something new from watching your videos. Liked.

[@jsthaut]

Thank you so much you don't know how much i needed this tutorial

[@MyIreallydontcare]

Kevin, I bloody love your videos.

[@sulaimandev]

Most needed video

[@joandmello660]

You are simply awesome Kevin

[@KevinPowell]

Thanks!

[@AlanWagoner]

Great video and I liked the shirt!

[@celeis100]

This has definitely made my portfolio better looking, thank you so much!

[@0xbitbybit]

Awesome, such useful videos, cheers mate!

[@jatinkhatri9650]

struggling for this thing for one day. Thanks a lot. You made my day.😇

[@abdelmonemnaceur7776]

Who else is waiting for new videos notifications from Kevin's channel! Interesting :D!

[@harshjain8345]

Wow...great And unique css property..🙌🙌

[@ortania]

By the way, In Chrome there is CSS Shapes Editor extension for dev tools, that works in a similar way as in Firefox

[@ginaGale]

Thanks, this is just what I needed.

[@GergelyCsermely]

Thank You!

[@KevinPowell]

Glad you enjoyed it!

[@galiprandi]

Great t-shirt and great video! 👏

[@peteharrison3241]

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 ?

[@sjohn2924]

Vaov!!, it was very interesting to learn that, Thanks Kevin

[@AntoniKrokodyl]

Great video, love the t shirt.

[@MohammadAbdulHyeShaon]

Awesome....Go Ahead

[@thevonmunchies9213]

Super useful! Thank you!

[@tessamactaggart5822]

Just wow.. and so well explained! Thank you.

[@ahsath]

That's new, I remember a while ago I wanted the create a wave couldn't do it, but with path() oh boy

[@Beat0X]

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

[@ari_archer]

this content is underrated

[@Mathemarius]

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).

[@yupii1997]

Educational and great video as always Kevin as a self thaught(still learning) developer your videos help me so much

[@vishsingh7235]

OMG Kevin. I need that shirt!

[@franciscomagalhaes7457]

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!

[@ahmadhassan5680]

thank you kevin.

[@maelstrom57]

I'm so using on my next project, thanks Kev

[@jenniferward6821]

my hero

[@Astras-Stargate]

Thanks Kevin!

[@KevinPowell]

You're welcome 😊

[@js-swift]

Thanks a lot Sir because you always update me to become better in css 🍔 🍔 🍔 🍔 🍔

[@davispeixoto]

This is awesome! Thanks

[@wolfenrico]

This is great!!!! Thanks!

[@shayanfaghihi]

You are amazing Kevin. What's the application you use for recording your desktop?

[@DenisTRUFFAUT]

Awesome !

[@brummyninja]

I stumbled across this after pondering how to do something similar with images

[@pandabike3826]

Amazing! Thank you!

[@KevinPowell]

You're welcome 😊

[@pallavisinghchandansingh9203]

Thank you very much sir I am a child and you really helped me

[@snakemanluffy7645]

wow cool property :D

[@rkd-me]

Woah, didnt know about flow root, would use clearfix instead, thanks!

[@utkarshagrawal3640]

According to u what is the best way of showing a drop-down list ??

[@manthkumar1094]

really amazing video.

[@travezripley]

Thank kev!!

[@MightyHuff]

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?

[@francescotagliavento8081]

when are you going to do a video about positing?

[@KeyObserver1]

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?

[@JamesCoyle95]

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?

[@chhavimanichoubey9437]

woah latest magic tricks

[@somnvm37]

0:57 soup image, of a lemon, right?

[@KevinPowell]

Pretty sure it's some soup :)

[@mohammadnoushadsiddiqui4786]

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

[@KevinPowell]

What are you using to compile the Sass? I've never run into an issue myself.

[@mohammadnoushadsiddiqui4786]

@@KevinPowell live Sass compiler extension sir after the latest update of vs I encountered this problem sir 😅

[@saadamehdi2848]

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

[@aminedev_07]

hey! i hope the next video would be designing a thumbnail with css

[@KevinPowell]

Like my YT thumbnails? I still use Photoshop for that 😅

[@aminedev_07]

@@KevinPowell ik just like a new idea or smth

[@thedacian123]

Why you did not get rid of 'float:left'?

[@nickwoodward819]

Anyone know if it's possible to do this with say 4 lines of text and have the image and text both vertically aligned?

[@r-i-ch]

I always wonder why you don't use clip-paths/shapes in your CSS Battles.

[@KevinPowell]

Writing them out and getting the right shape in under 10 minutes wouldn't work well for me 😅

[@rathernotdisclose8064]

Awesome

[@KevinPowell]

Glad you enjoyed it

[@Jaseinatl]

Can you only do this with image elements or could you use the shape features to wrap around, say a headline?

[@KevinPowell]

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.

[@craigmillerer]

Can you animate/transition shape-outside?

[@techtipsuk]

Could just add some white space in your image to get around that constrain.

[@JOEL-nn8fk]

Can't seem to get the shape-outside: url('path'); to work -- it still wraps like an old school float. Help....

[@ayoreis]

Ha ha ha 😀 I use that plant image as my desktop background.

[@GlennPhilp]

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.

[@pijusmilinis2260]

Any idea, why shape-outside is not working particularly on chrome if the text has a property of display flex?

[@tomvoltz7506]

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

[@janemig]

Hi Kevin, Does it only work with webp images? I'm using a png with a transparent bkgd but it's not working. Thanks!

[@joaomatos1144]

API by Day IPA by Night hahah, nice once!

[@itzikca]

You dont have that in chrome (the visualization thing) ? Because i usually develop in chrome...

[@KevinPowell]

I'd strongly suggest Firefox for CSS work. Much better dev tools when it comes to CSS.

[@arunsp767]

So shape-outside works only inside?

[@rannyarcher29]

plz we want how to put a border to inormal shapes 😄😄

[@ayoreis]

Use a filter whit the drop-shadow() CSS function whit no blur and spread

[@josvelema2362]

@@ayoreis nice one 1 combined it with a box shadow and turned a div into a neon sign :O :D

[@kuntaldas2843]

totally forgot "float" still exists

[@dankierson]

Try making a price list without float.

[@dankierson]

@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.

[@98toxic1]

Where can I buy that shirt?

[@KevinPowell]

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 :)

[@haythamkenway1561]

Hey Kevin do you have tutorial about API ?

[@KevinPowell]

No, I don't. Anything specific you're after? There is one on FreeCodeCamp's channel that is awesome.

[@haythamkenway1561]

@@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?

[@Ostap1974]

interesting that it includes margin in the playground.

[@KevinPowell]

I was pleasantly surprised when I discovered that :)

[@huaweitrainingsafrica3742]

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.

[@marcindomanski5654]

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?

[@MR-su4di]

I wonder if simply just passing the clipped image to shape-outside url won't do the work?

[@KevinPowell]

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.

[@anb1142]

What's "IPA"

[@dankierson]

Floats without clearfix, welcome aboard!

[@chang112x]

This is black magick.

[@RishavPlayz2007]

3rd comment! 8th like! BTW super cool content 😊😄🤗

[@johndelilo6038]

1st comment