Clip an image to text with CSS

[@WebDevSimplified]

Nice video. I actually just used this technique last week to create an animated text reveal by moving a plain colored background around my text to hide/show parts of my text. I was also surprised, like you mentioned, to see how high the browser support is for this feature when prefixed. Luckily, it is also very easy to fallback to a plain text color when in a non-supported browser.

[@KevinPowell]

Oh, that's a cool idea, mind if I use it in a video in the future?

[@WebDevSimplified]

Kevin Powell Of course! If you want to checkout exactly how I created it I have a CodePen here. codepen.io/WebDevSimplified/pen/wEOOve

[@ShirazEsat]

Yay! More like this please. There are so many little things to learn that quickly add value to our sites.

[@vijayroy93]

You are just like guy in TV show who unfold all the mystery behind magic. My super like to you and your hard work 👍

[@KevinPowell]

Haha, thanks so much Vijay!

[@jhred3315]

You always explain the theory clearly. That is why I feel so comfortable with your video. Thank you Keven!

[@vladimirmikulic7860]

I am late to the party, but I have to say you are KING. I am doing back end and I am not so much of a designer, but you really inspire me. True professional 👌

[@KevinPowell]

Thanks so much, and glad that you liked it :)

[@facundocorradini]

Great video. I'm totally loving "Five Minutes Friday". When using this in production make sure to do so inside a @supports query, otherwise browsers not supporting "background-clip:text" will only get invisible text, which is obviously not good. Or use a SVG with a fill: url(#pattern), with #pattern being a SVG containing the on the SVG . (damn, that came out way too entangled for a youtube comment...) That option (if any human understood) has just perfect browser support, down to prehistoric IE.

[@joeldcanfield_spinhead]

I miss 5-Minute Fridays. Came back to this one 'cause I finally need to do this.

[@Risha1792]

Awesome! I wish I new it 3 years ago when I failed similar to this task at my job and asked a designer to come up with another visual solution.

[@trentgrunewald1978]

My favorite Canadian strikes again! I was actually just looking for this, but I will be using it to have a gif show through. Thanks Kevin! Hope you had a great Thanksgiving.

[@KevinPowell]

I did, thanks Trent, and glad the video helped you out :)

[@TheElkster]

You are amazing! Love your channel! Love your videos! Very clear, very relevant and easy to follow!!! Thank you for your contributions!!! 😉

[@rishabhjha9869]

5 min fridays are awesome!!

[@joeldcanfield_spinhead]

Ha! The things that look the hardest can be so easy, and the things clients think are so easy never are.

[@napoleonmila]

Thanks Kevin, keep doing videos like this!!!!

[@chaitanyajharbadem-1740]

Thanks for giving amazing idea and font too looking for that type font from too long

[@parasarora5869]

just loved it...and the opening intro was fabulous 😱😱😱...I am going to try this text trick✌️😎✌️

[@KevinPowell]

Glad you liked it, I was a bit worried that it was a bit over the top, lol. I had wanted it ready for the first one but I didn't have time to finish it. I'll be updating my normal intro as well at one point.

[@parasarora5869]

@@KevinPowell surely wait for that intro to see...✌️😎✌️

[@SazikimiJaeger]

Thanks a lot again. Right to the point of what you are teaching and also in the most simplest way. Thanks a lot. You are a genius. Thanks for teaching us. I'm learning a lot from you.

[@erykkryszewski5803]

nice series. waiting for more :)

[@clevermissfox]

I’m so lost when it comes to clip paths other then their default states. Hopefully by the end of this video I’ll have a clue

[@siddhantjain2402]

Whoa! Didnt know about that. Thanks Kevin!

[@Indeed007]

+1 Thx broski, very much, worked like a charm. The beauty of the Search/KZbin/'Net etc. Took me right to the perfect video. I would've been probably trying to figure this little cool trick out all darn day! lol

[@letroy7227]

Important question! I tried the entire thing step by step and at the end something was wrong: I couldn't stop thinking "how can you, dude, can be so cool sharing thit kind of stuff?" That's just amazing, thanks :D Cheers from France!

[@KevinPowell]

If you included the -webkit- it should work.... unless you're using IE? Also, how can I learn about these things and *not* share them?!

[@feeham]

Very helpful and fun too, awsome new series mate...

[@KevinPowell]

Glad you liked it feeham!

[@patrickc.6183]

I love it! Awesome tips Kevin, keep going!!!

[@richbaker8211]

Learning so much from your channel! Thank you!

[@AliAkbar-vo3te]

