Тёмный

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

Kevin Powell
Подписаться 902 тыс.
Просмотров 77 тыс.
50% 1

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell03211
Shape-outside is such an awesome CSS property, and it brings floats back to relevance!
ℹ More information: developer.mozilla.org/en-US/d...
💻 Browser support: caniuse.com/?search=shape-out...
⌚ Timestamps
00:00 - Introduction
00:29 - Floating and creating a circle with shape-outside
01:53 - shape-margin
02:14 - shape-outside devtool
04:27 - Ellipse and polygons
08:27 - shape-outside based on an image
10:26 - flow-root
This video was sponsored by Skillshare
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

 

2 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 138   
@KevinPowell
@KevinPowell 3 года назад
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell03211
@kuntaldas2843
@kuntaldas2843 3 года назад
what the... Kevin using time machine
@rohitbisht5457
@rohitbisht5457 3 года назад
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
@FieryHammer
@FieryHammer 3 года назад
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 :)
@Morrile1
@Morrile1 3 года назад
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 :-)))
@scheimong
@scheimong 3 года назад
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.
@marcod.643
@marcod.643 3 года назад
Interesting video as always and... nice T-Shirt 🤣🤣🤣
@KevinPowell
@KevinPowell 3 года назад
Thanks! 😁
@VladimirJanjic02
@VladimirJanjic02 3 года назад
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! :)
@guillermoandradaFSD
@guillermoandradaFSD 3 года назад
The most desirable content I found on the Internet about this subject. Thanks Kev for teaching like that.
@harishst202
@harishst202 3 года назад
Awesome as always! Thanks for sharing!
@shivanshshalabh
@shivanshshalabh 3 года назад
I was just going to search for a video on this topic. Thanks a lot for putting up this video 'CSS KING'
@celeis100
@celeis100 2 года назад
This has definitely made my portfolio better looking, thank you so much!
@cintron3d
@cintron3d 3 года назад
Ok that url trick is dope. Many thanks for sharing all these tips!
@timbittins8253
@timbittins8253 3 года назад
Wonderful! Now I can wrap text around images like I wrap my head around CSS. Thanks Mr. P!
@djordjek3916
@djordjek3916 3 года назад
Thank you very much for everything you do Kevin. I always learn something new from watching your videos. Liked.
@tessamactaggart5822
@tessamactaggart5822 2 года назад
Just wow.. and so well explained! Thank you.
@anb1142
@anb1142 3 года назад
I've been stuck at this problem for hours You're a godsend
@jsthaut
@jsthaut 3 года назад
Thank you so much you don't know how much i needed this tutorial
@jahwni
@jahwni 3 года назад
Awesome, such useful videos, cheers mate!
@Ghostie1
@Ghostie1 3 года назад
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
@thevonmunchies9213
@thevonmunchies9213 Год назад
Super useful! Thank you!
@MyIreallydontcare
@MyIreallydontcare 3 года назад
Kevin, I bloody love your videos.
@SouravTechLabs
@SouravTechLabs 2 месяца назад
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!
@maelstrom57
@maelstrom57 3 года назад
I'm so using on my next project, thanks Kev
@Pfoffie
@Pfoffie 3 года назад
Thanks for float-root 🥰😍❣️
@KevinPowell
@KevinPowell 3 года назад
I just wish we had it 5+ years ago 😅
@Pfoffie
@Pfoffie 3 года назад
@@KevinPowell i so agree haha
@AlanWagoner
@AlanWagoner 3 года назад
Great video and I liked the shirt!
@sulaimandev
@sulaimandev 3 года назад
Most needed video
@AntoniKrokodyl
@AntoniKrokodyl 8 месяцев назад
Great video, love the t shirt.
@sirjohn2924
@sirjohn2924 3 года назад
Vaov!!, it was very interesting to learn that, Thanks Kevin
@techtipsuk
@techtipsuk 3 года назад
Flow root, you learn something new every day
@harshjain8345
@harshjain8345 3 года назад
Wow...great And unique css property..🙌🙌
@Miguelskytwins
@Miguelskytwins Год назад
THANK YOU!
@joandmello660
@joandmello660 3 года назад
You are simply awesome Kevin
@KevinPowell
@KevinPowell 3 года назад
Thanks!
@jatinkhatri9650
@jatinkhatri9650 Год назад
struggling for this thing for one day. Thanks a lot. You made my day.😇
@ahmadhassan5680
@ahmadhassan5680 3 года назад
thank you kevin.
@mikep7547
@mikep7547 3 года назад
Excellent video.
@davispeixoto
@davispeixoto 3 года назад
This is awesome! Thanks
@harounach
@harounach 3 года назад
Thanks Kevin this is pretty awesome
@KevinPowell
@KevinPowell 3 года назад
Thanks, glad you enjoyed it :D
@wolfenrico
@wolfenrico 5 месяцев назад
This is great!!!! Thanks!
@MohammadAbdulHyeShaon
@MohammadAbdulHyeShaon 3 года назад
Awesome....Go Ahead
@ari_archer
@ari_archer 3 года назад
this content is underrated
@jenniferward6821
@jenniferward6821 3 года назад
my hero
@Astras-Stargate
@Astras-Stargate 3 года назад
Thanks Kevin!
@KevinPowell
@KevinPowell 3 года назад
You're welcome 😊
@GergelyCsermely
@GergelyCsermely 3 года назад
Thank You!
@KevinPowell
@KevinPowell 3 года назад
Glad you enjoyed it!
@DenisTRUFFAUT
@DenisTRUFFAUT Год назад
Awesome !
@franciscomagalhaes7457
@franciscomagalhaes7457 3 года назад
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!
@travezripley
@travezripley 3 года назад
Thank kev!!
@ortania
@ortania 3 года назад
By the way, In Chrome there is CSS Shapes Editor extension for dev tools, that works in a similar way as in Firefox
@ahsath
@ahsath 3 года назад
That's new, I remember a while ago I wanted the create a wave couldn't do it, but with path() oh boy
@vishsingh7235
@vishsingh7235 3 года назад
OMG Kevin. I need that shirt!
@peteharrison3241
@peteharrison3241 3 месяца назад
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 ?
@manthkumar1094
@manthkumar1094 3 года назад
really amazing video.
@abdelmonemnaceur7776
@abdelmonemnaceur7776 3 года назад
Who else is waiting for new videos notifications from Kevin's channel! Interesting :D!
@yupii1997
@yupii1997 3 года назад
Educational and great video as always Kevin as a self thaught(still learning) developer your videos help me so much
@BigBadTubaDudeCRA
@BigBadTubaDudeCRA 2 года назад
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!
@snakemanluffy7645
@snakemanluffy7645 3 года назад
wow cool property :D
@rkd-me
@rkd-me 3 года назад
Woah, didnt know about flow root, would use clearfix instead, thanks!
@iiviigames
@iiviigames 2 года назад
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.
@Beat0X
@Beat0X 3 года назад
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
@KeyObserver1
@KeyObserver1 8 месяцев назад
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?
@shayanfaghihi
@shayanfaghihi 3 года назад
You are amazing Kevin. What's the application you use for recording your desktop?
@isarasoo1
@isarasoo1 2 года назад
I stumbled across this after pondering how to do something similar with images
@rathernotdisclose8064
@rathernotdisclose8064 3 года назад
Awesome
@KevinPowell
@KevinPowell 3 года назад
Glad you enjoyed it
@Mathemarius
@Mathemarius 3 года назад
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).
@js-swift
@js-swift 3 года назад
Thanks a lot Sir because you always update me to become better in css 🍔 🍔 🍔 🍔 🍔
@pallavisinghchandansingh9203
@pallavisinghchandansingh9203 2 года назад
Thank you very much sir I am a child and you really helped me
@chhavimanichoubey9437
@chhavimanichoubey9437 3 года назад
woah latest magic tricks
@GlennPhilp
@GlennPhilp 3 года назад
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.
@tomvoltz7506
@tomvoltz7506 3 года назад
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
@utkarshagrawal3640
@utkarshagrawal3640 3 года назад
According to u what is the best way of showing a drop-down list ??
@JamesCoyle95
@JamesCoyle95 3 года назад
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?
@craigmillerer
@craigmillerer 3 года назад
Can you animate/transition shape-outside?
@dankierson
@dankierson 3 года назад
Floats without clearfix, welcome aboard!
@ayoreis
@ayoreis 3 года назад
Ha ha ha 😀 I use that plant image as my desktop background.
@huaweitrainingsafrica3742
@huaweitrainingsafrica3742 7 месяцев назад
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.
@janemig
@janemig 2 года назад
Hi Kevin, Does it only work with webp images? I'm using a png with a transparent bkgd but it's not working. Thanks!
@pijusmilinis2260
@pijusmilinis2260 3 года назад
Any idea, why shape-outside is not working particularly on chrome if the text has a property of display flex?
@aminedev_07
@aminedev_07 3 года назад
hey! i hope the next video would be designing a thumbnail with css
@KevinPowell
@KevinPowell 3 года назад
Like my YT thumbnails? I still use Photoshop for that 😅
@aminedev_07
@aminedev_07 3 года назад
@@KevinPowell ik just like a new idea or smth
@techtipsuk
@techtipsuk 3 года назад
Could just add some white space in your image to get around that constrain.
@francescotagliavento8081
@francescotagliavento8081 3 года назад
when are you going to do a video about positing?
@joaomatos1144
@joaomatos1144 3 года назад
API by Day IPA by Night hahah, nice once!
@JasonBurnettsProfile
@JasonBurnettsProfile 2 года назад
Can you only do this with image elements or could you use the shape features to wrap around, say a headline?
@KevinPowell
@KevinPowell 2 года назад
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.
@kuntaldas2843
@kuntaldas2843 3 года назад
totally forgot "float" still exists
@dankierson
@dankierson 3 года назад
Try making a price list without float.
@dufaktora
@dufaktora 3 года назад
@@dankierson What do you mean? It should be achievable with flex or grid
@dankierson
@dankierson 3 года назад
@@dufaktora 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.
@mohammadnoushadsiddiqui4786
@mohammadnoushadsiddiqui4786 3 года назад
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
@KevinPowell 3 года назад
What are you using to compile the Sass? I've never run into an issue myself.
@mohammadnoushadsiddiqui4786
@mohammadnoushadsiddiqui4786 3 года назад
@@KevinPowell live Sass compiler extension sir after the latest update of vs I encountered this problem sir 😅
@saadamehdi2848
@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
@haythamkenway1561
@haythamkenway1561 3 года назад
Hey Kevin do you have tutorial about API ?
@KevinPowell
@KevinPowell 3 года назад
No, I don't. Anything specific you're after? There is one on FreeCodeCamp's channel that is awesome.
@haythamkenway1561
@haythamkenway1561 3 года назад
@@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?
@thedacian123
@thedacian123 2 года назад
Why you did not get rid of 'float:left'?
@Ostap1974
@Ostap1974 3 года назад
interesting that it includes margin in the playground.
@KevinPowell
@KevinPowell 3 года назад
I was pleasantly surprised when I discovered that :)
@somnvm37
@somnvm37 3 года назад
0:57 soup image, of a lemon, right?
@KevinPowell
@KevinPowell 3 года назад
Pretty sure it's some soup :)
@JOEL-nn8fk
@JOEL-nn8fk 2 года назад
Can't seem to get the shape-outside: url('path'); to work -- it still wraps like an old school float. Help....
@arunsp767
@arunsp767 3 года назад
So shape-outside works only inside?
@ColinPittendrigh
@ColinPittendrigh 3 года назад
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.
@marcindomanski5654
@marcindomanski5654 3 года назад
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
@MR-su4di 3 года назад
I wonder if simply just passing the clipped image to shape-outside url won't do the work?
@KevinPowell
@KevinPowell 3 года назад
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.
@itzikca
@itzikca 3 года назад
You dont have that in chrome (the visualization thing) ? Because i usually develop in chrome...
@KevinPowell
@KevinPowell 3 года назад
I'd strongly suggest Firefox for CSS work. Much better dev tools when it comes to CSS.
@98toxic1
@98toxic1 3 года назад
Where can I buy that shirt?
@KevinPowell
@KevinPowell 3 года назад
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 :)
@r-i-ch
@r-i-ch 3 года назад
I always wonder why you don't use clip-paths/shapes in your CSS Battles.
@KevinPowell
@KevinPowell 3 года назад
Writing them out and getting the right shape in under 10 minutes wouldn't work well for me 😅
@anb1142
@anb1142 3 года назад
What's "IPA"
@chang112x
@chang112x 3 года назад
This is black magick.
@RishavPlayz2007
@RishavPlayz2007 3 года назад
3rd comment! 8th like! BTW super cool content 😊😄🤗
@johndelilo6038
@johndelilo6038 3 года назад
1st comment
@rannyarcher29
@rannyarcher29 3 года назад
plz we want how to put a border to inormal shapes 😄😄
@ayoreis
@ayoreis 3 года назад
Use a filter whit the drop-shadow() CSS function whit no blur and spread
@josvelema2362
@josvelema2362 3 года назад
@@ayoreis nice one 1 combined it with a box shadow and turned a div into a neon sign :O :D
@DevTeacher
@DevTeacher 3 года назад
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 RU-vid ? Let’s teach new developers that correct way of doing things and not use wrong definitions just because CSS don’t care. Cheers
@techtipsuk
@techtipsuk 3 года назад
Nowt wrong with floats when used as intended.
Далее
Front-end dev reacts to mind-blowing Codepens
21:25
Просмотров 2,1 млн
23 CSS features you should know (and be using) by now
31:31
угловой редуктор на пальцах
00:28
5 CSS mistakes that I see way too often
19:03
Просмотров 358 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 868 тыс.
Are you using the right CSS units?
6:30
Просмотров 436 тыс.
10 modern layouts in 1 line of CSS
21:39
Просмотров 1,1 млн
Animate nav on scroll - CSS-only & easy to customize
26:52
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 385 тыс.
You are doing :focus wrong (and I was too)
13:24
Просмотров 154 тыс.