Тёмный

The border property you never knew you needed 

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

The border-image property is a blast from the past for anyone who had to make buttons with round corners on them back in the 2000s, but these days we can use it for fun gradient effects too!
🔗 Links
✅ Mozilla border image generator: developer.mozilla.org/en-US/d...
⌚ Timestamps
00:00 - Introduction
00:47 - Looking at the basics with an image
03:07 - Making sense of border-image-slice
05:28 - Using border-image-repeat
07:10 - The fill keyword
09:00 - Gradient example one
11:04 - Gradient example two
12:05 - Gradient example three
#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
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
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.
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!

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

 

6 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 184   
@zachjensz
@zachjensz Год назад
This is borderline fantastic
@KevinPowell
@KevinPowell Год назад
🥁
@-_._._-
@-_._._- Год назад
This comment should be pinned for posterity :P
@sonjadilan777
@sonjadilan777 Год назад
🤣💪🏾🔥😎
@OLDACCOUNT_notfireman
@OLDACCOUNT_notfireman Год назад
No, this is borderline godtier. Saying borderline fantastic is the same as saying barely fantastic
@kdot78
@kdot78 Год назад
@@OLDACCOUNT_notfireman okay Shakespeare
@graysonpeddie
@graysonpeddie Год назад
I have just implemented the transparent gradient border in my website thanks to you! Awesome! I actually use it in an :after element behind the semi-transparent background for my articles with the z-index set to -1. 😃
@Luxalpa
@Luxalpa 2 месяца назад
5:38 "This isn't what you'd think it is" - that's a great description of CSS properties in general!
@kncle
@kncle Год назад
This is so cool. I want to see more of these little design hacks for common designs patterns.
@Vattevaii
@Vattevaii Год назад
Damn .. been searching all over the place for gradient borders.. I just used to add multiple backgrounds with proper positioning and size to emulate gradient borders.. or just layer ::before to get gradient border.. This was too informative Love you bro
@sergnio
@sergnio Год назад
I couldn't figure out why it wasn't working, but of course coming to a Kevin Powell video you learn exactly what you need
@j7coder
@j7coder Год назад
Amazing!! You make me fall in love with css!
@giorgiteliashvili5268
@giorgiteliashvili5268 2 месяца назад
Thanks for your explanation, very clear and helpful, fantastic!
@shakirdodhiya8770
@shakirdodhiya8770 Год назад
Nice content Kevin I also used gradient borders in some of my recent projects One drawback is that it doesn't work with border radius
@TheRalic
@TheRalic Год назад
Excellent video, never used borders like that and I think I will start using it from now on ^_^
@__anasmustafa
@__anasmustafa Год назад
Get well soon Kevin! Great content as always!
@askjamesss
@askjamesss Год назад
KP CSS Tutorials as it's finest. ☝️🙌
@chrisozz2007
@chrisozz2007 Год назад
this was great. was able to use it immediately at work. Thanks
@user-sy7lm6lw8i
@user-sy7lm6lw8i Год назад
Perfect, I am coding my small project now, as I am not a designer i try to make things look simple, but i always want to add some artistic touch to them. The transparent border is something i need)
@angrytvrobot6130
@angrytvrobot6130 Год назад
Holy crap this is mindblowing. Thank you! I'm going to mess around with this on my current project.
@bilatungdulang9708
@bilatungdulang9708 Год назад
Really fantastic thing from border image, thanks for sharing my friend
@nonchain
@nonchain Год назад
Man you just saved my life with this tutorial Thanks a lot
@solaarsslave
@solaarsslave Год назад
i almost always learn something new, thanks!
@thedelanyo
@thedelanyo Год назад
Your video contents are top notch Sir . Thanks.
@vectork3
@vectork3 4 месяца назад
This is really cool. Thank you sir!
@sabiruli
@sabiruli Год назад
This is amazing! Thanks @Kevin
@balubalaji9956
@balubalaji9956 Год назад
enjoyed the examples at the end.. just wow
@YurijVolkov
@YurijVolkov Год назад
Last time I use border-image when it was as an exercise in a paper tutorial book and it was almost useless in real world. But now, with a gradient, that might be usable! Thanks!!
@millos0116
@millos0116 Год назад
I really enjoy your tutorials, voice and positive energy, God bless you brother🙏💙
@blackcheetah4550
@blackcheetah4550 Год назад
Very useful video, thanks
@oleksandrvorovchenko8674
@oleksandrvorovchenko8674 Год назад
Thanks! Very useful, as usual.
@StevenDavisPhoto
@StevenDavisPhoto Год назад
Omigosh! I didn't know this was doable! This video would have helped when I needed to do a gradient border a while back. Dang. Haha.
@anaselhassani2545
@anaselhassani2545 Год назад
THANK YOU SO MUCH FOR THIS VIDEO
@peternicholson26
@peternicholson26 Год назад
that was some pretty slick border action. I need to inject this knowledge into the designers at work so they only design based off the things I already know ha
@n0n1m
@n0n1m Год назад
Mind blowing and really beautiful:)
@mikodizon8322
@mikodizon8322 Год назад
great video! Thanks kevin!
@j.almadhaji
@j.almadhaji Год назад
Well, that's new Thank you Kevin
@AlvinIsChipmunk
@AlvinIsChipmunk Год назад
for gradient border i always use background: linear-gradient and changing border to transparent. background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to right, #9c20aa, #fb3570) border-box; border: 10px solid transparent; first linear-gradient is basically your background color to fill only the padding box while sitting on a second linear gradient which is the gradient that fills to the whole border area.
@Way_Of_The_Light
@Way_Of_The_Light Год назад
Hey quick question, How do you make the border show up inside the box? Like an inner frame of a Tarot Card? 🙏
@AlvinIsChipmunk
@AlvinIsChipmunk Год назад
@@Way_Of_The_Light I only know how to do it with solid colors with box-shadow inset... Or a negative outline-offset.. creating a pseudo element sortof works too(by making width and height smaller than the parent)...
@mcnagynorbi
@mcnagynorbi Год назад
@@Way_Of_The_Light You can have two borders actually. You can use outline as a second border around it.
@Way_Of_The_Light
@Way_Of_The_Light Год назад
I see, Thanks for the answers guys 🙏
@lazy07
@lazy07 Год назад
Nice video will help me in my next Website 👍
@GauravKumar-ue7nz
@GauravKumar-ue7nz Год назад
Thanks Kevin
@user-bg6zk3ly5v
@user-bg6zk3ly5v Год назад
Hi Kevin, great video. I have a question, is it possible to do the last border and both sides?
@WarframeCrunch
@WarframeCrunch Год назад
Thanks for that, I didn't known about border-image
@haliszekeriyaozkok4851
@haliszekeriyaozkok4851 Год назад
Very beautiful.
@nicholaskane69
@nicholaskane69 Год назад
I use these to put 'Final Fantasy 7'-style borders around UI elements on my Twitch streams. They're great!
@onnot701
@onnot701 Год назад
I wonder if you design straight in css and hrml or still use figma?
@overwatch9659
@overwatch9659 Год назад
Great video 🙏🏾🖤
@MrAsgardian1987
@MrAsgardian1987 Год назад
You just saved me some serious design headache (Y)
@clamhammer2463
@clamhammer2463 Год назад
Could you use container queries to make slice more dynamic?
@wayneswildworld
@wayneswildworld Год назад
Awesome video!!!
@uc9773
@uc9773 Год назад
Such a cool things~ thx
@COLI_ALVAREZ
@COLI_ALVAREZ Год назад
Hello! thanks for the video, very help full! which is the right size for an image not to pixel when using this property?
@cacowen
@cacowen Год назад
Thanks for the video. Good stuff. Would this be a good use case for throwing a loading "spinner" on a button? I played around a bit and think the Gradient Example 2 approach with an animation altering the deg would make it look like a loading bar and perfect for a button. Throw the loading class on the button when it is clicked, and remove that class when the process is finished.
@crifox16
@crifox16 Год назад
yeah that's what i was thinking too, especially with example three with a rotate animation
@Jakiita1
@Jakiita1 Год назад
I've been stuck trying to figure out an animated border-gradient with a Border radius while keeping a transparent background. I've seen ur animated border gradient video but with that method it looked like you need a 'background' for the card at the front to hide the gradient thats behind it. Is there a way to make an animated border with round corners? The SVG videos gave me the impression the gradient cannot be done in the CSS only in HTML, am I understanding that right?
@paulooliveira8976
@paulooliveira8976 4 месяца назад
Welcome to the styling side!!
@matthewblasco4720
@matthewblasco4720 Год назад
🤩🤩🤩🤩 ty for making css awesome
@arshad1781
@arshad1781 Год назад
Thanks 👍
@piterparker990
@piterparker990 Год назад
its work thx brother 🙏
@tcgvsocg1458
@tcgvsocg1458 Год назад
genius! thx a lot
@eothica
@eothica Год назад
lol saved me hours with that mozilla border image generator
@smsmsmow4109
@smsmsmow4109 Год назад
wow >> you are amazing
@quintenmantez6934
@quintenmantez6934 Год назад
Nice!!! Thx!
@chrisicotec7652
@chrisicotec7652 Год назад
css used to stress me out, this channel makes it much less scary and confusing
@ahmedharb88
@ahmedharb88 Год назад
great explanation Kevin ♥ so could you provide us a tutorial about : circular progress border using CSS
@KevinPowell
@KevinPowell Год назад
We could do something fun with that!
@ahmedharb88
@ahmedharb88 Год назад
@@KevinPowell thanks a lot for that
@rajarorauk
@rajarorauk Год назад
This is brilliant, and very timely for a project I'm working on right now. However I'm struggling a little - I'm using a png with a design on a white background for border image, but my border seems to get a small gradient. I can't work out why or how to remove it. Any advice please?
@rajarorauk
@rajarorauk Год назад
Don't worry. I fixed it. Only took 2 hours! The gradient was a box shadow from the div above. Obvs really.
@tworsfeline2302
@tworsfeline2302 Год назад
I like that that CSS property now exists. ("that that" isn't a typo, it is weird grammar in English)
@sarsario
@sarsario Год назад
Good stuff
@StefanoVolponi
@StefanoVolponi Год назад
The first 30 seconds are enough to make me feel oooooooooooooold
@Sean-Smith-Photos
@Sean-Smith-Photos Год назад
Very cool
@realdev8940
@realdev8940 Год назад
Can you please explain how it works for circular divs or images.
@tinguyen_dev
@tinguyen_dev 7 месяцев назад
How about the gradient border with radius? And transparent background also.
@aymanayman8209
@aymanayman8209 Год назад
Sir, I would like to see you create a 2D intro with css, and by the way its because of you I loved css. Thank you for the amazing videos.
@rodbrowning
@rodbrowning Год назад
I think this is the only video about this subject in the internet
@sharkinahat
@sharkinahat Год назад
Remember when border-radius wasn't a thing and everything had a gif border-image? Pepperidge farm remembers.
@santhoshh4748
@santhoshh4748 Год назад
These videos should be paid
@danisob3633
@danisob3633 Год назад
I love it
@mmuralikrishna2881
@mmuralikrishna2881 Год назад
If am using border gradient doesn't support border radius. Any solution for this i dont want background-image gradient with border radius.
@wahyusa
@wahyusa Год назад
Cool !! 💯💯💯
@NIronwolf
@NIronwolf Год назад
Here's a fun "highlight the corners" snip-it. Setup your own color and the transparent percents can tune how quick it fades out on each corner. The "to" keeps it pointed at the other corner if your container changes size. border: 0.3rem solid; border-image-source: linear-gradient( to bottom right, $color, transparent 30%, transparent 80%, darken($color, 10%) ); border-image-slice: 1;
@octothorpe12
@octothorpe12 Год назад
I've needed something akin to the radial gradient tip at the end, where you want something similar to 'mounting corners' in a photo album. Adjusting the stops to give a hard start to the transparency would be perfect!
@Rajendrakumar-zu4st
@Rajendrakumar-zu4st Год назад
how to give border radius while using the linear gradient one?
@madameknees
@madameknees Год назад
How does this interact with border-radius, and how many of these properties are animatable?
@Eleanor8965
@Eleanor8965 Год назад
This was great! I am curious however on how you'd mix this with adding a border radius as well. It seems that the two "fight" one another.
@KevinPowell
@KevinPowell Год назад
Yeah it's one or the other with border-image :)
@Eleanor8965
@Eleanor8965 Год назад
@@KevinPowell Thank you for this video and for your response. Also, I was the guy who emailed you last week about this very topic. This channel is awesome!
@captuhu
@captuhu Год назад
right now if you want a round corner it would have to be included as part of the image. I have a github issue open with the CSSWG on making gradient border-image with work with border-radius.
@taneshpatel3051
@taneshpatel3051 Год назад
Informative..
@balubalaji9956
@balubalaji9956 Год назад
wow nice.
@NotKyleChicago
@NotKyleChicago Год назад
If you used "fill", would there be a lime green semicircle in the top left?
@estonian44
@estonian44 Год назад
dang, u r wizard
@murshid9033
@murshid9033 Год назад
Can you do a video on animating gradient borders
@drenskywalker
@drenskywalker Год назад
✨ magic ✨
@editin232
@editin232 Год назад
But how do you do it on rounded corners?
@hoffix0123
@hoffix0123 Год назад
does it work with border-radius?
@Kawlinz
@Kawlinz Год назад
4:24 - "I mucked up my bottom a little bit" I do that from time to time - it's fine
@jameswrightson744
@jameswrightson744 Год назад
Also known as a 9 slice on video games 🔥
@silasdaniel1850
@silasdaniel1850 Год назад
useful
@razorjhon2622
@razorjhon2622 Год назад
how can we animate the linear gradient border , thank you for this i almost forgot how to use border and this video reminded me of it ^^
@KevinPowell
@KevinPowell Год назад
Because it's an image-source, just like a background-image, we can't animate it sadly. Or well, we could with @property and custom properties, but the support isn't very good.
@stephanvandermeijden289
@stephanvandermeijden289 Год назад
@@KevinPowell Should be possible with JavaScript, right? Doesn't sound like a good idea, though.
@sheezanawaz476
@sheezanawaz476 Год назад
How can I do the property of border-radius? when I give the border radius it effects the background color not linear-gradient border
@KevinPowell
@KevinPowell Год назад
No border radius with the images sadly, you'd have to set the corners of the image up to be rounded
@sheezanawaz476
@sheezanawaz476 Год назад
@@KevinPowell but I am using linear gradient color for border, not image
@MathGeekQ
@MathGeekQ Год назад
nice
@czerskip
@czerskip Год назад
Lovely! 🎨 Now, how about we combine images, gradients, clipping/blending and pseudoelements, and we get photo cutouts for borders… 🤔
@KevinPowell
@KevinPowell Год назад
I did it with cut corners and a gradient awhile back, you could probably use the same technique with an image - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aW6qEAQSctY.html
@hybridboy9_9
@hybridboy9_9 Год назад
How can we do animation on it
@MichaelWestcott
@MichaelWestcott Год назад
Using border-image was pretty common before CSS3
@Gelo2000origami
@Gelo2000origami Год назад
Watching you makes me want to ditch tailwind and just use css
@KevinPowell
@KevinPowell Год назад
That just made my day 😅
@ev721
@ev721 Год назад
Damn!
@user-eg3yd5pw2f
@user-eg3yd5pw2f 3 месяца назад
What about border-radius with this properties?
@bubaisubrata
@bubaisubrata Год назад
Can we use transition(s) on these borders??
@KevinPowell
@KevinPowell Год назад
No, they're not animatable.
@BlackCrypt
@BlackCrypt Год назад
Who does your back-end?
@tcob78vaibhavwable95
@tcob78vaibhavwable95 3 месяца назад
how to do it for rounded borders
Далее
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 897 тыс.
🎙Я ВСЁ ЕЩЕ ВЕЩАЮ 📻
2:44:57
Просмотров 885 тыс.
Signal for help
00:52
Просмотров 2 млн
Markdown - напиши README за 2 минуты
21:40
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 57 тыс.
6 things I wish I knew about CSS when I started
9:09
Просмотров 224 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 51 тыс.
microsoft recall is an absolute dumpster fire
9:34
Просмотров 20 тыс.
What would you call this layout?
23:11
Просмотров 32 тыс.
Top 10 CSS Features You Should Know & Use in 2023
19:56
How to take control of Flexbox
16:01
Просмотров 102 тыс.