Exactly what I have thought you would do. Thanks for the video.

[@Stef-an]

Thanks a lot for the trick, quick and painless video :)

[@thevloglife105]

Really good idea. Thanks for sharing this tutorial.

[@ricardocedaro7316]

Hi Kevin, first of all great tutorial as usual. Question: why are you using -webkit-backgroud-clip?. Thank you

[@nickgreen4336]

Thought it should be much harder 😵 Thanks, Kevin. I like your channel, keep it up! 😉

[@mdadnaniht9285]

Excellent tutorial

[@KevinPowell]

Thanks, glad you liked it!

[@SJ-qr4eb]

Man you are a legend 🤝

[@davinder946]

Thanks lots! Your channel is best to me for learn new things.

[@danccoria]

Another awesome and helpful video! Thanks Kevin!

[@apporvaarya]

Awesome tip.. never had wonder that css can do that too ...thanks for making such a helpful videos for us. :) :)

[@clevermissfox]

Is there a backup if your image link breaks? The colour is transparent so if theres no image it will be invisible?

[@AlThePal78]

In some browsers I find that you need to have the clip property last and the transparent color first, for brave at least

[@Arthursm11]

Obrigado! Me ajudou muito em uma solução criativa para meu trabalho!

I'm a CSS newbie, and I have a somewhat basic question. How does one set a fixed line height in a paragraph, which is never stretched by any inline elements, like inline images or tags with larger font size? I'd like to format some 12pt text on a 14pt baseline grid, but if I also require inline images that are sometimes larger than 14pt and thus stretch the line height. I'd prefer them to just go below the text if they take up too much space, not increase the line height. Simply putting p { line-height: 14pt; } does not work and the line height is sometimes larger, if there are other inline elements. And I can't seem to find a property like "max-line-height"...

[@KevinPowell]

First off, use 'px' instead of 'pt'. Points are a print unit, and it won't lead to consistent results. If a Photoshop (or other) design uses pt, it will look the same if you use 'px' in the browser. Our software shows 1pt as 1px, but it's not the same in the browser. As for that issue.... Unlike with leading in print software, line-height is a minimum height of the content inside the parent. This means an image can have a larger height without issue (though it causes things to look ugly). You can make it so the image doesn't sit on the baseline though, using `vertical-align` that might fix the issue as long as the image isn't too big. Here is an example: codepen.io/kevinpowell/pen/BqyEgz

Thanks for the reply! Unfortunately, this does not solve my problem of uneven lines, because the images still stretch the layout (thus destroying the baseline grid look I'm going for). Even in your example, if you add a couple of more lines of text, you'll see that the line spacing is not consistent, there is simply no way to fit a 40 px image into a 38 px line. Is there perhaps a way to make images behind the text, so they can be of any vertical size? I know how to this with absolute positioning, but then the images lose their inline-ness and it gets very messy very soon, besides, simple resizing of the browser window messes up everything.

Basically, this: image.ibb.co/dmx6ZK/fixed_line_height4.png

[@bharatkumar048]

Could you please tell me how can I set text-shadow with other colors on this text?

[@obscurecult]

Hey Kevin, bro. Can I rotate the background image?

[@fastinoclement3312]

Great video, thanks

[@y.5107]

how to make sure the picture that you pick has the right width if you dont know the text length?

[@coders-rabbi]

Really good

[@aileenchan3741]

Cool video! Thanks for teaching this. Would you say -webkit-background-clip is still in use? And, is this the same way to add a moving image? I will try it. 😀

[@steveringwood2224]

Like the five minute Fridays. Is this really on codepen, I can not seem to find it.

[@KevinPowell]

I forgot to put the link in the description, here it is :) - codepen.io/kevinpowell/pen/18a9b362f753c51f462ba086a535a4da

[@zetazeta1422]

Great tip!! Unfortunately it's not working for me on iOs, although it is on desktop :( Any ideas?? 🙏🙏🙏

[@kvncnls]

Can you do this with videos in the background?

[@techwake360]

awesome tricks

[@sephambrosio2929]

Nice video! Please upload more videos of front-end designs. :)

[@techtipsuk]

Why did you need the WebKit prefix when you were using Firefox?

[@KevinPowell]

I didn't need it there, I was using Chrome. In Firefox it works without it.

[@topsecret9174]

It's so cool😀! Keep going, man 👍

[@JalalKhan-br3ld]

the last moment when you gona stop recording hmmmm...huge love from polland...five minute friday...

[@damascuscode]

