Border and CMS issue
Hey @Web Bae
1. How can I get a dashed border with a gradient in it? I tried using the custom this code
border-image: linear-gradient(to right, #FF5733, #FFC300);
border-image-slice: 1;
border-width: 2px;
border-style: dashed;
but I'm not getting the dashed border!
2. Also, How can I make the read more click interaction in the blog img below, I tried setting the height to 6rem and then auto, it worked for me but it's not smooth it's causing a delay because the original size of the block is auto. (Can you suggest me the best way to fix it?)
4 Replies
I don’t there’s any css property for gradient border. What I normally do it use to use two divs. The outer div will have the gradient with 1px padding and the inner div will have solid color.
Yes, I was able to solve that with this method, can you help me with the second issue? please? It's urgent
@Sushant Dhiwar animating to a height of auto is notoriously tricky. You can do it with
grid-template-row though. Does this video answer your question? https://youtu.be/ZBGsrAQJGfw?si=RN7HfoAxfLGkih5kWeb Bae
YouTube
CSS Hack! Animate Height from 0 to Auto
In this video we'll explore a unique solution to a common problem with CSS Transitions - animating height from 0 to auto (the natural text flow). Keith J. Grant and Nelson Menezes have a great solution using the grid-template-rows property that we will get set up in a Webflow project using a simple accordion as an example.
// CLONE IT (affiliat...
Thanks @Web Bae