Clip an image to text with CSS

Подписаться 902 тыс.

Просмотров 73 тыс.

50% 1

It's surprisingly easy to clip a background image to some text!
We can use the background-clip property to do it. This let's change how a background is clipping, with padding-box, border-box and content-box all being options. This time though, we're focused on `background-clip: text`.
The only issue is, when you first do it, you won't see your text, so you'll want to make that text transparent so you can actually see the image.
CodePen: codepen.io/kevinpowell/pen/18...
#fiveminutefriday
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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

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

27 сен 2018

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 145

@WebDevSimplified 5 лет назад

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 5 лет назад

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

@WebDevSimplified 5 лет назад

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 5 лет назад

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

@jhred3315 3 года назад

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

@facundocorradini 5 лет назад

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.

@patrickc.6183 5 лет назад

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

@TheElkster 5 лет назад

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

@niteshkhatri88 5 лет назад

Really good idea. Thanks for sharing this tutorial.

@SazikimiJaeger 5 лет назад

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.

@vijayroy93 5 лет назад

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 5 лет назад

Haha, thanks so much Vijay!

@joeldcanfield_spinhead 3 года назад

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.

@napoleonmila Год назад

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

@danccoria 5 лет назад

Another awesome and helpful video! Thanks Kevin!

@AliAkbar-vo3te 5 лет назад

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

@rishabhjha9869 5 лет назад

5 min fridays are awesome!!

@richbaker8211 4 года назад

Learning so much from your channel! Thank you!

@erykkryszewski5803 5 лет назад

nice series. waiting for more :)

@trentgrunewald1978 5 лет назад

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 5 лет назад

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

@siddhantjain2402 5 лет назад

Whoa! Didnt know about that. Thanks Kevin!

@vladimirmikulic7860 5 лет назад

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 5 лет назад

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

@nickgreen4336 5 лет назад

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

@davinder946 5 лет назад

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

@chaitanyajharbadem-1740 3 года назад

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

@SJ-qr4eb 9 месяцев назад

Man you are a legend 🤝

@topsecret9174 5 лет назад

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

@Stef-an 3 года назад

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

@apporvaarya 5 лет назад

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

@feeham 5 лет назад

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

@KevinPowell 5 лет назад

Glad you liked it feeham!

@SuperiorMan_ 5 лет назад

Great video, thanks!

@fastinoclement3312 3 года назад

Great video, thanks

@alexanderjesuraj7004 4 года назад

thankyou bro.

@KyleMerl 5 лет назад

Awesome! Thanks!

@coders-rabbi 10 месяцев назад

Really good

@parasarora5869 5 лет назад

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

@KevinPowell 5 лет назад

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 5 лет назад

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

@Indeed007 3 года назад

+1 Thx broski, very much, worked like a charm. The beauty of the Search/RU-vid/'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

@ricardocedaro7316 8 месяцев назад

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

@mdadnaniht9285 5 лет назад

Excellent tutorial

@KevinPowell 5 лет назад

Thanks, glad you liked it!

@techwake360 4 года назад

awesome tricks

@A_Lesser_Man 5 лет назад

very cool!

@mkm1015 5 лет назад

I love this man!

@KevinPowell 5 лет назад

Glad you liked it 😁

@sephambrosio2929 5 лет назад

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

@jdnealious3124 5 лет назад

How cool!

@stevecrabtree9141 Год назад

Cool video

@tworsfeline2302 2 года назад

Thanks

@clevermissfox 7 месяцев назад

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

@iliankarasimirov9685 5 лет назад

Thanks!

@KevinPowell 5 лет назад

No problem :)

@Hashimhamza007 5 лет назад

Nice.

@birdbrainsolutions6112 3 года назад

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

@aileenchan3741 2 года назад

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

@punitmajumdar97 20 дней назад

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

@sck3570 5 лет назад

Cool

@joeldcanfield_spinhead 4 года назад

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

@letroy7227 5 лет назад

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 5 лет назад

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

@JalalKhan-br3ld 5 лет назад

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

@damascuscode 2 года назад

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

@mohamedelsiddig1154 5 лет назад

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

@KevinPowell 5 лет назад

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

@stefansteinheber1825 5 лет назад

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)

@syediqbalahmed3176 4 года назад

nice ...

@sumankathet2560 5 лет назад

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

@pubgfever7202 5 лет назад

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

@KevinPowell 5 лет назад

I have a very short one, one day I'll do one that's a bit more in depth ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2KL-z9A56SQ.html

@obscurecult 2 года назад

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

@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

@zetazeta1422 4 года назад

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

@avrumy 5 лет назад

👌

@y.5107 4 года назад

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

@bharatkumar048 3 года назад

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

@danielxie4636 5 лет назад

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

@kvncnls Год назад

Can you do this with videos in the background?

@clevermissfox 5 месяцев назад

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

@abhishekwebdeveloper Год назад

Please make video on css mask image

@t20sgrunt36 5 лет назад

I wish it were this easy with a video background.

@KevinPowell 5 лет назад

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 5 лет назад

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 5 лет назад

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.

@owenadu6621 Год назад

How do you get to know these stuffs???

@KresimirYT 5 лет назад

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 5 лет назад

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

@KresimirYT 5 лет назад

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.

@KresimirYT 5 лет назад

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

@sheikabdullah8209 5 лет назад

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

@KevinPowell 5 лет назад

I have one! Well, a short series on it ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-s0QzZcH_Kqs.html

@sheikabdullah8209 5 лет назад

Thank you Kevin

@Edgar-uj9fh 5 лет назад

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 5 лет назад

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

@KevinPowell 5 лет назад

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 5 лет назад

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 5 лет назад

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 5 лет назад

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.

@pubgfever7202 5 лет назад

Who disliked it 😣. Too bad for that guy

@steveringwood2224 5 лет назад

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

@KevinPowell 5 лет назад

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

@techtipsuk 5 лет назад

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

@KevinPowell 5 лет назад

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

@jerzycrypto1941 2 года назад

Thank you from 2022 2th 5

@upsylondeveloppement8837 5 лет назад

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

@KevinPowell 5 лет назад

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

@faizalam8163 5 лет назад

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 5 лет назад

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 5 лет назад

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

@rabidfire2768 5 лет назад

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

@KevinPowell 5 лет назад

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

@videocasetteTV 5 лет назад

Awesome, how can I clip a video instead of image

@KevinPowell 5 лет назад

you'd have to use a clip-path

@MrCC-hx8xr 4 месяца назад

And video instead of image as texture?

@saarury4885 2 месяца назад

you do the same

@codingmaster6321 5 лет назад

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

@KevinPowell 5 лет назад

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

@codingmaster6321 5 лет назад

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

@sheikabdullah8209 5 лет назад

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

@KevinPowell 5 лет назад

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 5 лет назад

@@KevinPowell do you have any video of sass ?

@codingmaster6321 5 лет назад

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

@KevinPowell 5 лет назад

I have school this weekend too! 😪

@joeldcanfield_spinhead 4 года назад

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 4 года назад

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

@jenniferward6821 3 года назад

Next child is called Kevin

@neeleshgaur8424 5 лет назад

What is webkit, why we use it:(?

@beatbeast747 5 лет назад

webkit is a tool for browser support.

@umarsandaahmed9160 5 лет назад

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 5 лет назад

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

@JesusHernandez-kk2cw 4 года назад

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