This is awesome. Can you do this with say a png or svg graphic?

[@t20sgrunt36]

I wish it were this easy with a video background.

[@KevinPowell]

video is really discouraged as a background for a number of reasons, which is, I believe, their motivation for not simply giving us a single property to pull it off.

[@t20sgrunt36]

I’m sure it’ll be included at some point with everyone pushing BG vids so much in this day and age. As big of a pain that they may be (for so many reasons, as you stated), it’s hard to argue the impact a background vid can have 😔

[@KevinPowell]

I don't think so. I think it'd be fairly easy to implement, but it's a question of them making a decision not to. I could be wrong here, this is pure speculation, but until they stop causing issues on low end mobile devices and people with slow connections or limited bandwidth, I don't see them implementing it. Again, this is me just speculating.

[@punitmajumdar97]

Ya it's very easy and cool thank you master I am from India

[@birdbrainsolutions6112]

Thank you so much! I would subscribe, but I see I already subscribed long time back :)

[@sgt.powerpuff3107]

Hey Kevin! really cool trick here again. I'm wondering if this would work with a video as a background too? I browsed through the comments a bit but couldn't find anything, sry if this is already answered. And by the way... it's actually friday so how cool is that :) have a good one, cheers

[@stevecrabtree9141]

Cool video

[@stefansteinheber1825]

Very nice video! but i have a question: How do you make it so that chrome (not codepen) automatically uses your new written code without reloading? (from another video)

[@SuperiorMan_]

Great video, thanks!

[@pubgfever7202]

Sir you are amazing , can you make a video on media query breakpoints for responsive web designing ?

[@KevinPowell]

I have a very short one, one day I'll do one that's a bit more in depth kzbin.info/www/bejne/aHyvXq1vdpppibM

[@sumankathet2560]

Cool.... why don't we try this effect on a video😉😉

[@mkm1015]

I love this man!

[@KevinPowell]

Glad you liked it 😁

[@A_Lesser_Man]

very cool!

[@owenadu6621]

How do you get to know these stuffs???

[@alexanderjesuraj7004]

thankyou bro.

[@faizalam8163]

Thanks Kevin for this trick.I had a question...When I apply text-shadow property to the text..The whole text become colored and image hides beneath that..Can you help with that..plz

[@KevinPowell]

Because it's a background image, there isn't much we can do. It's still the text in top and an image behind it, so even if the text is transparent, if we add a shadow, that shadow is above the image.

[@faizalam8163]

Ohkk..got that Thanks Kevin.& I would say that your videos are so easy to understand and that's what makes you stand apart for other channels on youtube. :-)

[@tworsfeline2302]

Thanks

[@KyleMerl]

Awesome! Thanks!

[@abhishekwebdeveloper]

Please make video on css mask image

[@videocasetteTV]

Awesome, how can I clip a video instead of image

[@KevinPowell]

you'd have to use a clip-path

[@danielxie4636]

do anyone knows how to add a box-shadow to this beautiful image clipped text?

[@upsylondeveloppement8837]

Thanx great ! ;-) But it's seem don't with local image and video ( for test for me ) only with web images ... strange :-/

[@KevinPowell]

That sounds very strange, it shouldn't make a difference one way or another

[@codingmaster6321]

