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
6 жыл бұрын
Oh, that's a cool idea, mind if I use it in a video in the future?
@WebDevSimplified
6 жыл бұрын
Kevin Powell Of course! If you want to checkout exactly how I created it I have a CodePen here. codepen.io/WebDevSimplified/pen/wEOOve
@vijayroy93
6 жыл бұрын
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
6 жыл бұрын
Haha, thanks so much Vijay!
@ShirazEsat
6 жыл бұрын
Yay! More like this please. There are so many little things to learn that quickly add value to our sites.
@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 :)
@jhred3315
3 жыл бұрын
You always explain the theory clearly. That is why I feel so comfortable with your video. Thank you Keven!
@facundocorradini
6 жыл бұрын
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
3 жыл бұрын
I miss 5-Minute Fridays. Came back to this one 'cause I finally need to do this.
@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 :)
@TheElkster
5 жыл бұрын
You are amazing! Love your channel! Love your videos! Very clear, very relevant and easy to follow!!! Thank you for your contributions!!! 😉
@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.
@parasarora5869
6 жыл бұрын
just loved it...and the opening intro was fabulous 😱😱😱...I am going to try this text trick✌️😎✌️
@KevinPowell
6 жыл бұрын
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
6 жыл бұрын
@@KevinPowell surely wait for that intro to see...✌️😎✌️
@erykkryszewski5803
6 жыл бұрын
nice series. waiting for more :)
@SJ-qr4eb
Жыл бұрын
Man you are a legend 🤝
@letroy7227
6 жыл бұрын
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?!
@rishabhjha9869
6 жыл бұрын
5 min fridays are awesome!!
@feeham
6 жыл бұрын
Very helpful and fun too, awsome new series mate...
@KevinPowell
6 жыл бұрын
Glad you liked it feeham!
@chaitanyajharbadem-1740
3 жыл бұрын
Thanks for giving amazing idea and font too looking for that type font from too long
@napoleonmila
Жыл бұрын
Thanks Kevin, keep doing videos like this!!!!
@Indeed007
4 жыл бұрын
+1 Thx broski, very much, worked like a charm. The beauty of the Search/KZitem/'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
@patrickc.6183
5 жыл бұрын
I love it! Awesome tips Kevin, keep going!!!
@richbaker8211
4 жыл бұрын
Learning so much from your channel! Thank you!
@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.
@nickgreen4336
5 жыл бұрын
Thought it should be much harder 😵 Thanks, Kevin. I like your channel, keep it up! 😉
@Stef-an
3 жыл бұрын
Thanks a lot for the trick, quick and painless video :)
@danccoria
6 жыл бұрын
Another awesome and helpful video! Thanks Kevin!
@siddhantjain2402
6 жыл бұрын
Whoa! Didnt know about that. Thanks Kevin!
@mdadnaniht9285
5 жыл бұрын
Excellent tutorial
@KevinPowell
5 жыл бұрын
Thanks, glad you liked it!
@apporvaarya
5 жыл бұрын
Awesome tip.. never had wonder that css can do that too ...thanks for making such a helpful videos for us. :) :)
@AliAkbar-vo3te
6 жыл бұрын
Exactly what I have thought you would do. Thanks for the video.
@ricardocedaro7316
Жыл бұрын
Hi Kevin, first of all great tutorial as usual. Question: why are you using -webkit-backgroud-clip?. Thank you
@davinder946
5 жыл бұрын
Thanks lots! Your channel is best to me for learn new things.
@thevloglife105
5 жыл бұрын
Really good idea. Thanks for sharing this tutorial.
@fastinoclement3312
4 жыл бұрын
Great video, thanks
@topsecret9174
6 жыл бұрын
It's so cool😀! Keep going, man 👍
@coders-rabbi
Жыл бұрын
Really good
@birdbrainsolutions6112
3 жыл бұрын
Thank you so much! I would subscribe, but I see I already subscribed long time back :)
@joeldcanfield_spinhead
5 жыл бұрын
Ha! The things that look the hardest can be so easy, and the things clients think are so easy never are.
@techwake360
5 жыл бұрын
awesome tricks
@clevermissfox
11 ай бұрын
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
@SuperiorMan_
6 жыл бұрын
Great video, thanks!
@punitmajumdar97
4 ай бұрын
Ya it's very easy and cool thank you master I am from India
@tworsfeline2302
2 жыл бұрын
Thanks
@alexanderjesuraj7004
4 жыл бұрын
thankyou bro.
@mkm1015
6 жыл бұрын
I love this man!
@KevinPowell
6 жыл бұрын
Glad you liked it 😁
@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
@aileenchan3741
3 жыл бұрын
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. 😀
@stevecrabtree9141
Жыл бұрын
Cool video
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
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.
how to make sure the picture that you pick has the right width if you dont know the text length?
@clevermissfox
9 ай бұрын
Is there a backup if your image link breaks? The colour is transparent so if theres no image it will be invisible?
@sephambrosio2929
6 жыл бұрын
Nice video! Please upload more videos of front-end designs. :)
@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!
@bharatkumar048
3 жыл бұрын
Could you please tell me how can I set text-shadow with other colors on this text?
@zetazeta1422
4 жыл бұрын
Great tip!! Unfortunately it's not working for me on iOs, although it is on desktop :( Any ideas?? 🙏🙏🙏
@stefansteinheber1825
6 жыл бұрын
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)
@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 kzitem.info/news/bejne/k4GCk65vemdnhoY
@JalalKhan-br3ld
5 жыл бұрын
the last moment when you gona stop recording hmmmm...huge love from polland...five minute friday...
@kvncnls
Жыл бұрын
Can you do this with videos in the background?
@jdnealious3124
5 жыл бұрын
How cool!
@danielxie4636
5 жыл бұрын
do anyone knows how to add a box-shadow to this beautiful image clipped text?
@obscurecult
2 жыл бұрын
Hey Kevin, bro. Can I rotate the background 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.
@techtipsuk
6 жыл бұрын
Why did you need the WebKit prefix when you were using Firefox?
@KevinPowell
6 жыл бұрын
I didn't need it there, I was using Chrome. In Firefox it works without it.
@sumankathet2560
6 жыл бұрын
Cool.... why don't we try this effect on a video😉😉
@damascuscode
2 жыл бұрын
This is awesome. Can you do this with say a png or svg graphic?
@syediqbalahmed3176
4 жыл бұрын
nice ...
@MrCC-hx8xr
8 ай бұрын
And video instead of image as texture?
@saarury4885
6 ай бұрын
you do the same
@abhishekwebdeveloper
2 жыл бұрын
Please make video on css mask image
@steveringwood2224
6 жыл бұрын
Like the five minute Fridays. Is this really on codepen, I can not seem to find it.
@KevinPowell
6 жыл бұрын
I forgot to put the link in the description, here it is :) - codepen.io/kevinpowell/pen/18a9b362f753c51f462ba086a535a4da
@Hashimhamza007
6 жыл бұрын
Nice.
@owenadu6621
Жыл бұрын
How do you get to know these stuffs???
@sck3570
6 жыл бұрын
Cool
@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
@jerzycrypto1941
2 жыл бұрын
Thank you from 2022 2th 5
@LtHustensaft
5 күн бұрын
4:20 🎉
@videocasetteTV
5 жыл бұрын
Awesome, how can I clip a video instead of image
@KevinPowell
5 жыл бұрын
you'd have to use a clip-path
@jenniferward6821
3 жыл бұрын
Next child is called Kevin
@codingmaster6321
6 жыл бұрын
sadly .. it is friday ... tomorrow we gotta go collage : (
@KevinPowell
6 жыл бұрын
I have school this weekend too! 😪
@sheikabdullah8209
6 жыл бұрын
I love ur css trick and tips., Kevin please add video tutorial of creating modal without jquery.,
@KevinPowell
6 жыл бұрын
I have one! Well, a short series on it kzitem.info/news/bejne/1GaH4I6ZgZF8pKg
@sheikabdullah8209
5 жыл бұрын
Thank you Kevin
@pubgfever7202
5 жыл бұрын
Who disliked it 😣. Too bad for that guy
@faizalam8163
6 жыл бұрын
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
6 жыл бұрын
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
6 жыл бұрын
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. :-)
@joeldcanfield_spinhead
5 жыл бұрын
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
5 жыл бұрын
Oh, that's so much fun, really cool :)
@Edgar-uj9fh
6 жыл бұрын
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
6 жыл бұрын
use it inside an @supports query, otherwise browsers that don't support background-clip:text will get invisible text
@KevinPowell
6 жыл бұрын
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
6 жыл бұрын
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
6 жыл бұрын
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
6 жыл бұрын
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.
@rabidfire2768
5 жыл бұрын
Maybe rename the series to 4:20 Fridays? Nice tip btw👌
@KevinPowell
5 жыл бұрын
Lol, was just a happy coincidence on this one :)
@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 ?
@neeleshgaur8424
6 жыл бұрын
What is webkit, why we use it:(?
@beatbeast747
5 жыл бұрын
webkit is a tool for browser support.
@codingmaster6321
6 жыл бұрын
recreation of the iphone X sliding scaling thingi jig ? pls ? ( js jq only if possible )
@KevinPowell
6 жыл бұрын
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.
@avrumy
6 жыл бұрын
👌
@julianirmer5854
6 жыл бұрын
'five minute friday'? Sounds like my sex life.
@bienvenubadiat942
6 жыл бұрын
Julian Irmer 😂
@raghavm
6 жыл бұрын
Thats still better than mine.
@KevinPowell
6 жыл бұрын
😂😂😂
@oladimejiakande9070
5 жыл бұрын
😁😁😁
@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.
@Luxcium
5 жыл бұрын
Can I get a refund because it was less than 5 minutes 😜 🔥
@Dexter101x
6 жыл бұрын
Should be four minutes 19 seconds, just saying, lol
@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
Пікірлер: 146