CSS Nugget: Gradient Borders in CSS
✉️ Receive a monthly CSS nugget by email: codyhouse.co/newsletter
🕹 Code demo: codyhouse.co/nuggets/css-grad...
How to create gradient borders in CSS.
Method 3 credits: dev.to/afif/border-with-gradi...
~
🐦 Follow us on Twitter / codywebhouse
🐞 Looking for a great UI Framework? codyhouse.co/ds/components
Пікірлер: 18
It didn't work for me at first, but after I added background: transparent to the .btn-gradient, it looks good now. Thanks!
Dude, thank you so much, i was getting crazy about that and you came to my life like a angel
woah thank you for this amazing tutorial. Helped me achieve this.
Amazing.... Thanks.
Nice video, it solved my project problem, thanks a lot
Excellent and well presented tutorial. Thank you for sharing. Could you please do a tutorial on the image animation used in your Mercurio template. It's a subtle animation in which the width or height of the image expands (when the image enters the viewport). I'm guessing it's created using a clip-path and triggered using AOS or Intersection Observer.
@cody-house
3 жыл бұрын
Great idea! We're on it :)
fast and easy, thanks!
спасибо дружище, обыскал весь интернет ..... ни на одном русскоязычном канале не нашел решения.
man you saved me!!
amazing video but, according to 'caniuse', mask is not supported to many browsers to this date. Is there any good solution to use until become standard?
@cody-house
3 жыл бұрын
Hi Fabrizio! We use Autoprefixer to automatically add vendor prefixes. The prefixed version has good browser support (97%). Alternatively, you can use the background-clip technique (method 2 in the video)
@avertry9529
2 жыл бұрын
All the mask code needs to be preceded with webkit and for composite it's clear not exclude. ( -webkit-mask-composite: clear; ) Chrome engine. Also you need to use svg or transparent png, if doing an image, not a jpg.
Why is this so complicated. :) In Elementor it's also impossible to do it without additional CSS.
can't use "mask". don't know why
@avertry9529
2 жыл бұрын
All the mask code needs to be preceded with webkit and for composite it's clear not exclude. ( -webkit-mask-composite: clear; ) Chrome engine. Also you need to use svg or transparent png, if doing an image, not a jpg.
Helpful.. but isn't working for me.. -_-
@avertry9529
2 жыл бұрын
All the mask code needs to be preceded with -webkit- and for composite it's clear not exclude. ( -webkit-mask-composite: clear; ) Chrome engine. Also you need to use svg or transparent png, if doing an image, not a jpg.