sadly .. it is friday ... tomorrow we gotta go collage : (

[@KevinPowell]

I have school this weekend too! 😪

[@sheikabdullah8209]

Kevin please tell me what is sass and less css.,

[@KevinPowell]

They are both preprocessors, meaning you write something in Sass (or Less), and it will get processed into regular CSS, so they are another language that eventually gets turned into CSS. They open up functionality that doesn't exist in CSS, and can be really useful. I'm a big fan of Sass myself.

[@sheikabdullah8209]

@@KevinPowell do you have any video of sass ?

[@Edgar-uj9fh]

Hey Kevin! This is the second time I've seen a reference to the "transparent" value of the color property. I can't find a reference to it in online documentation. In the past, I've tried using it to style text, but my experience has been that it is not universally supported. I'll give you one guess which browsers give me trouble. Anyway, I guess I'll have to use it selectively. By the way, thanks for this tutorial!

[@facundocorradini]

use it inside an @supports query, otherwise browsers that don't support background-clip:text will get invisible text

[@KevinPowell]

I didn't realize some browsers don't support it today. It's been around since the second spec of CSS, and was fully implemented in for the 3rd specification - developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent_keyword#transparent_keyword

[@Edgar-uj9fh]

Thanks for the feedback, guys! I'm still so new at this that I didn't even know what a feature query was! Of course I rushed right back to my code so that I could implement it! Unfortunately, it doesn't appear as though Internet Explorer supports the @supports query. Microsoft Edge appears to support it, and tries to execute the corresponding code. As predicted (by someone on another site), it displays neither the foreground color of the text nor the background. In other words, it displays nothing. Since Internet Explorer simply ignores the query altogether, it resorts to default values for the styling. I've been beating my head against the wall trying to accommodate Microsoft's browsers. I'm beginning to believe it's a lost cause. I'm only just getting started as a web designer. Much of the information I've encountered stresses the importance of ensuring that my site supports all browsers. On the other hand, I have encountered other people's websites which warn me that the browser I'm using is not supported. I guess I could resort to that, but…

[@KevinPowell]

Supporting IE is a question of graceful fallbacks. Maybe that feature doesn't work, so maybe there isn't an image inside the text, but if we can read the text, then awesome. Globally, it's only something like 2% of the population that still uses IE (according to caniuse.com). After that, it depends on your own audience. For my personal site, it's under 1%, other sites will have a much bigger audience, so they have more reason to cater to it.

[@Edgar-uj9fh]

Thanks, Kevin! Ideally I'd like to find something that would simply tell me which browser is executing my code. I found a number of scripts that search the user agent string for evidence of Internet Explorer. It didn't look too complicated. If I can find something similar for the Edge browser, I'd be in business.

[@MrCC-hx8xr]

And video instead of image as texture?

[@saarury4885]

you do the same

[@pubgfever7202]

Who disliked it 😣. Too bad for that guy

[@rabidfire2768]

Maybe rename the series to 4:20 Fridays? Nice tip btw👌

[@KevinPowell]

Lol, was just a happy coincidence on this one :)

[@mohamedelsiddig1154]

I'm your big fun really recently I have subscribed best luck for u

[@KevinPowell]

Thanks for the sub Mohamed! Glad that you're enjoying my content!

[@jdnealious3124]

How cool!

[@sheikabdullah8209]

I love ur css trick and tips., Kevin please add video tutorial of creating modal without jquery.,

[@KevinPowell]

I have one! Well, a short series on it kzbin.info/www/bejne/qWG0q42ZfcR-p9U

[@sheikabdullah8209]

Thank you Kevin

[@neeleshgaur8424]

What is webkit, why we use it:(?

[@beatbeast747]

webkit is a tool for browser support.

[@Hashimhamza007]

Nice.

[@syediqbalahmed3176]

nice ...

[@codingmaster6321]

recreation of the iphone X sliding scaling thingi jig ? pls ? ( js jq only if possible )

[@KevinPowell]

Do you have an example, not sure what you mean?

[@codingmaster6321]

@@KevinPowell it was a masked video that when you scrolled it would play frame by frame and scale up at the same time.

[@jenniferward6821]

Next child is called Kevin

[@sck3570]

Cool

[@LtHustensaft]

4:20 🎉

[@joeldcanfield_spinhead]

I know it's obvious to use a large fat font, but I wondered how a very small densely packed font would work. Here's the cover of my latest novel, composed of the first few chapters of the book: joeldcanfield.com/test/

[@KevinPowell]

Oh, that's so much fun, really cool :)

[@rokinos]

Thank you from 2022 2th 5

[@avrumy]

👌

[@julianirmer5854]

'five minute friday'? Sounds like my sex life.

[@bienvenubadiat942]

Julian Irmer 😂

[@raghavm]

Thats still better than mine.

[@KevinPowell]

😂😂😂

[@oladimejiakande9070]

😁😁😁

[@umarsandaahmed9160]

thnx so much for this infact ur not powell bt power am so proud of you bro , i will like to ask one thing can i can the image that i have in my html ,bcs i try bt i don't maket it sir i wi ll like to0 explain more

[@KevinPowell]

Sorry, I'm not sure I understand your question.

[@Dexter101x]

Should be four minutes 19 seconds, just saying, lol

[@Luxcium]

Can I get a refund because it was less than 5 minutes 😜 🔥

[@JesusHernandez-kk2cw]

HI Kevin, love your videos, very helpful, I'm trying to do something like this: dribbble.com/shots/2469147-Netflix-Master-Sign-In, I'm a little can you help me, so far I tried: 1.- Setting a video on position fixed 2.- Creating a div on position fixed with a little transparency 3.- Importing the SVG and clipping it, I wanna kind of take the SVG form out of the full div, and instead the full div is taking the shape of the SVG